Mirror

Responsive e-commerce site and rebranding for a clothing brand
Client:
Mirror
Duration:
8 weeks/160 hours
Role:
UX/UI Designer, UX Researcher, User Interviewer, Interaction Designer, Branding, Usability Test Moderator
Process:
User Research, Competitive Research, Persona Creation, Information Architecture, Task & User Flows, Responsive Wireframing, Branding, UI Design, Iterating, Prototyping and Testing

The Problem

Mirror is a global clothing store chain that targets shippers of all ages, genders, and backgrounds looking for low price, good quality clothing, for any occasion. Mirror is late in investing in digital, as their preference is to keep services in person. However, they recognize the sales potential of investing in a digital store. Mirror also has a large amount of inventory they would like to deplete, and see digital as a good avenue for this.

The Solution

The goal of this project was to deliver a functional e-commerce website and create a neutral, modern, and clean brand logo and style.

What does the clothing e-commerce landscape look like currently?

Goals:
Understand the shopper’s values, motives, and preferences

Job To Be Done:
Build a successful digital store that will retain and attract customers and grow Mirror’s sales

Research Methodologies:
Comparative and competitive research: see how competitors built their online stores and understand their business
User interviews: ask questions about participants shopping habits
Contextual interviews: understand how participants shop by watching them in their habitat

Competitive Research

To better understand the market and e-commerce landscape, I began by gathering competitive research to identify strengths and weaknesses amongst the top affordable e-commerce websites.

User Interviews

I  conducted user interviews and contextual interviews with 3 participants that matched the target market of 18-35.  

User Persona

Utilizing the competitive research and user interviews, I created a user persona that matched Mirror's target market.

Empathy Map

Creating an empathy map further allowed me to identify the user persona's needs and frustrations based off of her environment, actions, and behaviors.

Customer Journey Map

Taking it one step further, creating a customer journey map allowed me to better understand the user persona's behavior, emotions, and pain points when on the path to purchase specifically.

How do we organize the website for our users for an optimal experience?

In order to create the most optimal solutions possible to the main paint points I wanted to solve for the users, I started by conducting exercises such as card sorting, designing task flows, user flows, and a site map. These exercises helped me identify the most important features of the wireframes to focus on.

Task Flow

The following task flow showcases the steps the user takes to locate and purchase a blouse of their preference.

User Flow

The following user flow showcases the interactions and decisions a user has when navigating the path to purchase.

Site Map

The following site map identifies the navigation heirarchy based off of the card sorting and user research conducted.

Sketches

After some intensive information architecture, I took pen to paper to start brainstorming ideas for the wireframes.

Responsive Wireframes

Next, I translated my best sketches to digital wireframes on Figma. The wireframes include the home page, navigation, products page,  search results page, product description page, product description page when added to cart, shopping bag page, and checkout page for desktop and mobile.

How do we create a memorable and modern brand?

Logo Design

Creating a memorable, recognizable, and unique logo for Mirror was crucial for creating a Mirror's brand identity. Below are various iterations of logos I created before landing on the final design that is displayed in the UI kit.

UI Kit

I created the UI kit with the clear intentions of creating a brand style that was modern, clean, fresh, and neutral.

What do the users think?

Hi-Fi & Usability Testing

Objective:
What are participants’ initial impressions of the Mirror website? How quickly and easily can a participant: find an item, add to shopping cart, complete checkout process?

Goals:
Observe the behavior of 4 participants as they navigate through the prototype on desktop and mobile.
Observe any areas of hesitation, confusion, difficulty, etc.

Results

Participants:
4 participants, ages: 24-29, shop online: 1-5 times per week

Goals:
100% Completion Rate, 100% Error-Free Rate

Affinity Map

Based off of the feedback received during the usability testing, I created an affinity map to better understand the areas that needed further iterations.

Iterations

Below are examples of iterations made based off of the usability testing and affinity map.

The Solution

Responsive UI Design

