In this case study project called Cosmeticopedia, I built an e-commerce mobile app that allows users to digitally wear various cosmetic products before purchasing them. To read the entire project brief, click here.
I've documented my entire design process as I create the entire mobile. Below is the process in its entirety.
Brainstorming
I thought of possible issues that users may encounter while accessing this app, so I came up with possible solutions to those issues in a presentation. To view the initial presentation, please click here. I apologize, but downloading the file is required in order to view the presentation.
After receiving feedback from other designers and potential users, I was met with more issues and had to make a second presentation addressing those issues. Please click here for the second presentation. Once I've completed the research, I created three user personas, which are potential users that would heavily use this app. Please click here to view the user personas.
/background(fff)/1920x1863.jpeg?auto=webp)
Early Stage of Designing
After completing the user personas, I started creating a sitemap for Cosmeticopedia. First, I used an AI sitemap generator called Octopus.io to create a rough draft of the sitemap before building it on my own using Lucid. Please view the final sitemap here.
Low-Fidelity Wireframe
I’ll be designing the low-fidelity wireframe momentarily. I’ll use Figma to create the low-fidelity wireframe.
High-Fidelity Wireframe
Once I’ve completed the low-fidelity wireframe, I’ll design the high-fidelity wireframe. Figma and Affinity Designer will be used to create the high-fidelity wireframe.
Prototyping
Prototyping will be final step of this case study. I’ll make sure to test the design before finalizing the Cosmeticopedia app.
