Wireframes and thoughts behind a Cloud Foundry mobile app

1. Happy Clouds
Purpose: A mobile app to manage memory capacity,
number of instances, and to unbind services on
targets remotely
Goal: To create a minimalistic interface that prompts
direct action
1
Happy Clouds | a mobile app for Cloud Foundry TM
|| Kristen Mozian

2. 1 2 3 4
1) After the app is downloaded, the user can immediately start using the app. I wanted the first point of entry to prompt action without any additional
steps. The plus sign and cloud symbol indicates add target. This symbol is used on subsequent screens to indicate the option to add additional targets.
You will notice there is not a log-in screen to access the app because each target requires its own username, password, and URI to gain access. Having a
preliminary log-in would be redundant and cumbersome.
2 & 3) After clicking on the add target symbol the user will be prompted to enter their username, password, and URI. There’s an option to remember the
log-in information for easy future access.
4) The app can hold an unlimited amount of targets. After a target is added, this screen provides a list of targets added on the mobile app. The page
symbolizes an app and the cylinder represents a service/database. The symbols tell the user how many apps are running off of each target and the
number of services bound to each target. To view each target’s stats, the user taps on the target name. I didn’t include the stats on the this screen because
I wanted to maintain a sleek, uncluttered experience. By listing only the target names and the number of apps and services, the user can easily find the
target they are looking for and tap it to make changes. On the bottom of the screen, there is an option to add additional targets which would
bring you to screen 2. There is also a delete target button which allows the user to delete a target, which is demonstrated on screen 25.
2
Happy Clouds | a mobile app for Cloud Foundry TM
|| Kristen Mozian

3. 5 6 7 8
5) The user can easily add a target by clicking the same plus sign and cloud button as on screen 1 in the bottom right hand corner of the screen. Using the
same symbols saves space and is quickly recognized for repeat action.
6 & 7) The user enters their username, password, and URI to gain access to the target. If the user does not choose to have the app remember the
credentials, the user will be prompted to enter their information again to manage the target.
8) The target is automatically added to the main list of all the targets added on the app.
3
Happy Clouds | a mobile app for Cloud Foundry TM
|| Kristen Mozian

4. 9 10 11 12
9) To see the stats of the apps and services within the target and to change parameters, the user taps on the target name.
10 & 11) These screens demonstrate what happens when a user chooses not save their credentials; they must log-in again. Notice, the text reminds the
user which target they are logging into. If the user tapped the wrong target, they can easily go back to the main screen by tapping the back arrow.
12) After logging into a target, the user sees the apps and services under each target. I wanted the user to see all of the information directly on this screen
without having to tap on each individual app or service to get their respective stats. By having the information available on one screen the user is able to
check stats quickly and make edits with one tap.
4
Happy Clouds | a mobile app for Cloud Foundry TM
|| Kristen Mozian

5. v1 v2 v3
I went through three iterations to get to the final stat screen I chose. Again, I wanted to make sure all of the stats and information was available to the
user on one screen. In v1, the original idea was to stack the memory and instances information with corresponding edit buttons on the same line. Then I
came up with the idea (v2) of separating the memory and instances information in columns to make it easier to click the edit button, reducing the margin
of error on clicking the wrong edit button. V2 took up more space demanding the need for a scroll bar to see all the apps and services on one target;
however, in the long run I determined this was a better solution than users clicking on the wrong edit button. In v3, I decided the edit button was
redundant and too clunky. I changed the stats information from simple text content, to button labels. As long as the memory, instances, and unbind
labels are clearly designed to look like buttons, the user will be prompted to click on the buttons to change the respective parameters. To note, depending
on the number of apps or services running on a target, a scroll bar will be necessary to access all the information.
If there were industry standards on symbols used for memory or instances, I would swap out the words for the symbols as I believe symbols can cross
language barriers and provoke a powerful memory response. One example for symbols might be an elephant for memory and a cheetah for instances.
5
Happy Clouds | a mobile app for Cloud Foundry TM
|| Kristen Mozian

6. 13 14 15 16
13) To change the memory capacity in an app, the user taps the memory button.
14 & 15) I used a slider interface here for the user to alter the memory capacity because it is the same interface used on web-based management
interfaces. The slider would have to be tested to ensure the user can get precise changes using this interface on a mobile app. If the interface proves to be
too tricky to get the accurate change, a number dial or addition/subtraction buttons could be alternatives. Notice the notification text, it reminds the user
which app they are changing the memory in. This reminder ensures that the user is modifying the correct app, reducing errors. If the user is modifying
the wrong app, they can tap cancel. Once the modifications are made, the user taps save. While the user is using this interface, the background changes
into a lighter color, indicating that the user can not access the background screen.
16) The modifications are instantly saved on the interface.
6
Happy Clouds | a mobile app for Cloud Foundry TM
|| Kristen Mozian

7. 17 18 19 20
17) To change the number of instances an app can handle, the user taps the instances button.
18 & 19) Similar to screens 14 & 15, the user is reminded which app they are about to alter and the background screen becomes inaccessible. The user
uses a slider interface to change the number of instances. Again , I chose this interface because users will be most familiar with web-based management
interfaces that use this sliding interface allowing for easy adaptation to the mobile app. However, this interface will need to be tested to ensure it is an
appropriate interface for the mobile app. The user taps save to make the modifications.
20) The modifications are automatically updated on the apps stats screen,
7
Happy Clouds | a mobile app for Cloud Foundry TM
|| Kristen Mozian

8. 21 22 23 24
21) A user can unbind a service to a target but they are unable to bind a service to a target on the app because of the level of execution needed to do that
is an inappropriate mobile app function.
22) When the user taps on the unbind button under a service, a notification screen will ask the user to confirm the action to unbind the service. The text
written is to ensure the user is unbinding the correct service to the right target. Moreover, the text reinforces to the user that a service can only be
rebound to the target through their preferred interface because the action of rebinding is inappropriate to complete on a mobile app. The button “Yes,
unbind” reinforces the action the user is about to complete, providing an additional benefit of the doubt in case the user does not mean to unbind the
service. If the user is in error, there is a cancel button.
23) After the user confirms the unbinding action, the user will be redirected to the target’s stats screen and the service will be removed from the
information.
24) To get back to the list of targets, at any time, the user taps on the back arrow.
8
Happy Clouds | a mobile app for Cloud Foundry TM
|| Kristen Mozian

9. 25 25 26 27
25) To delete a target from the mobile app, the user taps the cloud button with delete written in it in the bottom left hand corner. Originally, the text read
“edit;” however, after additional thought the word “edit” is misleading as the only action a user can make is deleting the target. Therefore, the text was
changed to “delete.”
25) The background screen will become inaccessible as denoted by a slight color change. The app and service symbols will be replaced with trash cans, a
universal symbol for deletion.
26) The user will be promoted to confirm their action. The text is specifically written to make sure the user is deleting the right target and to reinforce that
the user is only deleting the target from the mobile app not from the main preferred interface.
27) After the user confirms the target’s deletion, it will be removed from the main list of targets.
9
Happy Clouds | a mobile app for Cloud Foundry TM
|| Kristen Mozian