UX Design final Compilation

Jennifer Huang / 0352990
Bachelor of Design in Creative Media
Entertainment Design - Sem 5
UX Design - Task 3 

---

Task 3 
App name : MINDSCRIBE

LOW FIDELITY 

a) Onboarding Page 

Moving on to the prototype making, first things first we make the low-fidelity for our "MindScribe" mental health app. We divide it into 4 different sub pages : Homepage, Journaling, Mindfulness and Community. 
This is our low-fidelity that we've made for the onboarding page, which include welcome page, sign in/log in and some personalization that we want user to fill up before they enter the app. 

Fig. 1

This is the onboarding page that I did, for the overall design i wanted it to look simple, professional, clean and clear. On the onboarding pages i made, User first will be asked if they want to continue as guest or login, If they already have an account then they can directly input their email and pw and they'll continue to the home screen. But for people who hasn't have their account, they can sign in first. Users can also sign in / log in to MINDSCRIBE by facebook, gmail or X (former twitter).

Fig, 2

The onboarding page done by Justin, mainly he did the personalization of the onboarding page where users can input some information about themselves (what do you expect to achieve by using this app, etc) 

b) Homepage Page 

After users click continue as guest/sign in/log in, they will be directed immediately to the homepage of MINDSCRIBE.  

Fig. 3

here's the homepage that we did, the idea here is basically we want it to be a shortcut of everything (all the content we have from the other pages), like a shortcut of to-do list, Article, previous Journals, etc. This way it'll help user more to figure out which activity they want to start with. Also instead of having a page just for profile and settings we have on the Top Right the user icon, when users click the pen they will be directed to profile customization. 

c) Journaling Page

Our second page is the Journaling Page, where users can write their journals and can track their overall mood. We also insert calendar so that users can know what day, month is it. 

Fig. 4

I actually did 3 different layout for this just to experiment which layout is best used for the calendar and journaling page. In this page user can experience 2 types of journaling, one is called journal prompt where we provide some short questions for user, this way it'll be easier for them to start journaling, because some people tend to get overwhelm and don't know where to start their journaling. The other Journaling is normal journaling where user can write whatever they want in a blank page. 

Fig. 5

So this is how it looks like when you open the journal prompt and overview of user's journaling. 

d) Mindfulness Page

Next, the third page is Mindfulness,  here user can see their streak when everytime they login to MINDSCRIBE. Aside from that we also have activities for user to chill out and detox from all the hectic activities in their daily lives. Last but not least we have To-Do list's for user to organize their study/routine. User can edit and add reminders to when they want it to be completed. After that day passed or if user has completed the tasks, it will automatically move to another page where we have a feature that collects what tasks user's have completed within that month/week.

Fig. 6

e) Community Page

On the Fourth sub page, we have community page. Inside this page, user can see articles, join community, connect with others and upload posts like what you can do on X / facebook / instagram.  

Fig. 7

f) Profile Page

Remember how we don't have any main page on the home button for profile? Now here's what you'll see when you click the profile shortcut on MINDSCRIBE's home screen. 

Fig . 8

This is the Profile page that Justin made, like what other app did in their profile page, user can change their profile picture, nickname, update email/password, change phone number, logout, etc. 

---

HIGH FIDELITY 

During High Fidelity, we picked some colors and reference into a mood board to visualize better on our art direction. the first 5 colors we picked are Lilac, yellow, orange, cyan, dark purple. 

Fig. 9

Final High Fidelity :

Canva Link

HIgh Fidelity: 

UX DESIGN ARGH - Flow testing

Low Fidelity: 

UX DESIGN ARGH – Figma 

---

FEEDBACK 

Week 12 

After we did the low fidelity pages, we asked sir for feedback, the feedbacks are that the overall design is nice, nice spacing and alignment. Though still some of the designs like onboarding page and profile page needs to be adjust further because it looks like a different design from the 3 other pages. Therefore makes the overall app design seems inconsistent.  Oh and also, we used the wrong template for the app low fidelity, we used iphone 13&14, we should've use iphone 13 mini. Sir also mentioned something about subscription, how business owner can earn profit from this app, and he suggested doing free trial system, so we don't have to change much of the features, but just add a subscription page for them to purchase. After the 7 days trial ended, user might not be able to access the app again unless they subscribe. 

Task to do after feedback : Will refine more for the Overall design to make it consistent, need to change all of the designs into the iphone 13 mini layout. Find color palette for the app (calming, soothing, and trustworthy). Will consider the 7 days free trial system. 

---

REFLECTION

After doing UX Design I Learnt a lot about mental health and how to best make an app that is both aesthetically pleasing for the eye and has its benefit that can potentially help lots and lots of people. 
we also learn how to make an empathy map, how to properly handle the informations that client want and turn it into a product that we offer. Along the way i actually enjoyed a lot making the app, i love how in the end we were able to deliver exactly if not more than what we've expected. It turned out to be better than expected.