Application Design I / Project 3
08.07.24 - 05.08.24 / Week 11 - Week 15
Name: ALYSSA AISYAH BINTI 'ARIEF NASRAN (0364017)
Name: ALYSSA AISYAH BINTI 'ARIEF NASRAN (0364017)
BDCM
Application Design I (DST60504)
INSTRUCTIONS
PROJECT 3
Week 11
PROJECT 3
Lo-Fi App Design Prototype
For Project 3 of Application Design I, once the UX design process is
complete, we are required to create a low-fidelity prototype of the app and
organize all the screen wireframes, actions, and visual feedback, then link
them using Adobe XD, Figma, Invision Studio, or any other prototyping
software. Following this, we are then required to conduct usability testing
by finding participants to test our low-fidelity prototype and gather
feedback, responses, and observed pain points. This process is to be
documented with video and a detailed analysis report that includes solutions
to the issues identified by the testers in order to improve the design and
development for the final high-fidelity prototype
Process
First, I started by referring to my information architecture map, user journey
map, and MVP as a guide to direct myself on the features and categories I need
to implement in development as well as how the user screens should flow
correspondingly to each other.
Fig 1.0 Information Architecture Map
Fig 1.1 User Journey Map
Fig 1.2 MVP (Minimum Viable
Features)
I also took into account the results of my research and remembered that many participants emphasized needing a simple but modern and visually pleasing, intuitive UI. Thus, I decided to go for a more minimalistic, clean, and sleek look with no extra or unnecessary visual elements. This is reflected in my icon choices, and typography as well (Roboto).
Fig 1.3 Survey Research Results on UI
Once the information was refreshed in my mind and I had a better sense
of direction on where to start designing, I then proceeded to creating
the screens in Figma. For the lo-fi prototype, the design is fully
greyscale as colours have not yet been chosen, full functionality was
not yet completed, however, most typography, components, and buttons,
and icons had been finalised at this stage. I first started on
creating the main 4 screens which can be accessed from the bottom menu icons which included "HOME",
"HISTORY" "MEDICATION" and "PROFILE" as these main screens will be the
parent screens to all the other screens are created later on. In every wireframe which included the menu, I made it so it is functional when clicking on it, leading you to the respective pages.
Fig 1.4 Main Menu Pages
Aside this, I also created the first screens of the app that the user
will be met with before jumping into theses main 4 screens to give a
more realistic outcome and experience. This included the company logo
screen with a login/sign up feature along with access to other
platforms to do so as it is standard nowadays for app design to
include this especially with more personalised apps which Popit is as
it requires the saving of personal and intimate information in
app-functionality.
Fig 1.5 Onboarding/Starting Login Screens
For the functionality, clicking on the bottom right arrow should move
the screen to the next page where the user can then click Login/Sign Up
and move to the final 3rd page of this process where the user may
theoretically enter their details and login or sign up through other
platforms. However for the purposes of the assignment and ease of use,
clicking "Login" will bring you into the app itself where you will be
redirected to the "HOME" page and can then navigate through the bottom
menu to go through each key feature of the app that will allow the users
to access other features and screens.
Fig 1.6 Home Page (App Starting Point Screen)
Aside from the navigation menu, the homepage displays upcoming medication reminders and the name of the user (as the app allows you to create multiple profiles). The bottom right of the screen also has a ⨁ button where users can add a new medication reminder which can be especially convenient for users who would like a quicker and efficient experience using the app rather than navigating to the medication page as a key finding of the research from interviews and the survey was users mentioning the need for a quick and simple experience when using the app and especially in those who lead busy lives, or are on the go, or their health condition disables them from spending too much time doing other things. However, as mentioned, the ⨁ button can still be found in the medication page.
Fig 1.7 Add Medication Button for "HOME"
Initially, I thought of adding a button with same width of a medication reminder that said "Add medication"- however, I scrapped that idea as it would've taken too much space on screen and since the home is the dashboard where users view the list of upcoming reminders they have, I decided to make it a smaller button instead but still intuitively understood through the use of a "+" symbol.
Then, I created the history page which consists of the calendar and information of how many missed days and how committed the user is to taking their medication with a percentage from 0-100% out of all the total days in the month. to illustrate my prototype later on, I have added two missed days and highlighted the days "5" and "21". When clicking on the highlighted days, it will bring the user to another page that details what medicine they missed on that date and the time they were late by along with a usable ⓧ button to exit and go back to the history page.
Fig 1.9 "HISTORY" Page
Fig 2.0 Missed Medication Details
Next is the medication page, which lists the current medications the user is taking and the option to add more with the same ⨁ button on the bottom right. A medication log includes the time it is due by and will remind the user on that time, an icon of the medication format (pill, injection, liquid, etc), the dosage (1 pill/2 pill), the medication name, and a "➔" icon which will take the user to a page where they can view the medication details which can be seen in Fig 4.1
Fig 2.1 "MEDICATION" Page
Upon clicking on the ⨁ button (in the "MEDICATION" page or "HOME" page) the user will then be brought to a series of pages which directs them in inputting their info and creating a new medication reminder. Clicking on the 🡐 will bring the user to the page before, while "Next" brings them to the next page, also, all the pictures below show the prototype scenario I have created for adding medication thus why they follow a specific set answer.
The user will be asked about medication name, what they are taking it for, (which can be inputted by clicking on the text field bar)
Fig 2.2 Adding Medication Process 1 (Medication Name + Purpose of Intake)
the format it is in, its strength, (which can be inputted by clicking on the text field bar and choosing from the list)
Fig 2.3 Adding Medication Process 2 (Medication Format + Strength)
how often they take it, (which can be inputted by choosing from the list)
Fig 2.4 Adding Medication Process 3 (Frequency of Intake)
and then will be able to choose the time and reminder settings(choose time by scrolling, choose the time 9:35AM). To create the scrollable time picker, I inputted the values 1-12 in the first column, then 00-59 to the second, and AM-PM on the third in a vertical format, created frames for them and adjusted the size to how much I wanted to display, then clipped the content inside. Then, to create the gradient affect, I used the linear colour option with 3 different colours, and a darken effect. To make the functionality itself, I used the
Fig 2.5 Adding Medication Process 4 (Time & Reminder Settings)
Fig 2.6 Adding Medication Process 5 - Creation of Time Picker Scroll 1 (Adding Numbers)
Fig 2.7 Adding Medication Process 6 - Creation of Time Picker Scroll 2 (Designing)
Fig 2.8 Adding Medication Process 7 - Creation of Time Picker Scroll 3 (Adding Functionality)
To create the toggle switch, I have used a free component and then coloured and sized it accordingly to my project and set the state to inactive on default. It works by switching between two instances it is linked to. When toggling haptics, the user may either toggle it on or off in the prototype.
Fig 2.9 Adding Medication Process 8 - Adding Haptics Toggle
Fig 3.0 Adding Medication Process 9 - Sound Selection
And lastly, they can add a note to the medication in case they have specific instructions for taking their medication or similar. Clicking on the text field enters the text, then clicking on "save" then brings the user to the "HOME" where their new medication reminder is listed, and going to "MEDICATIONS" will show it as well.
Fig 3.1 Adding Medication Process 10 - Add Note
After successfully completing the process, the medication will then show up as a log in the "HOME" and "MEDICATIONS" page on the list.
Fig 3.2 New Medication Reminder Log
Clicking on the ➔ button on the newly created medication reminder (Rinvoq) brings the user to a screen where the user can see the time they are late by if so, on the 🗑️ icon to delete Rinvoq from medication list which will bring them back to the "HOME" page without Rinvoq as a log/"Edit" to edit medication details, the ⓧ button to exit back to the "HOME" page or on "Take" which will bring them to the "HOME" page, indicating that they have taken it successfully and what time they took it at.
Fig 3.3 Medication Edit/Take/Delete Screen
Fig 3.4 Medication Marked as Taken
Lastly, I created the profile page which concludes the 4 main pages of the app. On the top labels the relationship the profile has to the main user (so if it is the host profile, "my profile" will display, a brothers profile added as a dependent profile to the host, "Brother" (based on what you enter as the relation in profile creation)), the profile picture, name, age, gender, a "manage profiles" button which leads to a page where you can view existing created profiles and switch between them, or create a new one. Clicking on "➔" will bring the user to the edit profile page where they may edit their current profile details (name, age, gender, profile picture, theme) and they may exit through the ⓧ button or "Save" to return to the profile page
Fig 3.5 "PROFILE" Page + Edit Profile Page
Fig 3.6 View Profiles
For the "View Profiles" page, a profile log will detail the users name, profile picture, the colour code for them, and the relationship of the user to the main user/host, and the user can either exit through the ⓧ button and return to the profile page, or create a new profile. To do this, the user will need to click on the ⨁ button on the bottom right of the page which brings them to the profile creation page where they may input details of the new profile's name, age, gender, relationship to the main user, and theme.
Fig 3.7 Profile Creation
I then created the prototype screens for inputting the information and made the dependent profile example "Lissa Fin" (mother of Grace Wilson). if the user wishes to exit at any point in the profile creation process, they may do so through the ⓧ button. Clicking on each ___ field fills out the information for that category, and to choose a theme, the user must click the ▼ button, then choose the 4th option. This will give the colour code for the newly created profile as popularly requested from the survey in order to easily differentiate dependent users from the "View Profiles" page when there are multiple. Then, clicking on ጸ inserts the profile picture, and the at the end, they can click "Save" which will bring them back to the "View Profiles" with the newly created profile.
Fig 3.8 Profile Creation Wireframes
Fig 3.9 Updated View Profiles
Clicking on one of the profiles will then bring you to the respective profile of that user, so if it is "Grace Wilson" it will navigate back to the main user's profile page, and if it is "Lissa Fin" it will bring you to Lissa Fin's profile page where she can then use the app with her own medication reminders, history, etc.
Fig 4.0 Newly Create Profile
Clicking on "Manage Profiles" in the newly created profile will bring the user back to the "View Profiles" page where they can then switch back to the main user if they'd like to.
Lo-Fi Wireframes
Fig 4.2 Figma Wireframes
User Testing
For user testing, I recruited three participants (Aiman (one of my individual interview participants), Julie, and Gavin) to test my Lo-Fi prototype based on the 3 user scenarios I created.
Fig 4.3 Lo-fi User Testing
Overall, it went well, with participants finding the app easy to use, user-friendly, and had a positive experience with it, and some feedback was given on how to improve the app for the High-Fi prototype. Based on the feedback given, here is what will need to be worked on:
- Colour the app to complete it visually as right now it looks dull and a bit boring
- Add animations to switching screens/pages to make the experience more interactive and less boring
- Add more months to switch from for the history page to demonstrate usability of the < and > buttons as right now they are not functional and there is only one month
Lo-Fi Walkthrough
Fig 4.4 Lo-fi Walkthrough
Lo-Fi Prototype
Fig 4.5 Lo-fi Prototype
REFLECTION
For project 3 of Application Design I, it involved creating the UI itself for the app. Throughout the process, I learned many new techniques in Figma for creating interactive prototypes so I'm grateful for that. It was quite challenging as there was lots of work to be done, I ended up with more screens than anticipated and had to come up with creative solutions for some design mechanics, but it was rewarding to see the prototype become responsive and usable. Testing the prototype's usability with three volunteers and getting good feedback was validating as well, although there were still some comments for improvement. I will use these valuable comments to improve the design of the next high-fidelity prototype and hope to create a fully working experience for the user.
Comments
Post a Comment