Lamond Fashion E-Commerce App

PROJECT OVERVIEW

Lamond Fashion is a women’s clothing retailer offering personal styling assistance. Prior to the pandemic, Lamond mainly served the local community. However, they’ve since expanded their target audience after seeing an increase in sales from customers in other states during the pandemic.

Merging Business & User Needs

For all user testing, I tested 5 female participants ages 25-40 that fit the target market of Lamond Fashion. These participants are well versed in online shopping and prefer to shop using their mobile app. To vet these participants, I did a round of initial interviews to ensure that each participant selected met the necessary criteria for the study.

After conducting interviews, I created empathy maps to understand the needs and pain points of the users I’m designing for. A primary user group identified was adults who want to stay up on current trends but need help styling outfits.

The research informed us that Lamond reached a target audience outside of their local demographic that also wanted personal styling assistance. Additionally, users expressed being frustrated with lengthy checkout processes as well as wanting access to curated outfits 24/7. 

Aggregated Empathy Map

User Pain Points

Time – Busy professionals do not have enough time to shop in-store.

Access – Users not local to the Lamond store are not able to take advantage of their personal styling services.

Mobile Access – Users wanted a more convenient way to access the mobile site and be notified of updates, sales, etc.

User Persona: Morgan

Morgan is a busy working adult who needs an easy and simple process to shop online using their mobile phone with personal styling options because shopping in-store is too time-consuming and is restricted to normal business hours.

User Journey Map

Mapping Morgan’s journey proved how helpful it would be to provide a dedicated app for shopping online via mobile.

Wireframing

Taking the time to draft iterations of each screen helped ensure that elements that made it to the digital wireframes would be well-suited to address user pain points. I decided to complete paper wireframes for the 5 most important pages. I chose to wireframe the homepage, collection page, product page, curated outfits page, and the checkout page. I chose the homepage because it is the first page that users see when they open the app. The collection and product pages were chosen because this is where users spend most of their time while shopping and browsing through the app. Next, I chose the curated outfits page because this is a new feature that is not available on many sites so I really wanted to thoroughly think through the design and functionality of this feature. Lastly, I chose the confirmation page because users tend to visit this page often after completing an order as they anxiously await and track their order.

My paper wireframing process consisted of creating a list of necessary elements of each page so that I would not forget to include these elements. Next, I created 5 iterations of the same screen and put a star next to each element that I wanted to include in the final iteration of this screen. Feel free to view this process below!

Drafting Paper Wireframes

Final Iterations of Paper Wireframes

Digital Wire Frames

After I completed the paper wireframing process, I started the process of creating the digital wireframes using Figma. I created the full version of the app in a low-fidelity prototype that I used during usability testing. Check out the 5 digital versions of the paper wireframes discussed above.

Prototyping

Low-Fidelity Prototype

After creating the digital wireframes, I entered the prototyping phase where I connected the screens using various transitions, overlays, and interactions.

Low-Fidelity Usability Study Findings

Once the prototype was completed, I conducted an unmoderated usability study to test similar features within the app as well as the personal styling options. By performing an unmoderated study, I was able to see which features needed improvement and which ones were good to go. I created a research study plan to help guide the testing where I defined research questions, KPIs, methodology, participants, and the actual questions and tasks that users would answer and complete.

Research Goals – Figure out if an in-app stylist actually eases the task of finding and purchasing a complete outfit online. Test if the “Buy Now” option is efficient and useful for users.

There were 4 main questions that I wanted to answer with this usability study:

• What can we learn from the steps users take to browse and checkout? 

• Are there parts of the user flow where users get stuck or become confused?

• Do users think the app is easy or difficult to use? 

• Would users prefer an actual person helping them create an outfit or do they find it useful to be able to use the curated outfits to help create a full outfit?

To measure the effectiveness of this study, I used User Error Rates and Conversion Rates. After I completed the usability study, I created an affinity map using Miro to organize the data. I then created a research analysis where I discovered the main themes and created insights and recommendations. I then iterated on the low-fidelity designs before moving on to the high-fidelity designs.

