Pacco
Tools
Role
Research, Ideation, Visuals, Prototyping
Timeline
15 weeks
Type
Responsive Website
Project Background
Pacco is a responsive fashion e-commerce website that allows online shoppers to have a more efficient and error-free experience. Although online shopping makes it possible to purchase clothes with just a click of a button, it does entail numerous problems. Not only is it difficult to choose the product in the correct size, but there is also the possibility of going through the return process if the product does not fit properly.
Taking all of these into consideration, we are in need of features that will help us find the perfect fit. With that being said, I designed a responsive fashion e-commerce website called Pacco.
Design Process
In order to develop this particular product, I chose to use the Design Thinking approach to guide me through the process. By following the steps, I was able to research thoroughly about the fashion e-commerce industry before I proceeded to analyze the problem and ultimately come up with a product solution.
Step 1: Empathize
Because Design Thinking emphasizes the importance of human-centered design, the first step of the process is to empathize. This essentially gave me the opportunity to gain some insight into the thoughts, feelings, and needs of the users.
User Interviews
I conducted interviews with users who are familiar with online shopping to identify their needs and pain points. Because a wide range of demographics enjoys online shopping, I interviewed a total of four participants between the ages of 18 and 50. Their professions varied from student, engineer, to homemaker.
Summary of findings from the user interviews:
-
Two out of four participants discussed the need for more reliable size guides due to different body shapes
-
Three out of four participants expressed their frustration over the fact that the product might not fit them as well as they do on the model
-
Three out of four participants noted that customer reviews of the products are helpful
-
Three out of four participants stated the importance of knowing the quality of the product
-
All of the participants discussed the need for some kind of filters when shopping online
-
Two out of four participants were motivated to find and buy clothes in a timely manner
-
Three out of four participants were motivated to shop online because of its convenience and wide range of selection
-
All of the participants preferred to use a laptop over phone or tablet to shop online
Some of the participants noted during the interviews:
“I often look at the reviews to see whether the quality is good. I also see whether sizes are accurate.”
“Sometimes, it looks good on the model, but that might not be the case for me.”
Competitive Analysis
Once I was able to get a better understanding of the thoughts and feelings of the users, I proceeded to conduct research on some of the direct and indirect competitors. During the research, I wrote down some of the major strengths and weaknesses of each of the websites. Doing so made it easier to figure out the commonly sought-after features for fashion e-commerce websites.
Step 2: Define
The next step in the process is to define. With the research conducted thus far and the findings from the user interviews, I was able to figure out what will be created, for whom, and how.
User Persona
Based on the insight provided the participants during the user interviews, I created a persona that reflects various needs and pain points.
Problem Statement
After the goals have been identified, I came up with a problem statement that I could refer back to as I proceed with the design process.
How might we design a fashion e-commerce website for those who shop online so that they can have a more efficient and error-free experience?
How might we design a fashion e-commerce website for those who shop online so that they can have a more efficient and error-free experience?
Step 3: Ideate
This stage of the Design Thinking process focuses on taking a creative approach and generating ideas. With the findings that I synthesized from the previous steps and the problem statement that I made earlier, I was able to think outside the box. I created a number of deliverables that could help me identify and visualize a solution.
Information Architecture
By incorporating the findings from the card sorting, I was able to group the different fashion items into certain categories and planned the layout of the website accordingly.
Digital Wireframes
Once the information architecture was ready, I made some sketches of Mirror’s Homepage to get an idea of what it would look like. Because all of the participants from the user interviews mentioned that they prefer to use their computers when they shop online, I decided to focus on developing the screens for the desktop version.
Then, I began to develop several mid-fidelity wireframes on Adobe XD. These wireframes included the Homepage, Category Page, Product Details Page, and Checkout Pages.
Mood Board
Because I wanted to design a website that is simple yet modern, I created a mood board that reflects those ideas.
Step 4: Prototype
The next step in the process is to make a clickable prototype so that the users can test it out. Following this step allowed me to gather feedback regarding the product and try to figure out the best possible solution for the problem.
Step 5: Test
Considered the final step in the Design Thinking process, this step focuses on testing out the prototype. It is also an iterative process that gives me the opportunity the evaluate whether my design solves the problem and redesign any parts of the product if needed.
Usability Testing
I conducted remote usability testing using a high-fidelity desktop prototype. It was conducted to test the flow of design, ease of navigation, and the extent to which the design accurately reflects the brand’s values. The test was also used to see whether the design solves the user’s needs and pain points that were captured during the research phase.
The test was conducted with a total of five participants between the ages of 18 and 50. Each of the participants were asked to complete the following tasks:
-
From the homepage, show me how you would find Women’s Tops in size “Small”.
-
Find a product called “Neutral Tank Top” and add it to Shopping Bag.
-
Purchase a product using Guest Checkout.
Here are the key points from the feedback received:
-
Participants thought that the website could be inclusive by offering more size options
-
There is a need to include an icon that allows the user to view more products at once on the Category Page
-
Participants wanted to see all the applied filters and have the ability to clear them on the Category Page
-
Participants expressed the need to change the input field for Quantity on the Product Details Page to ‘1’ since it is assumed that the user would purchase one product
-
On the Shopping Bag Page, participants noted that Quantity should include an icon to make it easier to edit
Final Product
Mobile Look
Take - Aways
Impact
During this project, I found the user interviews to be quite helpful as they provided insight that I originally did not think of. Doing so taught me the importance of removing bias as I conduct research.
Most importantly, I learned that design is an iterative process that requires much time and effort. Despite the fact that I came up with a product solution, there might be ways in which I can improve user experience with technological advancement over time.
With the priority changes that were made, I can conduct another usability test to see whether the revisions have solved the issues that were previously brought up by the users. If needed, I would have to do another round of iteration and testing. Once these steps are complete, I can hand off the project to the developers.
Next Steps
