biel-morro-128513.jpg

Tappmee: Responsive Web Redesign

biel-morro-128513.jpg

Tappmee:

 

Responsive Web Redesign

 

 


Overview


 
Current Website

Current Website

 
 

What is Tappmee?

 

Tappmee is an on-demand nail and beauty service, in which customers can hire nail artists for manicures and pedicures online, to wherever they are. The client, CT and his wife CC, want Tappmee to be the on-demand beauty app for all your beauty needs. CT's "Nail it and Scale it"  philosophy saw the business growing in 3 stages; beta roll out with a responsive web design, a mobile app, and eventually a bot to be hooked into messenger apps. The name "Tappmee" comes from where the client lives, Lake "Tapps" WA, and where he wants to go, with "Mee" referring to "Messenger" service connectivity. 

 

 

Business Goals

The client and his team wanted to build out one of his stages of development in hopes to get a live beta out to customers. Eventually he wants Tappmee to be an all in one beauty app that is as easy to use as Uber, Lyft, and AirBnB.

 

tappmee_team1.jpg
tappmee_client_meeting.jpg
tappmee_team3.jpg
 

The Team

 

The team was chosen by our instructors with our input into the roles we wanted. All 3 of us easily chose our roles and got right to work. Our team was composed of Rei Yamamoto: Visual Designer/Information Architect, Hyuk Gi Lee: Interaction Designer, and myself, Todd Agnello: UX Researcher/Project Manager.  

 

IMG_3703.JPG
IMG_3698.jpg
 

Project Scope

 

Originally after meeting with CT upon learning of his needs for an on-demand service we thought it made sense to work towards a phone app. We knew we could make user flows for one of his proposed stages within the 2.5 weeks given, but not all of them.  Initially we did not know if he had a functioning website as he needed to work out issues to give us access to all of its components. As soon as we saw his end to end flow for both the customer and the providers we realized that he already had something that was functional, but he needed help with branding and UX. After the 2nd meeting we were able to agree upon creating designs for his website that assisted both customers and providers in engaging with the new service.  By the time we had this figured out we had 2 weeks to deliver for our client.

 

 

Problem Statement

CT's current site allowed users to create on-demand booking for nail beauty, but it lacked features that would help users and nail artists to navigate with ease. Both customers and providers alike experienced difficulties with lack of information, ease of profile creation, and booking around the unique on-demand system. In addition, the lack of branding and aesthetics of the site was causing the company to suffer from a poor brand-recognition.

 
 
 

Solution Statement

Through user and provider interviews we explored issues around convenience, customer reviews, safety and brand visibility. This led us to create a web design that enabled customers to clearly see service information, view artist information, and quickly book appointments. Our design also ensured that providers could sign up for the service and handle their appointments, with relative ease. Our goal was to create an enhanced responsive website experience that our client could use to successfully serve his customers and grow his business.

 

Research


IMG_3679.jpg
IMG_3683.jpg
 

Business

 

Our team of 3 were new to the needs and wants of the nail customers and nail artists. In order to get our heads around the beauty industry we conducted a card sort using our notes from our client meeting. This assisted the team in getting ideas for what to ask potential customers and providers in an on-demand nail service. It also helped us to direct my industry research and competitive analysis. For Rei, it helped to give her a direction for her branding research.

 
 
Screen Shot 2018-01-04 at 4.33.35 PM.png
Screen Shot 2017-12-07 at 2.16.18 PM.png
 
 

With some basic information around the industry I found a great source of information on the state of the nail industry from nailsmag.com. On their site was the 2016-2017 State of the Industry report. This report had some great questions and data around both customers and providers. This data helped me refine our interview questions and our competitors.

This section from the report in particular stood out to me as a basis for developing questions around customer and needs helping to understand what they wanted in nail services. According to this report customers predominantly liked technicians who worked as a team, had a great personality, and had excellent communication skills.

 
 
Screen Shot 2017-12-31 at 2.20.19 PM.png
 
 

In researching our competitors I looked at other on-demand beauty services. I found 5 companies that offered similar services, 3 of which were local to the Seattle area, in our client's targeted region. Tousled and Priv were 2 companies that were further along than Tappmee in that they had websites as well as mobile apps. Our client seemed unfazed about the competition due to the multitude of services they offer. With Tappmee, the client believed in doing one thing really well, high quality on-demand pedicures and manicures.

 

 

Users

screener

Tappmee serves both customers looking for great nail care, and nail beauty providers who want to make a living doing what they love. In order to understand both of these groups I conducted a screener questionnaire followed by user interviews. The screener focused on questions to help me define potential customers for the service and find users for interviews. CT, our client, gave me contacts for nail artists, as well as suggesting we take a trip to a salon and interview onsite.

From the screener we received 33 responses and gained 5 users for interviews. Here are the major takeaways from the screener:

 

 
 

One of the first questions was to determine an age range, given 5 categories to choose from. Our client CT said he wanted to target the site mostly towards millennial women. At 70% our survey gave me a good sampling of that demographic.

Screen Shot 2018-01-09 at 4.54.37 PM.png
 
 
Screen Shot 2018-01-09 at 4.54.04 PM.png

I asked our potential users what they looked for in beauty services. The 3 most important qualities were reviews, cleanliness, and price.

 
 