I used Maze to conduct the unmoderated study. Users were instructed to answer a series of questions and perform 4 tasks. To create this study, I uploaded the Figma prototype and mapped out the intended user journey. Users were able to stop each task when they felt like they completed the task. If users completed the task following the intended journey, they received a congratulations message. If not, users were just prompted to go to the next task. I was able to see the exact user journey that each user took when completing the task through recordings and heat maps. This helped me understand the user’s mindset and where they got confused.

Unmoderated Usability Study: Round 1 Findings

1. Users loved the concept of the personal stylist feature but found the process to be complicated. The feature proved to be effective but changes needed to be made to make this feature more effective for users.
2. Users found the “Buy Now” feature to be effective and a great concept. However, users did not understand they had to click “Complete Purchase” because this feature was not visible unless they scrolled down. This is a small fix that I made when creating the high-fidelity prototype
3. Users loved the personal stylist feature but some users expressed their desires to talk to reach out to a real person for personal styling.

Refining Low-Fidelity Designs

After identifying themes and prioritizing changes needed, I made those necessary changes to prepare for the high-fidelity wireframing process.

High-Fidelity Wireframing

After the low-fidelity usability study was completed, I iterated on the low-fidelity designs before starting the design process for the high-fidelity wireframes. Once I was ready to complete the high-fidelity designs, I created a style guide and design system.

Style Guide/Design System

Lamond Fashion is an affordable luxury women’s brand that inspires femininity. I wanted to ensure that the style of the brand was clean and modern to appeal to the target audience. To help speed up the design process, I created a design system for Lamond Fashion that matched the brand’s style. This helped me easily edit icons, buttons, and other interactions.

High-Fidelity Mockups

Creating a style guide and design system helped create the designs for the Lamond Fashion E-commerce app.

High-Fidelity Prototype

Once the high-fidelity digital wireframes were created, I started the process of prototyping. The e-commerce app features many features. These features range from shopping the site, contacting a stylist, shopping curated outfits, creating your own outfits, and more!

High-Fidelity Usability Study Findings

After the high-fidelity prototype was completed, I conducted a moderated usability study. I decided to perform a moderated usability study to get a more in-depth review of any additional features that needed to be changed or added. I wanted the ability to view user interaction in real-time and ask additional questions on the functionality and effectiveness of the app. I performed this study through Zoom where I was able to view user’s interactions in real time. I created a research study plan to help guide the testing where I defined research questions, KPIs, methodology, participants and the actual questions and tasks that users would answer and complete.

Research Goals – The research goals were to determine if the Lamond Fashion app is effective and if users understand the in-app personal stylist feature.

There were 4 main questions that I wanted to answer with this usability study:

1. What insights can we gain from the user flow from the customer checkout process of online shopping through the app?
2. How long does it take for a customer to reach the destination?
3. Do the visual elements in the app support the customer in navigating the app?
4. Is this new feature easy to use and understand for users?

To measure the effectiveness of this study, I used User Error Rates, Conversion Rates, and Drop Off Rates. After I completed the usability study, I created an affinity map using Miro to organize the data. I then created a research analysis where I discovered the main themes and created insights and recommendations. I then iterated on the high-fidelity designs.

Moderated Usability Study: Round 2 Findings

1. Users found the personal stylist feature to be effective in this study. Users were able to swiftly complete all tasks related to this feature and loved the innovation of the in-app personal stylist.
2. Users really liked the curated outfits and and loved that you could edit them to match your personal style. However, users expressed the need to be able to edit the color and size of each item in the outfit.
3. They also really liked the fact that they could make their own outfits.
4. Users want the ability to add discount codes and gift cards in the “buy now” feature. 

Refining High-Fidelity Designs

After identifying themes and prioritizing changes needed, I made those necessary changes to perfect the high-fidelity prototype.

Accessibility Considerations

Going Forward

After completing the project, I learned a lot and have since experienced immense growth. I now have a better understanding of the UX design process and what my interests are within the field of UX.

Next Steps