Happy clouds mobile app

Happy Clouds | a mobile app for Cloud FoundryTM || Kristen Mozian

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


2

1 4 3 2

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.

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


3

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.

5 8 7 6


4

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.

9 12 11 10


5

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.

v3 v2 v1


6

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.

13 16 15 14


7

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,

17 20 19 18


8

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.

21 24 23 22


9

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.

25 27 26 25

Technology

Happy clouds mobile app