With the user research, information architecture, UI design, and iterations, the responsive UI designs are now ready to be showcased!
*photography credit to Zara and H&M

Desktop

Phone

Looking Forward

Next Steps

Iterate:
Interview 5-10 more participants and understand their needs and frustrations.

Additional flows:
Introduce additional flows, make all elements interactive, have all buttons and features be interactive.

Test:
With the new additions, conduct additional usability testing to continue gathering feedback.

The Problem

Buckhead Grand Spa (BGS) is one of Atlanta’s top boutique spas. BGS offers high end facials, massages, and body treatments. They book appointments over the phone only, as time requirements differ for appointments, and allows for greater control over bookings for the spa owner. BGS has no issue with filling appointment spots, but many of the calls they receive from potential customers are due to confusion from their website that was built in 2008.

The Solution

With the research collected, I was able to design a responsive website that is easy to navigate and collect information about services, directs customers to call to book appointments, and allows for easy gift card purchasing. The result of this should yield fewer calls over confusion, and more calls to book appointments.

The Starting Point

My first step in this project was to do an audit of the current site to identify areas of opportunity and room for improvement.

Connect With Client

Next, I spoke with the Spa Owner to understand his needs for the website and business.

Main purpose of the website:
"For customers to view all available services, direct customers to call the spa to book an appointment, and allow for gift card purchasing."

Top needs:
‍"Website that is functional on mobile devices, has an intriguing design to draw customers to our business, and intuitive gift card purchasing process to alleviate questions & frustrations."

Brand in a few words:
"welcoming, relaxing, European, modern, fresh"

What does the landscape look like?

Competitive Research

To better understand the market and e-commerce landscape, I began by gathering competitive research to identify strengths and weaknesses amongst the top affordable e-commerce websites.

User Interviews

Next, I conducted user interviews and contextual interviews with 3 participants that matched the target market of 18-35. I reviewed the existing spa website with the users and asked them to explain their likes and dislikes. Next, I asked them to take me to their favorite spa's website, and explain what they like/dislike from their site. With this information, I was able to create an affinity map to understand what users are looking for in a spa website.

User Persona

Utilizing the competitive research and user interviews, I created user personas that matched Buckhead Grand Spa's existing clientele. Meet Matthew and Amy.
Matthew is a young professional who frequents the spa for 2 reasons - to relax when traveling, or for treating his girlfriend for a special occasion. He does his research on spas and is the one choosing and booking appointments. He pays special attention to the aesthetic and types of services.
Amy is a married, working, mother of 1. She frequents the spa monthly, as the spa is her escape from her busy work and home life. She is particular on her spa choice, and prioritizes a friendly, inviting atmosphere. She expects the website to represent the ambiance and be easy to navigate. If she enjoys the experience, she will make the spa her primary go-to location.

How do we organize?

In order to create the most optimal solutions possible to the main paint points I wanted to solve for the users, I started by conducting exercises such as designing task flows, user flows, and a site map. These exercises helped me identify the most important features of the wireframes to focus on.

Site Map

The following site map identifies the navigation hierarchy based off of the competitive and user research conducted. This allowed me to better understand the organization of the website pages to give the most optimal experience for users.

Task Flow

The following task flow represents the flow of purchasing a gift certificate. This allowed me to better understand the steps a user will take from start to finish.

User Flow

The following user flow represents the decisions and tasks a user will encounter when purchasing a gift certificate. This allowed me to better understand the various paths a user will have from start to finish.

Sketches

Before moving into wireframes, I sketched out potential layouts for the homepage, services, and gift certificate flow. This allowed me to brainstorm various options and receive feedback early on in the process.

Responsive Wireframes

Next, I translated my best sketches to digital wireframes on Figma. The wireframes include the home page, navigation, services page, about page, products page, contact page, and the gift card flow for desktop and mobile.

How do we create a cohesive brand image?

Style Guide

