Happy clouds mobile app


Published on

Wireframes and thoughts behind a Cloud Foundry mobile app

Published in: Technology, Education
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Happy clouds mobile app

  1. 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 1Happy Clouds | a mobile app for Cloud Foundry TM || Kristen Mozian
  2. 2. 1 2 3 41) 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 additionalsteps. 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 apreliminary 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 thelog-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 pagesymbolizes an app and the cylinder represents a service/database. The symbols tell the user how many apps are running off of each target and thenumber 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 becauseI 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 thetarget 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 wouldbring 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. 2Happy Clouds | a mobile app for Cloud Foundry TM || Kristen Mozian
  3. 3. 5 6 7 85) 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 thesame 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 thecredentials, 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. 3Happy Clouds | a mobile app for Cloud Foundry TM || Kristen Mozian
  4. 4. 9 10 11 129) 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 theuser 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 screenwithout 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 tocheck stats quickly and make edits with one tap. 4Happy Clouds | a mobile app for Cloud Foundry TM || Kristen Mozian
  5. 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. 5Happy Clouds | a mobile app for Cloud Foundry TM || Kristen Mozian
  6. 6. 13 14 15 1613) 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 managementinterfaces. 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 betoo tricky to get the accurate change, a number dial or addition/subtraction buttons could be alternatives. Notice the notification text, it reminds the userwhich app they are changing the memory in. This reminder ensures that the user is modifying the correct app, reducing errors. If the user is modifyingthe wrong app, they can tap cancel. Once the modifications are made, the user taps save. While the user is using this interface, the background changesinto a lighter color, indicating that the user can not access the background screen.16) The modifications are instantly saved on the interface. 6Happy Clouds | a mobile app for Cloud Foundry TM || Kristen Mozian
  7. 7. 17 18 19 2017) 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 useruses a slider interface to change the number of instances. Again , I chose this interface because users will be most familiar with web-based managementinterfaces 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 anappropriate interface for the mobile app. The user taps save to make the modifications.20) The modifications are automatically updated on the apps stats screen, 7Happy Clouds | a mobile app for Cloud Foundry TM || Kristen Mozian
  8. 8. 21 22 23 2421) 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 thatis 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 textwritten 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 berebound 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 theservice. 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 theinformation.24) To get back to the list of targets, at any time, the user taps on the back arrow. 8Happy Clouds | a mobile app for Cloud Foundry TM || Kristen Mozian
  9. 9. 25 25 26 2725) 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 waschanged 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, auniversal 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 thatthe 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. 9Happy Clouds | a mobile app for Cloud Foundry TM || Kristen Mozian