Application Design 1 // Task 3

 30.05.2023 - 16.06.2023// Week 9 - week 11

Lim Yi Xvan 0354552

Bachelor of Design in Creative Media 

---

Instruction

---

Task 3: Low Fidelity Prototype

We'll be making a low-fidelity prototype of our mobile application in this task. Wireframes and a visual design concept that complements the branding of our application should be included in this prototype.

Before creating higher-fidelity prototypes, we want to test and validate the user flow and user experience of our application. We may rapidly iterate on our design and make necessary changes in response to user feedback by producing a low-fidelity prototype.

In Task 2, the architecture information and the user flow were decided upon in accordance with the design choices made based on the study results and conclusions, and the layout design and information arrangement were thoroughly thought out and constructed.

Wireframes

1. Welcome pages

fig 1 - welcome pages 

Before getting into the log in and sign up page, I wanted to create a welcome page which makes the user felt like they have opened an app and being felt like they're welcomed home, kinda feelings. 

2. Log in & Sign Up pages

fig 2 - log in & sign up pages

Then, I worked with the log in and sign up pages which it's kinda common. However, normally the common part is the hardest one to do as I need to make sure that nothing important element was left during the design progress.

3. Forgot Password pages

fig 3 - forgot password pages

After the log in page, there'll surely be a "forgot password" section. User gets to click in if they forgotten their password to log in. Hence, I've also designed it. While designing this, I am also very alert on each details and am very afraid that I've missed out anything too.

4. Set Up Face ID & Password pages

fig 4 - set up face id and password 

As a personal life tracker, it might be a privacy and confidential for some users and they might want to input their personal data in the apps. Hence, I insisted to make the app to have strong security features which enables user to have a comfortable user experience with it.

5. Onboard and Get Started pages

fig 5 - onboard and get started pages

After that, to make accurate menstrual cycles date prediction, users will get to fill in their related personal information before entering the page itself. With the objective of creating page where asking for user's name, is to make them feel like the app is a friend to them, which they could use them comfortably without feeling insecure.

6. Home pages

fig 6 - home page and it subpages

Finally, entering the app, user will be first seeing the homepage. It's very important for the homepage design as users get to see important information at this page. Building the navigation bar below is also a challenge as choosing the right icon for its pages could be very essential in giving the page a meaning related with the name.

7. Calendar pages

fig 7 - calendar page and it subpages

On the calendar page, where users get to track and edit their period. Designing the calendar, is a very important task in here. Besides, I also need to allocate the information for the "add note" page for period, making sure that things and contents inside are related and useful.

8. Self Care pages

fig8 - self care page and it subpages

So basically for the self care page, will be presenting contents like health resources related to period and our body which encourage users to understand their body well and get to treat menstrual in a right way or learn how to deal with it.

9. Profile and Settings pages

fig 9 - profile page and settings

Profile page will be presenting analysis of menstrual cycles and insights of users. On the profile page, users could also get to set notifications or reminders for each events ongoing or upcoming.

Visual Design Concept

1. Colour palette

fig 10.1 - primary colour palette

fig 10.2 - secondary colour palette

For my primary colour palette, I've chosen the colour magenta that appears in the Logo itself most to make a representative app with its logo, the black and white is to match with the colour magenta and create a simplicity for the app, then the soft pink used is to balance back the whole colour scheme as they were a bit too contrast for user's eyesight.

The secondary colours were used in icons, navigation bar, buttons etc. Three colours picked won't be too contrast instead of being in darker shades.

2. Typography

fig 11.1 - Header and title typo

fig 11.2 - contents and text typo

To pair with the header's typo, Montserrat was used as it's known as elegant and simple serif fonts so ya. Aiming for a minimalist design, and Montserrat is the choice.

3. Navigation and Iconography

fig 12.1 - iconography

For navi bar's iconography, to make the users easy to view and navigate, simple outline icons are used. For the symptoms's icons, I tried to make it how the scenerio were described in icons, so that users are being attract.

Usability Testing

I finished the entire wireframe design and then created the user flow interactions for the buttons and pages in accordance. I designed the screen such that the user could also scroll it.

fig 13 - interactions added into wireframes

1. Scenarios given

Following the scenarios listed below, the app was to be tested by 5 distinct users. They were then each requested to provide their candid feedback after that. Every user's usability testing and feedback were recorded. The slides that follow contain the documentation of the feedback.

fig 14 - scenario 1

fig 15 - scenario 2

2. Areas of Improvement

After the usability testing, based on their feedback, here're some areas that need to be redesigned and considered to be refined in the next task, high-fidelity prototype.

• Separate the list of symptoms on the "add symptoms" page according to their category to avoid being too cluttered
• Add "continue as guest" on the log in page as not everyone would like to sign in or linked their account with it
• Design buttons into more clear and viewable form

Final Outcome of Task 3: Low Fidelity Prototype

APPLICATION DESIGN 1 by Lim Yi Xvan

---

Reflection

Building the low-fidelity wireframes for the Period Tracker App has been both difficult and enjoyable for me as a UX/UI designer. I got the chance to put myself in the users' shoes throughout the design process and take their requirements and preferences into account when interacting with the app. By focusing on the app's essential features and information architecture while creating wireframes, I was able to guarantee a logical and user-friendly flow. I wanted to give consumers a smooth experience, making it simple for them to browse the app, track cycles, and track symptoms by adhering to the user flow described previously.

I carefully considered where to place important elements on the home screen while designing the app, making sure that essential information and functions were prominently displayed to draw users' attention. Additionally, including a user-friendly feedback mechanism made it simple for users to offer evaluations and suggestions, encouraging involvement and opening up a channel for ongoing improvement. Additionally, I kept a user-centric perspective, keeping the user interface straightforward and simple to suit users with various tech proficiency levels. I continually kept the user persona in mind as I created the wireframes, which enabled me to make choices that were in line with her wants and needs.

Additionally, I made sure that the visual design of the app reflects Period Tracker App by GP App's identity while developing the low-fidelity wireframes. I'm excited to do usability testing with actual users in the future to confirm the usefulness of the wireframes and locate any potential pain areas. I am aware of the importance of continual improvement and intend to get user input to further improve the design.