Creating a fresh, welcoming, and unique brand style for Buckhead Grand Spa was crucial for drawing in potential customers to book with the spa. I wanted to incorporate the essence of the physical spa itself, which include the colors of blue and green for calm, and flowers for freshness. I used a modern, clean sans serif body font paired with an elegant serif heading font. I also wanted to replace their existing imagery with more hi-def, professional images.

UI Kit

I created the UI kit with the clear intention of creating a brand style that was modern, clean, fresh, and neutral.

What do the users think?

Before showcasing the product to the Buckhead Grand Spa manager, I conducted usability testing for the website redesign. I wanted to understand the participant's overall impression of the website, make sure it aligned with the essence of the spa, and test for the efficacy of my redesign goals. Testers all found the site easy to navigate and were thrilled with the UI. All users agreed that they had enough information to be interested in calling to make a reservation.

The following is an example of iterations made after reviewing the design with a group of designers, mentors, and users.
Homepage:‍
  1. updated logo to represent spa
  2. updated navigation & footer color and typography
  3. changed UI of background to give a modern feel
  4. changed UI of background to give a modern feel
  5. updated imagery of services
  6. updated CTA color to stand out on page, rounded corners for modern feel
  7. body text and headers changed
  8. contact & location moved to top as that is the main focus on the spa website

The Solution

Combining the competitive research, user research, information architecture, UI design, and iterations, the final UI designs are ready to be showcased!

Homepage

The main focus of the homepage is for users to receive all necessary information, and to then contact the spa to book an appointment. The top call to action button scrolls users to the contact and hours of operation portion.

The next section lists out the available services offered, which navigate to the specific pages. Following is images of the spa and the concept section, which users mentioned is extremely important when selecting a location.

Lastly, users can easily navigate to the gift certificate purchasing pages from the homepage. This is important as it is a top reason users visit the site, and a vital source of revenue for the spa.

Services Page

Because the spa offers a large amount of services, it was important to organize this page in a non-overwhelming manner. Users can quickly navigate to the services offered by the secondary navigation bar, a finding I discovered users enjoy from the user interviews.

For each service offered, users can click the drop down arrow to discover more detailed information.

The pricing is listed next to each service in an organized and transparent matter, as users mentioned that they prioritize pricing when selecting services.

About Us Page

The About Us page required extensive copywriting work, as the spa manager had extensive messaging he wanted to include. This required negotiation on the length, due to readers typically only scanning written content.

I made sure to highlight the awards received to gain trust from users, explain the concept, and add personality and humility by showcasing the staff.

The spa owner also mentioned the importance of hiring great talent, so I included a call to action button for potential employees to be directed to the hiring information.

Gift Certificate Purchasing

Because the gift certificate pages is so crucial to the business, I focused a great deal on this portion.
Users are able to purchase gift certificates via email or physical mailed copies, so I designed two flows to showcase the different information needed for both options.

Users are able to easily customize, view services for prices, and make a purchase through this 3 step process. The gift certificate terms and conditions are also included on the bottom of each page as that was a "must have" for the business to mitigate any confusion and misunderstandings with customers.

Complete Desktop Designs

Complete Phone Designs

Looking Forward

Delivery & Go Forward

I delivered the final product to the Spa Owner and walked him through my research and process. While he had a slightly different vision of how the website should look, he was pleased with the research and testing to understand the user's needs. He responded positively to the design, and is currently working to implement the changes. I will continue to work with the team as questions and concerns arise.

What I Learned

  1. Collaborating and clearly communicating with stakeholders
  2. Understanding and respecting their vision, but making changes where needed backed by research and principles
  3. Importance of UI in evoking the feeling of a physical location business
  4. Working within the constraints of a 2 week turnaround period

The Problem

Dating Apps have become a new norm of dating for many individuals. However, many users still struggle to find real connections through the technology. For this project, I wanted to uncover the problems that exist in the dating app world, and create a MVP app that would address those problems. So I asked myself: How can we improve the technology of dating apps to facilitate viable connections?

The Solution

