UX/UI Design | Product Design
Figma | Maze | Miro | Photoshop
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.
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.
- A dedicated mobile app
- Online personal styling assistance
- Create a dedicated mobile app
- Incorporate an online personal styling assistant for online shoppers
I worked as the UX Designer for this project.
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
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.
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.
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
- 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.
- 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
- 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.
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.
Creating a style guide and design system helped create the designs for the Lamond Fashion E-commerce app.
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:
- What insights can we gain from the user flow from the customer checkout process of online shopping through the app?
- How long does it take for a customer to reach the destination?
- Do the visual elements in the app support the customer in navigating the app?
- 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
- 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.
- 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.
- They also really liked the fact that they could make their own outfits.
- 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.
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.
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.
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.
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.
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.