⎯ Aisle Say I Do
Your one-stop shop for your wedding party!
A conceptualized e-commerce mobile-web experience for bridesmaids, groomsmen, or those preparing for their beautiful wedding day.
Tools: Figma
Time: 3 Weeks
Role: UI/UX Designer, Researcher
Problem Statement
Per the Product Manager, data shows that 50% of users open on average 7 item pages and then abandon the site without moving any items into the cart. It seems that customers are having difficulty determining which item is best based on their relative features. Additionally, 70% of users who place an item in the cart do not purchase because they are required to sign in at time of purchase.
Hypothesis
Creating a mobile web-experience with detailed filters will provide the flexibility to easily shop and find items based on their desired features can increase the number of users to move items into their cart. Additionally, creating an option for users to check-out via a guest check out system can reduce numbers of users to abandon their cart.
Research and Insights
9 individuals who have experience shopping online (via both mobile and desktop) were surveyed.
When the project was first initiated, the original focus on online shoppers who were planning weddings or who were a part of a bridal party. However, this demographic presented as too niche when finding individuals to answer the survey. Therefore, for the intention to get enough survey responses in the short project timeline, the study of consumers shifted to those who overall liked to shop online.
The majority of those who were surveyed were females between the ages of 25-34, who have experience shopping online. Most stated that they liked to shop on both desktop and mobile devices, but preferred to shop on desktop. When asked why they preferred to shop on their desktop, the common answer received was:
“I find that shopping on my phone is inconvenient because of the small images and text sizes.”
The ultimate goal of this project was to create a mobile-web experience, so this answer from the survey encouraged me to focus on creating larger and more enticing product images and texts for the e-commerce website.
Going back to the original concern of users not moving products into their carts and abandoning their cart altogether, it prompted a secondary set of questions to better understand this phenomenon. As a result, 6 of the individuals who responded to the initial survey were further interviewed. Some of the questions that were asked were:
When do you find yourself shopping online the most?
Do you like leaning towards using a mobile device or desktop?
How do you know that the browser that you’re using is a secure browser?
What things do you find pleasurable when shopping online?
What motivates you to put something in your cart?
What makes you want to abandon your cart?
Some insights from this secondary interview included:
Most shoppers find themselves shopping casually or when they really need something.
No one was concerned about the security and safety of the site.
Finance keeps the user from purchasing an item and abandoning their cart.
People loved reviews, filters, a good return policy, and a wish list.
Concept
How might we better the experience of the user to prevent them from abandoning their shopping cart and to make their final purchase?
A user flow is drawn to provide a better understand of the overall view of a user’s shopping experience. So far, based from our user interviews, can larger images and more enticing text be the solution to prevent cart and site abandonment?
User Flow
Before creating any kind of prototype, a deeper understanding of how other popular e-commerce competitor sites approached their customers was needed. In this project, e-commerce sites that focused on bridal party goods were studied. Some popular bridal party brands that were studied were:
Birdy Grey
Show Me Your MUMU
Azazie
Studying other industry leaders
Birdy Grey
Thoughts
I really like the Birdy Grey experience (which is why I personally went with them for my own wedding). I liked how they organized all of the dress options through both color and/or style. I also appreciated their attention to detail with “Birdy in the Wild,” which showcase their bridesmaid dresses in images from real-life weddings; this really helped me imagine and picture how my bridesmaids would look like on the big day.
Likes
How everything is organized by color.
How the dresses are organized by their unique feature (of being convertible, maternity-friendly, etc.).
How the dresses can be seen in different colors (in case you wanted to mix and match the colors and prints).
Their “Birdy in the Wild” feature really helped me envision how my bridesmaids would look like on the big day more clearly.
Dislikes
“Features” and “Featured” confused me. I would have used something else to word “Featured” and simply used the word “Filter.”
Show Me Your MUMU (SMYMM)
Thoughts
The overall interface of SMYMM is very clean and straightforward. Even though the brand sells non-wedding goods, they did a good job at organizing their website so that finding what you needed was easy.
Likes
Their reviews include their customer’s body information so it can provide a better idea of how the product will fit you. I am curious to know if this is optional for the customer to provide as it can be sensitive for some to share.
The pictures are all uniform.
Products are separated by color and style.
Includes a “You may also like” section which prompts the consumer to stay on their website and potentially find more products that fit their style.
Dislikes
It is a like and a dislike, there may be too much sensitive information in the reviews. If I were the user, I would feel uncomfortable sharing my clothing size with others if this was not an optional choice when writing out a review.
Azazie
Thoughts
Azazie does a great job in providing different options to their customers, but it can be quite overwhelming. I think they can do better in organizing their information hierarchy because it seems all over the place.
Likes
Clear images and plenty of customer images.
Filter section has so many options.
Dislikes
Sizing information/before you buy should be placed closer to the top of the page instead of the middle.
The options can be quite overwhelming.
The last summary filters was unnecessary, or they should have just the summary because it includes all of the filters.
Informational Architecture
Within an e-commerce page, there are many subpages, and therefore, it is very important to organize the information well to ensure that users are able to find what they need easily as they navigate around the website; especially on a mobile device since there is less screenspace to showcase information.
Low Fidelity
The user interviews revealed that users preferred to have filters, want a wish list, and are price conscious while they shop online. So I wanted to focus on creating the following features to create an enjoyable shopping experience; especially on mobile devices.
Once creating the low-fidelity mock ups, I moderated 1-on-1 usability tests done over Zoom. The feedback I received were some UI adjustments- such as wanting larger icons) but primarily the testers had stated that the experience was straight forward and easy to use. This feedback made me very excited to jump into creating the high-fidelity version of the product!
Design and Validation
I was able to utilize the low fidelity design feedback and create my first draft of my high fidelity prototype within a day!
Iteration #1 User Testing Feedback
Because my low-fidelity mock ups had minimal feedback and changes, I had walked into this testing with confidence. However, I was surprised to hear from my testers that there were certain functions that they found confusing.
Users were confused by the “Page View” function which changed the view from column view to grid view. One user even said that it was self-explanatory once they clicked on the button, but they wouldn’t have clicked on it without the motivation of their curiousity.
The checkout process had a lot of steps. And although the users liked the progress bar at the top, they thought that certain steps could be combined onto one page. Additionally, the area where users can input the information was too small for a mobile application check out.
Additionally, users were stressing on the shipping calculation (I would too after they mentioned it!).
Another user also wanted to see more in the filters. Primarily to sort out the best sellers among the rest of the products or to organize the products by the amount of money (e.g. from low prices to high or vise versa).
Final Design
During the usability test for the first iteration, someone had asked, “how can I know that I was qualified for free shipping?”
With that, I created a clickable banner to show the user that they are eligible for free shipping. Additionally, when the user puts the product into their cart, they can see if they’ve reached the minimum limit spent for free shipping!
Another redesign focus was on the filters. Users are now able to easily click buttons rather than utilize the search feature. By providing more detailed filters, it alleviates the effort by the user while they are shopping for products.
I also redesigned the check out. I made the area where users can input their information bigger. I also made it easier for the user to see a summary of the information they had already inputted onto one page to make it easier for the user to check and see if everything was inputted correctly.
Final thoughts
This project was challenging because this was the shortest timeline I had to work with to complete everything from beginning to end. After submission, I would want to further my knowledge and development of this application to better understand the consumer as well as further develop my research and design skills.
I want to thank my mentor, Camille, for all of her motivation and encouragement throughout this project!
And I also want to thank those who helped me test my prototypes and participated in my interviews!