Hi there! My name is Pavithra. I am an aspiring UI/UX Designer based in Colorado.
As I work through my UI/UX Designer course, I have been building a trial case study that showcases my skill.
I hope you like what you see and I can't wait to see my designs on a real product used by real users soon.
Scroll down to read more about my case study.
CASE STUDY MENU
JUMP TO
Project Overview
The Product:
As part of my certificate course case study, I chose to build an app for an apparel designer. The designer sells apparel for men, women and children.
The Project Duration:
Through the course of this training, it has taken me 5 weeks from deciding on the product to making a high-fidelity prototype.
The Problem:
Clothing apps don't always show outfits in different sizes, making it difficult for shoppers to visualize an outfit on a body type similar to theirs.
The Goal:
Our designer clothing app will let users see clothes in different sizes. This will help users of different body types visualize how the clothes will look on them. We will measure effectiveness by gathering data on how many different sizes are sold.
My Role:
Since this was an independent project, my roles included UX Researcher, UX writer, UX designer and UI designer.
My Responsibilities:
-
Conduct user research
-
Identify user pain points
-
Create a journey map
-
Design paper and digital wireframe with user centric design in Figma
-
Create low fidelity prototype in Figma
-
Collaborate, receive feedback and apply design iterations
-
Conduct usability testing
-
Design mockup
-
Create high fidelity prototype
-
Analyzing user feedback and activity and iterating to enhance user experience
Other Collaborators:
I relied on my fellow coursemates for user research and feedback for design iteration.
.png)
.png)
.png)
.png)
.png)
.png)
Understanding the User
User Pain points:
Through a research questionnaire, I identified the following common user pain points while shopping for an apparel through an app.
1. Too many popups with suggestions.
2. Interface goes straight to cart when user adds one item to cart. The user has to begin the shopping process all over again if they need another item.
3. Outfits are not shown in different sizes. The same set of pictures show irrespective of what size the user chooses.
4. Having to enter users' address twice. Once for billing and once for shipping.
5. Space Bar or Enter buttons don't mimic the mouse click.
User Persona:
With my gathered data, I created the following user persona.
I aligned my design decisions with this persona.
![Google UX Design Certificate - Portfolio Project 1 - Case study slide deck [Template].jpg](https://static.wixstatic.com/media/fa71c1_389eb3af77194dc391b37e9e7cd427af~mv2.jpg/v1/fill/w_126,h_71,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/Google%20UX%20Design%20Certificate%20-%20Portfolio%20Project%201%20-%20Case%20study%20slide%20deck%20%5BTemplate%5D.jpg)
User Journey:
I created the following user journey to visually present how the user moves through the app. This further highlights user pain points and areas of improvement to consider when designing my app.
![Google UX Design Certificate - Portfolio Project 1 - Case study slide deck [Template] (1).](https://static.wixstatic.com/media/fa71c1_68428c61750d4a23823dea6be456f8c7~mv2.jpg/v1/fill/w_126,h_71,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/Google%20UX%20Design%20Certificate%20-%20Portfolio%20Project%201%20-%20Case%20study%20slide%20deck%20%5BTemplate%5D%20(1)_.jpg)
Initial Design
Next step was the most interesting part. Starting to actually design my product, how it will look, where things go, etc. But before that, I needed to remind myself of the user again and refer back to my persona and what they are trying to do and their pain points during the process. I documented this visually in these 2 storyboards and proceeded to design the product on a wireframe and a low-fi prototype.
The Storyboards:
Wireframe:
After drafting a wireframe on paper, I used Figma to create a digital wireframe. Here is a screenshot of the wireframe I created for the main user flow.
I addressed the main user pain points as shown in the wireframes below:
1. The action of adding to cart does not take the user to the cart directly. It gives them an option to continue shopping.
Low Fidelity Prototype:
It's now time to bring my design to life for the very first time!
2. The user is able to visualize the selected apparel in different sizes.
Here's the main user flow in action. If you'd like to give it a run yourself, click here for the low fidelity prototype.
Refining the Design
After receiving feedback from my peers and conducting a usability study with a sample group of users, I started designing a mockup of my app. Iterating on the design based on feedback and research, here is my final mockup.
Mockups:
Since this was an independent project for a hypothetical product, I created my own design system to stay consistent with the design across the product. Here again, I focused on the main user pain points addressed earlier.
1. The user can see the apparel option on different body types.
.png)
2. The user is given the option to continue shopping after adding an item to cart.
High Fidelity Prototype:
Once I finalized the mockups it was time to bring my final design to life and test it. I created the hi-fi prototype connecting all the different screen according the user flow and added animations and transitions between page changes.
Here is a typical user flow in action. If you'd like to give it a run yourself, click here for the high fidelity prototype.
Conclusion
Apart from being a significant learning experience, this project has given me great insights into user experience.
As a designer approaching UX design, I have learned to put the user first and foremost in every aspect of my thinking. Conducting user research identified a few major pain points for users from a diverse background. This helped me refine the design and focus on solving these pain points. I have also understood the importance of accessibility across my product. Maintaining a consistent theme across all the pages and platforms enriches the user experience further. Creating a design system definitely helped me with that. Collaborating and being open to feedback from both peers and users alike helped me iterate on the design further.
This project and the skills I acquired do not end with this product. This is but a stepping stone to many more ideas and designs.
Let's connect and explore what more I can bring to the table.