WEEK 13 Design
1. Pre-application instructions
-
If deploying the application through UQ server, you will need to first enter your UQ login details in order to get access to the rest of the application’s pages.
OR
-
If deploying from an external server, the you can skip having to enter your UQ login as there should be no other pre-application screens.
2. Login - Once step 1 has been completed, you will be shown a login screen that asks them to input their name. Without successfully submitting this screen, you will not be able to access any of the other pages in the app as there is no valid session recognised by the system. Once you enters your name, and submits the form, you will be redirected to a tutorial page.
3. Tutorial - In the Moment has a onboarding tutorial designed to quickly introduce you to the process you will follow when you do start using the application’s recommendation system. The tutorial page affords you with two options:
- Read through tutorial - the tutorial is presented in a card format that you can click through. Once you have read through the tutorial, and clicked ‘finish’, you will be directed to the persona selection page.
- Skip - you are given the option to skip the tutorial if they believe that you should be able to use the app without it. On clicking the button to skip, you will be directed to the persona selection page.
4. Persona Selection - The persona selection page essentially offers you a selection of personas presented in a carousel card format. You will be required to choose one before they can be directed to the next step of the setup process. Once a persona has been selected, the you will be forwarded to the interest selection page.
5. Interest Selection - The interest selection page the last step of the setup process and is where you are presented with a number of ‘interest’ boxes which are generated dynamically depending on the your selected persona from the previous page. You are allowed to choose between minimum one to all the displayed options. Once the interest boxes have been selected, you will need to submit their selection through a submit button. Once submitted, you will be taken to the index page.
6. Home (‘index’ page) - The home page of the application, the main element here is the graph display that shows a vertical bar graph that displays the total free time you has spent in a day (represented by the blue columns) compared to the average free time that others have spent (represented in the orange columns). The home page is essentially the starting point of the application, post-setup. This is where you will first see the global footer bar, which contains 3 main elements - home, start and explore. The home button redirects to the home page, the explore button redirects to the explore page and the start button is what you need to press in order to start the recommendation process.
7. Recommendation Process
-
Start - to start the recommendation process, you will need to first tap on the blue start button located in the middle of the footer bar.
-
Input time - after you had selected ‘start’, you will be directed to a page that asks you to input a number between 10-300 minutes into a textfield. After inputting a number and entering the form, you will be taken to a second page which asks them to select activity categories that interests you.
-
Select activity categories - the category selection page shows you various activity categories that you can select, depending on what you feel like doing. The category selection allows you to select more than one category. Once you have selected their category(s), you will have to submit your selection in order to progress to the next step, which is where activity recommendations are presented to you.
-
Browse through provided options - based on the persona selected, the current time of the day, the current amount of free time the you has and the activity categories selected, the system will compile a pool of recommendations to present to you in a card format. You will be able to swipe through these cards and select an activity that interests you. Upon selection of a particular activity, you will be taken to a more detailed activity card dedicated to just that activity. If there is currently no activity that can fulfil the criteria, a message will be shown to you explaining that currently no suitable activity can be found for you.
-
Viewing selected option - in the activity card, you will see an image representative of the activity, or a map if the activity is location based, at the top section of the card. If the activity requires instructions, the card will also contain quick links to tutorials to give users a ‘quick start’ directive. Having finished the activity, you can click back to the home page.
-
Time tracker - if you go back to the index page, the system will register that you have spent the time they input completing the activity. This is then communicated to the user through a dialog popup. The graph on the homepage will adjust the appropriate column to reflect the increased free time you have spent.
8. Explore - You can go to the explore page to view recommendations that you might like but are not recommended using the full recommendation process (e.g. not considering the current time or the user’s current amount of free time). The page also displays activities that that have been trending and pursued by other people recently.
9. Account (Logout) - If you wish to log out of the application, you can tap the global account icon on the top right corner of the page and it will take you to the account page. This page has a logout button at the bottom for you to click in order to log out of the app. (Note: Once you had signed out, the app will not store your previous username, interest etc. Therefore if you go back to the app, you have to go through the whole process of setting up a persona, interest etc.)
The colour scheme derived from the logo design colour scheme which is blue and orange. However, as mentioned before, the 2 colours from the logo design are saturated which might not be suitable for an informative poster. I decided to change the colour a bit but still fits in the logo colour scheme. The first poster design had a lot of information about the application.
It started out with the introduction for the application, what is “In the moment" and what and roughly how does it work. Furthermore, it also discussed what kind of technology “In the moment” using. Then, the poster also discussed the current problem space by looking at different existing technology such as Facebook Local or Eventbrite. We also looked at different problems in using collective actions as tools to display data. The next section talked about the target audiences with personal traits such as they need to constantly deal with deadlines, busy schedule and a limited amount of free time. Following up with the aims of this application and what Bubble Tea...Mmm is trying to achieve through this recommendation.
Onto the next column of the poster, we were able to talk about how the system by going through every single screen of the system. However, at the moment, not every screen design is done so we could not all the screenshots of the system in the poster. The next section talks about the design process on how we went through each stage of the design and which stages we are going over and over.
After revising our design a few times, we have made some changes for our poster. We have included the logo design from the previous week. Later on, we also made some changes to the content of the poster and rearranged all the elements. We also changed the design process by adding the flat icon for each stage of the process. A section called “Prototype" is also included in the poster to see how we develop from low fidelity to high fidelity prototype. The “How does it work” section also got cut and only focused on the very important screen.
Brochure design is just a very simple page to go over the workflow of the app by showing every single screen of the system. The colour scheme is still the same colour scheme as the poster design and follows the same hierarchy structure for each heading.
