See the prototype in action: LINK TO PROTOTYPE
Overview
.png){kind=small}
My Role
UX UI Designer responsible for user research, ideation, visual design, prototyping, and testing
.png){kind=small}
UX Methods
Primary and secondary research, user interviews, user flow, prototyping, mockups, style guide, usability testing
.png){kind=small}
Deliverables
User flow, prototyping, mockups, style guide, usability testing
.png){kind=small}
Tools
Figma
Design Process
Research
Conducted research to develop an understanding of our users and their needs
Define
Compile research and observe where all our users’ problems exist
Ideate
Generated a wide range of ideas
Prototype
Built real tactile representations of my ideas
Test
Conducting testing to gather feedback from users
The Problem
Background
Traditional luxury brands have shied away from eCommerce, fearing online retailing would reduce its sense of exclusivity and dilute the luxury brand’s image. But following the shift of consumer power to younger generations (the highly connected Millennials and Generation Z consumers are fast becoming the largest segment of luxury shoppers), it has become crucial for traditional luxury brands to update their structure to offer a seamless shopping experience online. And with the changing consumer expectations and growing competition from other brands, it has become critical to improve retail offerings online and create a more engaging experience to answer the needs of the modern affluent customers. Additionally, the ongoing presence of covid-19 pushes customers to look for a safer experience.
Montilla, a high-end luxury fashion and accessories brand is one of the most recent luxury brands who has expanded their presence online to appeal to the modern consumers. Coming out with its latest offering of virtual shopping experience, allowing customers to see and purchase products from their retail stores in a virtual setting through their mobile website.
The Problem
Despite launching a virtual shopping experience to increase customer engagement and maintain a sense of exclusivity, research shows that 50% of users abandon the site without moving any items into the cart as users struggle to determine which items to purchase based on relative features. Additionally, according to Montilla's existing research data, 70% of users who place an item in the cart do not purchase. Users abandon the cart at the registration page as they do not wish to sign up.
Business Goal
Improve the conversion from browse to completion of check out experience to increase revenue on the product’s mobile web experience.
The Challenge
Design a complete solution within 90 hours as part of Springboard's UI/UX Design Career Track Capstone Project.
The Research
Before I could formulate any solutions, I first had to conduct research to better understand the problem.
Secondary Research
Through secondary research, I was able to find existing luxury virtual stores like ours, which allowed me to identify features and functionalities that could inspire a potential solution for our store.
User Feedback on Existing Virtual Shopping Retail Stores
I also gathered feedback from users during the user interviews regarding these existing virtual stores, to observe how they interact with it, what they liked and disliked, thus providing insight on how our virtual store can be improved.
Primary Research
Understanding the Problem Through User Interviews
To get to the root cause of the problem, I first had to understand our users' purchasing behavior, desires, and needs towards luxury shopping. What are their deciding factors when it comes to luxury shopping? What relevant information do they need before they purchase? What exactly makes for a luxury shopping experience? Is it the location, the ambiance?
Through user interviews, I was able to get answers to these questions and determine whether Montilla’s virtual store is currently meeting our users’ luxury shopping needs and expectations.
Additionally, having very little knowledge about the luxury fashion industry, conducting the user interviews also allowed me to gain understanding on who our target users are thus allowing me to better empathize and create a user persona.
User Persona
The Solution
Are we meeting our users' luxury shopping experience needs and expectations? The short answer is no.
While majority of our users found the virtual shopping experience to be convenient, enjoyable, engaging, and really captured the feel of being in-store, there is one key aspect of luxury shopping that was missing, and that is, the in-store customer assistance. Sales Associates or SA as they are commonly referred to, can guide, or curate shopping experiences, and assist customers with any questions or special requests, thus allowing the users to make informed decisions.
Proposed Solution
With majority of our users expressing the need for an accessible sales assistance, I proposed offering the following options:
-
A live online chat option, where we would inform users at the beginning of the experience that a representative is ready to assist them via chat should they have any additional questions. This way we can deliver a full experience for a variety of users.
-
Curated experience, where an associate can shop along with users and video chat.
In terms of cart abandonment at the registration page, a guest checkout option would help in eliminating any sign-up process burden.
Designing an Improved Experience
After identifying our users’ needs and expectations, it was time to design an improved luxury shopping experience. But before moving forward with designing any potential solutions, I had to refer to my timeline to make sure that I can conduct all necessary steps in the design process. With a week and a half left to create a final solution, I had to determine which steps in the design process would be most useful and efficient in getting me the information I need to create a minimum viable product (MVP).
User Flow
Through the process of user flow, I was able to identify the mobile website’s content, functionality, and most important features and functionalities, thus allowing me to create an MVP, and separate the future features.
Furthermore, with time constraints and user availability issues in mind, the user flow also served as both my low-fidelity sketch and wireframes, which allowed me to create high fidelity mockups of the improved virtual shopping experience.
Creating the Prototype
Style Guide
Before creating the high-fidelity mockups for the mobile website, it was important to first establish consistency by creating a style guide for the company’s current season collection.
The look and feel of the virtual store were derived from the company’s Spring/Summer Desert Collection 2022, which consisted of natural tones.
Important Design Decision to Highlight Solution
Accessible assistance
To ensure that assistance is available, I made sure that the chat option is visually accessible throughout the entire experience. Even when they open the product details.
High-Fidelity Mockups
Below is the first version of the screens of the mobile website. I made sure to add a photo of a desert at the launch screen to give users an idea of what they can expect when they navigate to the store. Additionally, I made sure to make the launch screen visually appealing to entice our users. I also kept the interface and design clean and minimal to also appeal to our brand’s modern personality.
See the prototype in action: LINK TO PROTOTYPE
Testing
I conducted usability testing sessions with a primary goal of validating the virtual mobile web store’s new chat assistance and guest check out experience. Additionally, the test also seeks to validate the overall ease of use of the mobile website and seeks to identify any potential usability issues in red routes as well as uncover any unfulfilled user needs.
Listed below are the detailed findings of the test divided between what works and suggested improvements.
Results
Primary
Users understood that sales assistance is readily available and can be utilized whenever needed through the live chat. This made them feel more confident about purchasing as they are aware that their questions will be answered, thus allowing them to move forward with checking out.
Users also understood that they have an option for a curated/guided shopping experience per traditional in-person luxury shopping experience. Users who purchase luxury items as an investment found this feature to be very helpful, like when you’re purchasing art.
Other
Users found the interface intuitive and beautiful which makes for a delightful purchasing experience, which resonates with the brand’s mission.
Users were able to complete tasks at a timely manner and without confusions which validates the site’s efficiency.
Icons and imagery were clear that users were able to navigate to where they want to go with ease.
Users liked the look and feel of the mobile website which ties into the brand’s personality.
Suggested Improvements
There were no issues found in the red route and interface. All key features functioned as intended. No additional screens or pages necessary. However, I did identify some additional features that can further enhance the user experience.
1. Incorporate a check out guide at the top of the screen to keep users informed and guided.
2. Incorporate a redirect option after purchasing. It’s good to provide users an option on what to do next instead of just adding an “ex” or “close” button.
Future Scope
We plan to incorporate a loyalty program in the next version of the website to encourage users to return.
My Learnings
This project is my second capstone project as part of Springboard’s UI UX Design curriculum, and my second time designing a complete product experience from end-to-end with a very short timeframe.
The whole experience has made me more aware of how to make design decisions based on user needs instead of wants. I also learned how to identify which UX methods would work best for a project, especially when there is a short turnaround.