Application Design I: Project 3
02.07.2025 - 30.07.2025 (Week 11 - Week 14)
Diane Sani Alexander Wan / 0378712
Bachelor of Design (Hons) in Creative Media
Application Design I: Project 3/ Lo-Fi App Design prototype
TABLE OF CONTENT
1. LECTURES
2. INSTRUCTIONS
3. PROJECT 3
4. FEEDBACK
5. REFLECTION
LECTURES
WEEK 11
Usability testing & UI kit
- By evaluating a product or service with a representative user.
- The main aim is to detect the issues and gather qualitative data, and assess how users understand the app.
During this week we started our Lo-Fi app design prototype. It doesn't necessarily have to be very detailed, just make it black and white and have the base of how the app would look like. Mr Sylvain gave us a lecture on the usability testing & UI kit.
Figure 1.1 Week 11 lecture.
WEEK 12
Usability Heuristics for User Interface Design
- The usability heuristics is a general principle or guidelines that designers and usability experts us to enhance the user-friendliness and overall usability of products like websites and applications.
I didn't attend this weeks class, but I was informed that we can further move onto the next step for the Lo-Fi app design prototype and focus more on where each button will lead to.
Figure 1.2 Week 12 lecture.
WEEK 13
User Interface Visual elements
- This lecture was based on the visuals of how the application should be user-friendly. It was all on color, texture, space, form and etc. By understanding the design principles it would make the process of our prototype easier to do.
Figure 1.3 Week 13 lecture.
INSTRUCTIONS
Project 3/ Lo-Fi App Design Prototype
Instructions:
- By completing the UX design process, we can proceed to create a low-fidelity prototype of the app. Which includes; screen wireframes, actions, visual feedback, and linking them together by using tools like Figma.
- We will conduct usability testing by inviting participants to interact with the low-fidelity prototype. While letting classmates test it, I will gather information, responses, feedback, and observe any pain points experienced by the users.
- The whole process needs to be documented with video and produce document containing detail analysis and solutions to make it better.
PROJECT 3
WEEK 11
Wireframe
We had an activity in class, where we had to practice sketching real quick. It doesn't have to be perfect because it is a sketch. It was a fun activity to help us know how to create the wireframe.
Figure 3.1 Sketch Warm up in PDF.
Mr Sylvain tasked us to do a sketch of how the process of the app would be like before proceeding into the Lo-Fi app design prototype. He helped me understand more on where the issue is as my goal is to make the app user-friendly for new skincare users.
Figure 3.2 Sketch of wireframe.
References
I searched a few beauty retail apps to help me decide how I want the app to look like and see how it compares to the Guardian app. The 2 that are almost similar are Sephora and Watsons, so I'm going based of that by redesigning it to be more towards new users who are new to skincare.
Figure 3.3 Reference 1, Sephora.
Figure 3.4 Reference 2, Watsons.
WEEK 12
Process of designing the Low-Fidelity prototype
We were tasked to start with the low fidelity prototype on Figma. so make it black and white first. With the reference I had it gave me an idea on where to start. But my goal is to get to know the users preference on skincare.
It starts of with asking the user if they are a new or existing user.
Figure 3.5 The login process.
Then it would ask about the users preferences on skincare, so it can alter products towards their skin issue. This would require a lot more work if I go in depth.
Figure 3.6 Questionnaire to get o know the user.
I got user feedback about this certain page where it should show suggested products incase the user wants to see all the other suggested products.
Figure 3.7 About the products.
In this process is the checkout and how it would work if they ordered from here.
Figure 3.8 Checkout process and profile page.
The icons I used are from here:
Figma file is HERE
I tried to keep them all consistent by making all them the same. So it looks neat as well.
FEEDBACK
Week 11:
I tend to forget what the whole point of me redesigning the app is and I need to focus more on how do new users find their way through the app, like how do they know what is best for their skin. Create some questionnaire's before getting into the main page and add like a suggested product for specific user.
Week 12:
We had other students test the Lo-Fi prototype, but I wasn't done with it yet, so they just suggested me some of the things they would like to see. Like add suggested products in the page where the product is in its own page.
Week 13:
I needed to find more questions, and then the product page needs more description about the product and possible if there is like an explore page for the user to know how to use the product.
REFLECTION
Experience: Throughout this experience I had a long time processing it all, and since I was still fairly new to Figma I had to go learn the basics and could only do the basics for now. I feel like everything seems a bit rush and goes slow, but its still workable.
Observation: I realized that the app needs to be based on one of the persona created and I tend to focus more on the UI instead of the UX, so I had to go back to fix some stuff, but it did help me a lot and hopefully this thinking process would help me for future assignments.
Findings: Creating the persona and the flow chart helps with creating the design on Figma, its like a head start. But I needed to start earlier in order to the things I wanted to. But for now its all the basics of Figma that I know of.
Comments
Post a Comment