Menu
Role: UX Designer, Duration: November 2021 - February 2022

Lamond Fashion E-Commerce App

Skills

UX/UI Design | Product Design

Softwares Used

Figma | Maze | Miro | Photoshop

Lamond Fashion Front Page MockUps

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.

THE CHALLENGE

Lamond did not have a mobile app although many consumers suggested this because of the pandemic. Additionally, Lamond utilized Zoom during the pandemic to cater to their personal styling clients but discontinued this option after reopening its doors. 

Customers expressed:

  • A dedicated mobile app
  • Online personal styling assistance

THE GOAL

  • Create a dedicated mobile app
  • Incorporate an online personal styling assistant for online shoppers

MY ROLE

I worked as the UX Designer for this project.

RESPONSIBILITIES

My responsibilities were to conduct empathy interviews, conduct a competitive analysis, create paper and digital wireframes, low and high-fidelity prototypes, conduct usability studies, account for accessibility, and iterate on designs.

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

Says: I need to know as much information as possible, such as material, to make the best decisions. I like to checkout as quickly as possible. It's easier to use the mobile app versions of the site. 
Thinks: Likes transparency of mobile apps. Wants an easy shopping process. 
Does: Uses phone to shop quickly. Uses app to assist with in-store shopping as well. 
Feels: Enjoys online shopping. Frustrated with the checkout process.

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.

I am a busy professional so I need ease in usability when shopping online. It would be nice to have some help creating outfits for special events so that I'm not stuck scrolling for hours looking for inspiration.

Name: Morgan
Occupation: Marketing Coordinator
Age: 28 years old
Education: Bachelor's Degree
Hometown: New York City, New York
Family: Single/Lives Alone

Goals: Prioritizes staying on-trend and wants to work with a personal stylist to help create stunning outfits. 
To quickly buy goods online
To minimize the energy they put into shopping online to focus on more important things.

Frustrations: "I hate spending hours looking for the perfect outfit for my next occasion. I would love if someone could help me out and work around my busy schedule."
“I don’t like the over-complicated checkout process when shopping online.” 
“I would prefer to shop online and avoid long lines and out-of-stock items in store.

Morgan lives in New York working for a large marketing agency as a marketing coordinator. She is a member of a sorority and volunteers in her free time. As a young adult, she aims to stay on-trend with the latest styles. She also has a very busy lifestyle and cannot deal with over-complicated websites or difficult online sites.

User Journey Map

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

User Journey Map

Action: Browse site
Task List: select desired categories, search for what their looking for, remember the items that they want/add to cart
Feeling/Adjective: excited to buy new things, determined
Improvement opportunities: filters, search menu, categories, ensure HTML/text is up correctly for screen readers, add alt text to photos, add CC to videos

Action: Select desired items
Task List: add to cart, create a list of what they want
Feeling/adjective: Happy to be getting new items, needing a way to save items without adding them to cart
Improvement Opportunities: add wishlist function, add clickable area for touch controls

Action: Checkout
Task List: Click the checkout button, enter shipping details, enter payment details, order confirmation 
Feeling/adjective: frustrated with shipping fees, looking for discounts
Improvement Opportunities: Add one click checkout option, stored payment information, easily add discount codes, add warning message for invalid inputs

Action: wait for order to arrive
Task list: receive shipment details, receive order, ensure order is correct

Feeling/adjective: anxious to see items in person, frustrated with waiting

Improvement Opportunities: Send updates throughout shipping process, allow in app shipping details page

Action: Try on Clothes
Task List: Try on clothes, possibly return items
Feeling/adjective: Happy to have new times, frustrated with returns process
Improvement opportunities: allow customers to see how clothes would look on them via app, photo reviews, detailed product descriptions

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

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.

  • As the design process continued, I made sure to base screens on findings from user research. This page is a scrolling page to fit each element on a singular screen. The menu and header are both sticky selections that stay in a fixed position at all times.
  • The shopping page is meant to provide an easy shopping experience for the user. The top of the page provides all categories available in the collection such as different articles of clothing in the plus-size section of the site.
  • The product page is made to ensure simple checkouts and also gives the option for one-click checkouts. This page is a scrolling page to fit each element on one page.
  • The curated outfits page is meant to help users quickly find outfits and purchase everything at once.
  • The confirmation page provides detailed information for the user to be know all information about their order and also track their order. This page is a scrolling page to fit each element on one page.

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 Prototype Gif

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.

  • A message appears at the top of the screen. Confirmation message appears before exiting the editor.
  • Outside vs. Inside of the editor
  • "Complete Checkout" button not visible. The sliding gallery allows users to view the entire checkout process using the "Buy Now" feature. "Complete Purchase" button appears at the bottom of the screen.

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.

Lamond Fashion Design System

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 Prototype Gif

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.

  • The ability to add discounts and gift cards to the "Buy Now" feature
  • The curated outfits icon can be used to create an outfit and is placed on the same line as the "Favorites" button because all outfits created by the user can be found in their favorites under the "Created Outfits" tab.  The "Created Outfits" button was moved down because users tend to scroll down to find this button on the page.
  • Very small vs. bigger and stylized buttons

Accessibility Considerations

I included two ways to view the photos of items in the app. Users can either scroll horizontally or click the arrows for automatic horizontal scrolling. 

I utilized the WebAim Contrast Checker to ensure that the colors that I used met accessibility guidelines to ensure an accessible app for all. I used a contrast ration of 8.32:1 to meet these guidelines.

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.

Impact:

The app makes users feel like Lamond Fashion really thinks about how to meet their needs. Users really enjoy the personal styling functions of being able to create their own outfits, editing curated outfits, and being able to reach out to a personal stylist.

The app made it easy to reach out to a personal stylist and I feel like those who created the app really understands my needs. I also really like the fact that I can categorize my saved items as an outfit. This feature is more helpful and valuable than I thought!

Quote from usability study feedback

What I Learned:

While creating the Lamond Fashion app, I learned a lot about app creation and my personal interests. I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s designs.

Next Steps

Continue to conduct more competitive analysis occasionally to ensure that the Lamond Fashion app is staying ahead of the competition while also serving the user’s needs. 

Conduct more user research to determine any new areas of need.

Let’s Connect!

Thank you for taking the time to review the Lamond Fashion E-Commerce app! If you’d like to see more or get in touch, feel free to contact me below.

Behance

Leave a Reply

Your email address will not be published.