With the research collected, I was able to design an application that bridges the barrier of technology and in-person dating. The application encourages interpersonal, organic relationships to minimize the time and effort spent chatting to matches to only be let down when meeting in person, ghosted, or catfished.

The Process

User Survey

Before jumping to any conclusions of what problems might exist in dating apps, I gathered feedback from the users themselves. I did this by sending out a survey with high level questions to uncover what users like and dislike about dating apps. Through this, I was able to gather useful information for affinity mapping and uncover that in fact, a problem does exist.
Key Insights:‍
  • tired of small talk
  • waiting for responses and ghosting
  • unnatural way of dating
  • compatibility, connection, quality, seriousness
  • person's online profile vs. in real life person
  • personality, values, insights
  • review, censorship of users
I started to notice an overarching theme with the results, centered around the work spent to build a rapport with a stranger online, to then meeting in real life and expectations not matching the reality.

What does the dating landscape look like?

Competitive Research

To better understand the market and e-commerce landscape, I began by gathering competitive research to identify strengths and weaknesses amongst the top dating apps.
Key Findings: The online dating market has been growing exponentially year over year. The global dating app revenue (5.61B in 2021) and number of dating app users (323M) both show the trajectory and market potential. While there are many dating apps that exist today, Tinder and Bumble dominate the space with 45.6% market share combined.  The demographics of users on each app varies, i.e. Tinder being most popular amongst 18-29 year olds and Match.com primarily used by 30-44 year olds. Dating apps also differentiate themselves by features offered, as shown in the table below.

Talking to Users

To better empathize with those who use dating apps, I spoke with 4 singles to further uncover pain points that lie within the existing dating apps.

Once again, I noticed the theme of online dating apps enabling dating in a world where dating has become more difficult, yet people craving the organic, interpersonal connections.

Who would this app benefit?

User Personas

Utilizing the competitive research and user interviews, I created a user persona that matched the target market. Meet Brooke and Brian.

Brooke is a 29 year old young professional who enjoys meeting people organically. She is looking for a serious relationship, and does not enjoy wasting her time and every on dating app chats. However, she has difficulties meeting people organically.
Brian is also a 31 year old professional with a busy work and social life. He does not have the time to actively date, and hopes to meet someone organically in his day to day life. He uses dating apps when he has time during the day to browse and chat, but finds it difficult to carve time from his existing schedule to plan a date.

Customer Journey Map

Creating a customer journey map allowed me to better understand the user persona's experiences and pain points when utilizing dating apps, and uncover opportunities to solve the pain points.

The journey map uncovers that the opportunities for fixing the negative emotion lie within reorganizing the current dating app process of connecting, chatting, to then meeting a person in real life.

How do we organize to encourage seamless in-person dating?

In order to create the most optimal solutions possible to address the main paint points I wanted to solve for the users, I started by designing a site map, task flow, and user flow. These exercises helped me identify the most important features of the wireframes to focus on.

Site Map

The following site map identifies the navigation hierarchy based off of the user research and competitive analysis conducted. This allowed me to better understand the organization of the app and where each page would lie.

Task Flow

The following task flow represents the flow of a user checking into a location and matching with another user. This allowed me to better understand the steps a user will take from the homepage to the end goal of chatting off of the app and in person.

User Flow

The following user flow represents the decisions and tasks a user will encounter when checking into an app, matching with a user, and messaging the user. This allowed me to better understand the various paths a user will have from start to finish.

Pen to Paper

Before moving into wireframes, I sketched out the main screens of the dating app. This allowed me to brainstorm options, uncover potential issues, and receive feedback early on in the process.

Wireframes

Next, I translated my best sketches to digital wireframes on Figma. The wireframes include the following flow screens:
Locale flow:‍
  1. Log In Screen
  2. Directions for Verification Screen
  3. Take Selfie Screen
  4. Selfie Processing Screen
  5. Map Screen
  6. Location on Map Screen
  7. Check in Screen
  8. Users at Location Screen
  9. Profile of Users Screen
  10. Matches Screen
  11. Users to Message Screen
  12. Messaging Screen
  13. Messaging with Actions Screen
  14. Settings Screen

