Adobe XD, Figma, Miro, Adobe Illustrator
User Research
Competitve Analysis
User Personas
Empathy Map
Brainstorming
User Flow
Wireframing
Hifi Prototype
Usability Testing
Implementing Feedback
In order to delve further into user preferences and requirements, I carried out an investigation by utilizing a survey and conducting face-to-face interviews. The insights gleaned from this research enabled me to acquire a more profound comprehension of the features sought by users in a shopping app. I implemented these findings into my development process.
Drawing from my research, I successfully pinpointed three prevalent issues that were raised by the majority of the users. It became evident that an extreme variety of swimwear catering to diverse body types was highly desired by most users. There was also a strong demand for user-friendly filters to simplify the process of product selection.
To gain a deeper understanding of similar apps, I created a competitve analysis table. The table systematically documented the features, strengths, and weaknesses of each mobile shopping app under scrutiny.
Using my findings, I created a user persona to help me cater my design to a specific audience. This helped me visualize the user’s perspective and keep their needs in mind as I began designing.
Emily Jenkins is a graphic designer who enjoys hobbies at the beach. She always needs new swimwear, but she cannot afford to spend a lot of time researching the perfect size for her because she has found that most swimwear companies have inconsistent sizing options.
"I'm so busy working and I don't have time to spend hours researching different sizes for swimwear. I just wish I could easily filter through different sizes and body types and find the best swimwear for me easily."
The Empathy Map was a holistic endeavor, synthesizing the multifaceted dimensions of the user's thoughts, emotions, expressions, and actions. This comprehensive insight not only enriched my understanding of the user's needs but also laid a robust foundation for designing an application that resonates with their unique perspective, fostering a more empathetic and user-centric approach to the overall design process.
“I wish I had more time for myself and hobbies like swimming.”
“I need swimwear that fits well and is comfortable.”
“It’s challenging to find a reliable swimwear company with consistent sizes.”
“I hope I can find swimwear that matches my style preferences.”
“I wonder if this swimwear company offers a variety of sizes to choose from.”
“I hope this app includes easy-to-use filters.”
Searches Online: looks for swimwear companies in her free time.
Reads Reviews: checks customer reviews and ratings to gauge the reliability of the company.
Filters Search: uses filters to narrow down options based on size and price.
Places Orders: tries to place orders quickly and efficiently to save time.
Excited: about finding swimwear that allows her to enjoy swimming for fun.
Frustrated: with the time-consuming process of searching for reliable swimwear.
Hopeful: that she can find a swimwear company that meets her requirements.
One of the primary benefits of utilizing the affinity map was its instrumental role in guiding feature selection and emphasis. With a clear visualization of the user's priorities, I could discern which features should take center stage to address their primary concerns, and conversely, which features could be more discreetly integrated or even hidden to streamline the user experience.
The creation of the task user flow was a crucial preparatory step that not only provided clarity on the number of screens required but also offered a strategic perspective on the app's architecture. This informed approach laid the groundwork for the subsequent wire-framing phase, ensuring that the design would be not only aesthetically pleasing but also functionally cohesive and user-centric.
Harnessing the wealth of information gathered during the empathize, define, and ideate phases, I began the pivotal stage of wire-framing to give shape to the envisioned design. This initial iteration represents a low-fidelity wireframe, serving as a foundational blueprint for the subsequent design refinements.
After I finished wire-framing, I had to choose colors and create a logo to represent the brand. Because my brand’s phrase is “We help you feel comfortable in your skin”, I choose different skin-color tones for the primary brand colors. I also designed a fun but functional logo. Lastly, I choose a bold font to represent the boldness of the brand. After some consideration and testing/trying different things, I was finally happy with my carefully curated style guide.
Upon completing the design phase, I delved into prototyping, a meticulous process that involved duplicating almost every screen to accurately simulate the functionality of the hamburger menu. Despite the time-intensive nature of this step, I aimed to create a prototype that faithfully mirrored the envisioned user experience.
I recruited five people for my usability testing phase. I presented my hi-fi prototype to each person separately, and I asked the users to note down any feedback on design and functionality. I also asked them to point out any pain points or confusion they experienced in the prototype. From this testing, I received helpful feedback that I used to tweak the screens for a more user-friendly product.
While I made made numerous other changes, these are some of the major changes I made using the feedback provided.
For the products (Tops/Bottoms) page, I added a “Body” filter option in the filter section.
For the product detail page, I added a measurements area to include measurement specifics for the item.
In the Reviews page, I added a filter section that allows the user to view specific reviews, as well as the option to filter from lowest to highest or highest to lowest reviews.
In the Shipping, Payment, Order Summary, and Track My Order Page, I changed the color of certain words from grey to a darker grey. This increased contrast and improved readability.
As the sole contributor to this passion project during my free time, I assumed multiple roles – researcher, wire-framer, prototyper, user interface designer, and content writer. This immersive experience not only tested my theoretical knowledge but also provided a hands-on application of skills acquired throughout my courses. Designing a mobile app interface for Skinis became a manifestation of my growth, showcasing a refined design sensibility and the ability to synthesize diverse skills to bring a brand concept to life.In essence, the Skinis project served as a dynamic learning journey, where theory met practical application, and the culmination of various roles demonstrated my versatility as a designer. The pursuit of this passion project allowed me to elevate my skills, providing a holistic understanding of design principles and a tangible manifestation of my capabilities in creating a user-centric and visually compelling mobile app interface.