top of page

Project Overview

I designed Avani from May to July of 2022 during my UX Design bootcamp. We were tasked with choosing a problem space and designing a MVP over a 10-week time frame. Having a background in the retail industry, I chose to explore E-commerce and discovered that there was an area of opportunity: accurate sizing.

To solve this problem, I utilized an end-to-end UX Design approach where I focused on the target user and their needs. Through user interviews, usability testing and lots of design iteration, I created Avani, a retail brand that provides its users with a virtual tape measure. Users can take their measurements with the click of a button and say goodbye to those online returns!

My Role: Lead UX Designer

- User Research

- User Interface Design

- UX Writing

- Usability Testing

- Prototyping

Tools Used: Figma, InVision


Design Process

I used a Human Centered Design approach to understand the target user group and design a solution that met their needs and motivations. Through comprehensive user research and analysis, multiple design iterations and usability test sessions, I was able to refine the product even further based on real user feedback.

Frame 518 (1).jpg



I conducted a literature review to understand the problem space further and uncover the pain points. According to statistics, millennials are the largest group of online shoppers in the U.S. and fashion is in the top 3 most popular categories to shop. In a recent study it was found that North American retailers lose about 183 billion dollars per year due to online returns. The #1 reason for returns? Wrong size.

Frame 519.jpg

User Interviews

The next step was to interview the target user group and understand their needs, motivations and pain points. I facilitated three user interviews, each lasting roughly 30 minutes, where I asked 20 open ended questions. I gathered the interview results and used an affinity map to narrow down key themes and insights.

Frame 517.jpg

Interview Themes Revealed

Frame 520.jpg

Problem Statement

Frame 521.jpg

help millennial women feel confident choosing their size when they shop online and decrease the frustration they may feel when they can't try the product on in person.



User Persona

Next, I developed a user persona to support future design decisions. The persona represents the target user group and will play an integral part during the design process. Designers and developers can refer back to the persona to make sure every decision aligns with her motivations and needs.

Frame 522.jpg

Experience Map

Once the persona was finalized, I mapped out her current online shopping experience through an Experience Map. The purpose of this map is to show the holistic experience people have when using a product. It captures their highs, lows and feelings along their journey to complete a task. It also tells us key moments where design intervention can be applied.

Experience Map-Capstone (1).jpg



User Stories

Using the persona of Camille Connor and the experience map, I created a list of user stories. These stories showcase a variety of tasks that Camille would like to complete when using this digital solution. I further categorized the stories into Epics (themes). I chose to focus on a single epic as I moved into the next phase.

Screen Shot 2023-03-04 at 3.38.40 PM.png


User Story of Focus

  • Viewing Options

  • Reviews

  • Convenience

​As a millennial woman I want to view a size guide tailored to my body type so that I can understand my size at a particular store and feel confident purchasing product.

Task Flow Diagram

Screen Shot 2023-03-06 at 7.18.07 PM.png

Concept Sketches

The sketches display my initial ideas for what the interface would look like. I utilized a UI Inspiration board, which I created on InVision, and pulled ideas from existing applications. The goal was to be unique while maintaining a sense of consistency with other products so that the user would feel self-reliant when moving through the flow.

Screen Shot 2023-03-04 at 6.23.02 PM.png

Prototype & Test


V1 Prototype

I transitioned my sketches into grayscale wireframes that were used for usability testing. The task flow focuses on the user recording a video of themselves and the camera scans their body to record their measurements. Using AR technology, the app captures their measurements and creates a custom size guide to assist them during their shopping experience. 

iPhone 11.png
iPhone 11-4.png
iPhone 11-6.png
iPhone 11-1.png
iPhone 11-2.png
iPhone 11-3.png

Usability Testing Feedback

  • 5/5 success rate

  • I facilitated 5 test sessions with potential users, 3 in person and 2 remotely.

  • Participants were asked to complete 6 tasks.

  • Color was not injected at this stage because the focus was on function and usability.

  • Three feedback themes emerged (shown below) which I used to refine the design further.

Frame 523.jpg



iPhone 12.png


  • Add more context to the second screen so the user has a better idea of what they will need to do before they get started with the video.

  • Participants were pretty unfamiliar with AR and wanted more clarity.

  • I bolded the keywords to help guide the user’s eye and added graphics to visually display information.

Video Feedback



  • Add video feedback features on the screen while they are recording, so they can avoid error.

  • Participants were vocal about wanting to know “in the moment” if they were accomplishing the task vs. receiving an error message after.

  • I ended up moving the instructions to a different screen in the final prototype.

iPhone 13.png




Content Design

  • Try to make heavy content more scannable through images or icons. Incorporate more description on Fit Guide screen as to WHY these products are suggested.

  • Participants wanted to see their measurements on the fit guide screen because it gave them a clear understanding of what the camera captured.

  • I changed the label “Suggested Products” to “Based on Your Shape, You May Like These Styles”, to address the WHY factor.

V2 Prototype

After one round of usability testing, synthesizing feedback and implementing revisions, I developed this final greyscale prototype. The main learning was that, with something as modern as AR, users need more context in a way that’s easy to quickly understand. Concise copy and visual displays of information were key.

iPhone 11.png
iPhone 11-2.png
iPhone 11-3.png
iPhone 11-4.png
iPhone 11-1.png



Visual Design

To bring the product to life, I created a brand identity for the clothing store and pulled inspiration from the user interviews. Interviewees expressed that they wished more online retailers would incorporate diverse body types, less photoshop and focus on women’s natural beauty. This led to the creation of Avani. Avani is a Sanskrit word, meaning authenticity, generosity and earth mother.

Frame 524.jpg
Frame 526.jpg
Frame 525.jpg
Frame 527 (1).jpg


  • Pulled from moodboard

  • Light and inviting

  • Abide by accessibility standards

  • Earth toned and warm

Frame 528.jpg


  • Bodoni 72 for brand

  • Avenir Next for main text

  • Utilized a Serif and Sans Serif font pairing for contrast

  • Utilize various sizes and weights for information hierarchy

Final Screens

iPhone 11-2.png
iPhone 11-1.png
iPhone 11-3.png
iPhone 11-2 copy.png
iPhone 11 copy.png
iPhone 11-1 copy.png

Key Learnings & Next Steps


Frame 529.jpg
bottom of page