What do the users think?

Hi-Fi & Usability Testing

Before finalizing the UI wireframes, I conducted usability testing with the app prototype. I wanted to uncover how quickly and easily participants can: check into a location, match with 2 users, chat with user “Jared” and ask to buy him a drink, and find “incognito mode”. I also wanted to understand the participants’ impressions of Locale’s design, usability, and if they had any safety concerns.

User Testing Results

Participants:
6 participants, ages 26-32, currently using dating apps

Results:
100% completion rate
100% error-free rate
6/6 participants enjoyed using the app
6/6 participants had no safety concerns

Hi-Fi & Usability Testing

Before finalizing the UI wireframes, I conducted usability testing with the app prototype. I wanted to uncover how quickly and easily participants can: check into a location, match with 2 users, chat with user “Jared” and ask to buy him a drink, and find “incognito mode”. I also wanted to understand the participants’ impressions of Locale’s design, usability, and if they had any safety concerns.

User Testing Results

Participants: 6 participants, ages 26-32, currently using dating apps
‍
Results: 100% completion rate; 100% error-free rate
‍
6/6 participants enjoyed using the app
‍
6/6 participants had no safety concerns

Iterations

  1. Back button added to easily navigate
  2. Personal information changed to scrollable labels for easier scanning and about me section added to further customize profile
  3. Icon changed for viewing users to better represent visually the function
  1. Notification icons added to chats so users can easily see unread message notifications
  2. Notification icons added to navigation to let users know when they have unseen notifications from any screen
  1. Profile view icon moved to top for easier access in screen
  1. Incognito mode toggle changed to better match industry standards. Users said with the “before” option, they were unsure of the toggle was truly on or off.

The Final MVP Product

UI Design

When contemplating the app's name, I wanted to the name to incorporate locations and activity. The word "locale" translates to "a place where something happens or is set". This was spot on to the app's functionality. The logo is a red heart that resembles a location pin, signifying location and love. For the colors, I wanted to focus on a minimal, clean, professional look while incorporating a bright pink to bring excitement and eagerness. For the typography, I utilized a minimal and clean font to not distract from user profiles and images.

UI Kit

I created the UI kit with the clear intentions of creating a brand style that was modern, clean, exciting, and flirtatious.

UI Screens

Combining the user research, information architecture, UI design, and iterations, the final UI designs are ready to be showcased!

Log In & Onboarding

The onboarding screens give a quick overview of the way the app functions. Users can navigate forward or skip the onboarding if they choose to.

Photo Verification Screens

Keeping user safety top of mind, photo verification allows for:
  1. validation and confirmation that users are real people
  2. greater safety measures
  3. mitigates fake profile creations
  4. gain trust from users

Map Screens

From the Heat Map screen, users can:
  1. use the search bar to set their map view
  2. see the heat map showcasing locations with the highest density of other users that have checked into specific locations
  3. check into the location once a user is within range of a hot spot
Once checked in, the list of users at the location and the liked section of the navigation are unlocked.

Users Screens

Once users are checked in, they can:
  1. view the list of other users also checked into the location
  2. view the user's profile, which includes images, basic traits, about me section, and prompts
  3. heart to like the user or X to move onto the next profile
The power of this approach is that users can put a face to a profile while in the location, which mitigates catfishing.

Likes You Screens

From the Likes You navigation screen, users can:
  1. see who in the location has sent them a like
  2. send like back to match, or X to not match
  3. paying premium members able to view all likes at once

Chat Screens

From the chat navigation screen, users are able to:
  1. chat to matches from previous locations
  2. view new matches in current location
  3. send quick actions in chat that require a "yes" or "no" action, to minimize conversation and speed up meeting face to face
  4. have the ability to remove or report matches for further safety control

Settings Screens