The final assessment that I did was check on the users' comfort with this type of service. I asked potential users how comfortable they were with calling a beauty technician over to their home, and most were in the middle. However the next group was "not comfortable" with the idea of an at home service. This pointed to a trust gap with the "on-demand"  business model that we would need to investigate.

Screen Shot 2018-01-09 at 4.55.41 PM.png
 

 

Interviews

 
IMG_3727.JPG
 
 

I interviewed  5 potential customers, in person and via phone. Each of the users interviewed fell into the main demographic of millennial women, ages 21-30. These women all engaged in beauty services and most regularly received manicures and pedicures. I was able to find some common pain points. Users wanted to see clear descriptions of services, reviews, and fast no hassle booking.

 
IMG_6768.JPG
IMG_6771 2.jpg
 

I interviewed 2 potential providers on the phone and 2 in person. I felt the team would benefit from some contextual inquiry so we went to a local nail salon to get service as a customer and to interview nail artists. My interaction designer Gi and I, both got pampered by the awesome crew at Jolie Nails. They also answered my inquiries into their profession and gave some insight into their pain points. The providers told me that they worried about communicating with their customers, instantly seeing a customer, and not being able to show their skills to customers.

 

 

Proto Personas

Christie Taylor.png
Terry Nguyen .png

In compiling data for the customers for Tappmee I noticed user issues around complicated booking systems, scheduling nail appointments with busy lifestyles, and trusting a new service. This led to the creation of our customer user, Christie. She wants the convenience of an on demand system, but needs assurances of its quality and reliability.

On the provider side we saw issues around communication with clients, working for salons that take big commissions, and sitting around waiting to work. Based on the interviews I was able to compile data for our provider Laura. A number of factors make her a good fit for the on-demand nail service model: she is new to the industry, she wants the ability to make money on her terms, and she wants a system that is easy to communicate her brand to customers.


User Testing


Screen Shot 2017-12-31 at 2.43.56 PM.png
Screen Shot 2017-12-31 at 2.45.21 PM.png
 

In order to deliver a high fidelity responsive web design with branding we needed to create screens for a set of specific tasks. For our customer Christie, our provider Laura, and our client CT we came up with 3 user tasks. For our purposes they were: booking an appointment as a customer, managing transactions as a provider, and the communication between customer and provider. I tested these 3 tasks with 6 users using Gi's wireframes and InVision prototype.

I  was able to conduct at least 2 rounds of testing with all users and in some cases a 3rd round with several users. Key findings in testing revealed issues with the booking process. Users were unclear of their progress within the booking process so Gi allowed for users to see a confirmation of each component as it was booked. Users did not know they could change details of their booking prompting changes to make the confirmation page more visibly clickable.   

On the provider side we noticed a few issues as well. Provider information was too hidden within menus, prompting confusion and multiple clicks. Providers needed quick access to essential information on confirmation such as address, person's name, and the amount they could make from the transaction. Providers also needed to be guided to the next step in the appointment process as opposed to digging through menus to find it. 

 

Final Delivery


tappmee_logo_comp.png
tappmee_mobile_home.png
tappmee_web_home.png
 
 
Logo, hi-fi screens, and video showing clickable prototype
 
 

Items delivered on time to our client CT:

  • 3 user flows in high fidelity screen assets for mobile responsive web
  • Research materials
  • Presentation deck
  • InVision prototype featuring 3 user flows
  • Branding colors, images, copy, and logo

There were 2 challenges in our delivery schedule, delivering useful files for our client's website and ending our discussions on the logo. The challenge for me with the logo and branding was managing the scope and expectations for delivery. Rei's branding colors and images were well received with little revision. However the logo revisions were taking up too much of her time in the final stretch of the project. I had to tell CT that the logos we gave him would be all we could create for the time allotted. He understood so he and Rei decided on this logo.

At the end of the project, as we delivered the assets to a shared Google Drive, we realized that CT was going to have issues using our Mac based sketch files with his developers on PC. We gave him files that another designer could pick up, but in their current state the developers could not manipulate the files. I had to give him as much information as I could find on converting the files, but I had to move on to another project.

 

Key Learnings


 
Screen Shot 2018-01-09 at 9.32.09 PM.png
 
 

First off, I was lucky. I had an incredibly hard working and talented team in the form of Rei and Gi. We were then paired up with what seemed like the best client out of the bunch. CT was passionate, considerate, engaged, and truly the best to work for. 

Next I would say that we played to our strengths on the team. With my experience dealing with clients and schedules in the game industry I was able to interface with CT on behalf of the team and help to manage their work. Even though I  was new to research it felt very natural. Rei was outstanding in her ability to take on the visuals and information architecture. Based on what I had seen in her presentations I knew she would kill it, and she did. Gi was very humble, but truly a machine with his work output. He used his design instincts to create amazing interactive solutions for the project.

Working for a client is very different than working for yourself. I tried to keep a loose schedule to allow for client collaboration, which worked mostly. It didn't work so well when we had a lot of iterations in meetings that was not translating into testable prototypes for users. Our class was given about 2.5 weeks but our work didn't start until the 2 week mark due to scheduling conflicts with our busy client. It would have been helpful to have a more concrete set of deliverables up front to help manage the client's expectations for our 2 week timeframe.