UX Design / Task 2, 3, and 4: MemoCare Prototype
Derin / 0354969 / Design in Creative Media
Task 3 : Design Document (20%)
Task 4 : Prototype (40%)
INSTRUCTIONS
TASK 2
- Adifa Putri Harisyam / 0358362
- Derin / 0354969
- Rachel Madeline Purwanto / 0356994
Empathy Map
In our class, we were tasked to create an empathy map for our project
idea. We settled with the name 'MemoCare' and created 3 questions for
each categories. When we presented our empathy map, Mr. Hijaz suggested
some changes on it.
|
|
Fig 1.0 Empathy Map |
User Journey Map
Exercise 1 - User Persona Research
We made questionnaires based on the original doc sent by Mr. Hijaz and received 9 respondents in total, but instead we used 8 for our research.
Exercise 2 - UX Requirements
Exercise 3 - User Journey Diagram
Analysis of Data
During our presentation, Mr. Hijaz advised us to:
- Change the way analysis is made in question 14 by categorizing the responses into groups
- UX Requirement : 2/3 goals make it in point form
- UX Journey Diagram: Journey 2 has too many steps set a reminder, come up with a solution to ease the process (eg: scan prescription using AI but still keep the manual inputting info method)
- UX Journey diagram: Collaboration with a pharmacy and can get discount vouchers when they reach a certain amount of exp or milestone in the rewards
TASK 3
We started out with the user flow, me and my group members tried to create a user flow with the feedback Mr. Hijaz gave in mind, specifically the easier navigation to set up a reminder.
|
Fig 1.0 User Flow |
.png)
After Mr. Hijaz gave his approval, we worked on the low fidelity. I set the UI Design Regulations for the font sizes according to online articles. I did this so that we can avoid inconsistencies when creating the prototype.
.png) |
| Fig 1.1 UI Design Regulations for Typography |
The Task 3 documentation is a compilation of exercises 1, 2 and 3 along with our prototype's low fidelity screen caps and links.
Low Fidelity: https://www.figma.com/design/E4RwfV4brc7pINyHdPR6Iq/UX-Design?node-id=0-1&t=5pymzallZENztVOW-1
The Task 4 documentation is a compilation of exercises 1, 2 and 3 along with our prototype's high fidelity screen caps and links to our final prototype. Initially, we struggled a lot in finding the color palette, a lot of experimentation were done.
.png) |
| Fig 2.0 Color palette |
.png) |
| Fig 2.1 Color testing |
The 5th version still felt off, so we decided to remove the details inside the checklist panels. After figuring out the color palette, our progress went well.
I mainly worked on the components and the Add/Edit pill page, Reminders page, Rewards page, Wardrobe page, and Ringtone page.
.png) |
| Fig 2.2 Components 1 |
.png) |
| Fig 2.3 Components 2 and Pages |
At this point, the prototype was nearly done, but the panel's design of where you input information feels off when compared to the overall design of the app. I decided to make adjustments on that matter and the overall look feels much better.
.png) |
| Fig 2.4 Changes in information panel |
We had came forward to Mr. Hijaz for feedback on our prototype after it was finalized. He stated that he didn't have feedback to give as he was impressed and liked the vibrant and playful tone of our app.
|
Fig 2.5 App High Fidelity Overview |
Our app prototype had gone under a usability testing from the previous respondents that are made into user personas. The data is then analyzed and compiled together in task 4, along with the key findings, limitations, suggestions & feedback, conclusion, and appendices.
Fig 3.0 Nested border radius formula |
I've made the changes accordingly according to the feedback.
.png) |
| Fig 3.1 Rounded corner fixed |