On the Profile Navigation screen, users can:
  1. access settings, account, help, and update their profile
  2. ability to activate incognito mode, which disables geo-location tracking
  3. update their dating preferences

Checking Out

To check out, users can:
  1. check out manually by clicking check out on main map screen
  2. automatically get checked out once a user has left the radius of the location
Keeping safety in mind, automatic check out encourages people to make connections when in a location and to avoid any stalking behavior.

Prototype

The Solution

Combining the user research, information architecture, UI design, and iterations, the final UI designs are ready to be showcased!

Prototype

Reflection

Challenges Faced

A challenge faced during the research phase was uncovering the underlying issue with existing dating apps that doesn’t involve the people using the dating apps. For example, some of the responses gathered were find better men for the apps, make men emotionally available, etc. I had to dig deeper with my participants to find a viable solution.

Future Additions

Due to time constrains for this project, I did not include the initial preference set up screens. I kept the focus to the heat map functionality and prototype flow. For future additions, I w out the preference set up screens

The Problem

Venmo is a peer-to-peer financial platform with a social feed, popular amongst millennials. Users send and receive money easily amongst friends through their linked bank account. One of the primary reasons users use Venmo is for splitting checks for dinner, drinks, gas, groceries, ect. Currently, the app does not allow for easy, seamless check splitting. Most people will use a secondary app, calculator, or excel to calculate costs before using Venmo.

The Solution

With the research collected, I was able to design a feature addition in the Venmo app to take a picture of your receipt, itemize it with tip and bill included, and directly send out Venmo requests. This creates a seamless user experience from receiving a bill to receiving your money.

Digging into the research

Research Plan

Goals: ‍
  1. Validate problem hypothesis
  2. Build out feature adhering to Venmo guidelines
  3. Test final feature prototype
Research Methodologies:
‍Comparative and competitive research: see how other payment apps function
User interviews: ask questions about participant’s Venmo & payment habits

What does the landscape look like?

To better understand the market and online banking landscape, I began by gathering research about Venmo and the competition.

The research shows that Venmo has emerged as a top peer-to-peer payment platform that primarily targets millennials. The key differentiator is that Venmo does not charge users fees, unless credit cards are used for transactions. If there are insufficient funds in their Venmo account, payments are automatically pulled from their linked payment source.

With the mobile payment business growing, banks are also entering the peer-to-peer payment game. While more competitors enter the field, Venmo dominates amongst millennials due to the convenience and ease of use.

Venmo Research

Competitive Analysis

Talking to Users

To better empathize with Venmo users, I spoke with 4 interview participants to uncover pain points that lie within Venmo.

Based on the research, all 4 users use Venmo to primarily split group checks. Yet, they feel the process for splitting checks is unenjoyable and should be easier. Users wish they could itemize receipts and send out individual payments. With this, I was able to validate my hypothesis, and build a solution to address this problem.

Who is this feature for?

User Persona

Utilizing the competitive research and user interviews, I created a user persona that matched the target market. Meet Justin.

Justin is a young, tech-savvy professional who frequently goes to dinners with friends. Justin doesn't mind picking up the check for the table. He relies heavily on Venmo to split checks afterwards, as he rarely carries cash, and does not want to hassle the waiter to split large checks themselves.

How do we organize the content for users?

In order to create the most optimal solutions possible to the main paint points I wanted to solve for, I started by designing a site map, task flow, and user flow. These exercises helped me identify the most important features of the wireframes to focus on.

Site Map

The following site map represents the organization of the Venmo app. This allowed me to better understand the bones of the app and where the split check feature would fit in. Noted in red outline, the feature would fit within the “pay or request” page.

Task Flow

The following task flow represents the flow of splitting a check in Venmo with the feature addition. This allowed me to better understand the steps a user will take from the homepage to the request page, and how to properly integrate the feature addition to the existing flow.

User Flow

The following user flow represents the decisions and tasks a user will encounter when splitting a purchase with the feature in Venmo. This allowed me to better understand the various paths a user will have from start to finish, and how the feature would interact within the existing payment flow.

Pen to Paper

Before moving into wireframes, I sketched out the split check feature flow. This allowed me to brainstorm options, uncover potential issues, and receive feedback early on in the process.

Wireframes

Next, I translated my best sketches into digital wireframes on Figma. The wireframes include the following screens for the flow.
Venmo Split Check flow:‍
  1. Homepage
  2. Select friends page
  3. Add description page
  4. Click “Split Check”
  5. Take picture of receipt
  6. Confirm receipt page
  7. Select items per recipient pages
  8. Add tip or additional charges page
  9. Add tip pop up
  10. Review charges page
  11. Open details for charges
  12. Confirm charges
  13. Homepage with charges noted

What do the users think?

Hi-FI & Usability Testing

Before finalizing the UI wireframes, I conducted usability testing with the app prototype.
I wanted to uncover how quickly and easily participants could complete the flow of splitting a check from start to finish, and address any roadblocks they faced. Below are iterations based off of the feedback received.

Iterations

1. Checkbox addition to selection of items to better visualize the interaction the user is supposed to take
2. Check names once recipients have been allotted items to show they have been completed
3. Competed items switch to black text to better align with Venmo UI and interactions
4. Added instructions to better explain the interactions to the user and decrease confusion

Why not take it one step further?

Homepage Redesign: Why?

Venmo had a major product design in July 2021. During user interviews, multiple participants mentioned their disapproval with the new design. Users find it cluttered and unfamiliar.

Homepage Redesign: How?

To address the issues, I added the hamburger menu to the header to allow for quick view of profile, settings, and scan option. I also moved the pay or request button to the top right to follow standard app practices to increase familiarity. Finally, I added the logo to the header for clarity of what app users are accessing.

The Solution

Combining the user research, information architecture, and iterations, the final UI designs are ready to be showcased!

Setting Up Payment

From the homepage, users will click the payment button on the top right. From here, they will select all parties payments will be sent to, add a description to their Venmo, and select the split check button. Next, they will be prompted to take a picture of their receipt, upload an image of the receipt, or can opt to manually add itemized items.

Itemizing Receipt

Once the receipt is uploaded, it is auto-scanned and itemized. From here, the user can select each recipient individually from the bottom of the screen, then select which items they are responsible for. Once that person is accounted for, they will have a checkmark over their picture. Once all recipients are accounted for, the user can move on to the additional charges page.

Finalizing Payments

From the additional charges page, the user can add tip and/or other charges that are not included on the receipt. Next, users can see a confirmation breakdown of what each participant is responsible for. If everything looks correct, the user can then request the payment amounts to the participants. Please note that the primary user does not get charged the portion they are responsible for.

Prototype

Reflection

Challenges Faced

One of the main challenges faced was overcoming the challenge of staying within the constraints Venmo's existing flows. This required various iterations to the user flow. This was an important challenge to keep top of mind to make sure I built a flow that existing users would quickly learn and understand. It was important to make this feature fully integrated while feeling like the natural flow.
‍
Another challenge faced was understanding and building within an existing UI. Venmo uses their color scheme methodically, so it was important to learn when to use black vs. when to use one of the many shades of grey.

Future Additions

Users mentioned that they would like to have the option to join group payments and self select the items that belong to them. A group split would be created, then the other users themselves would do the work of selecting what they are responsible for. This would alleviate the main user from doing all of the work, from collecting information of who's responsible for what to having to send out the payments. This would be an interesting aspect to explore for future work, and build out additional flows.

Most Prouds

  • Designing a flow that is intuitive for users
  • Validating a problem and creating a solution that solves the problem
  • Working within the constraints of an existing application
  • Users during user testing being extremely excited with this concept

View More Projects

Buckhead Grand Spa
Venmo
Locale
© 2022 Lurda Jurgutis | All rights reserved
Email
Resume
LinkedIn