keaton-row-mockup

Empowering career-advancing women with the right professional attire.

Designing a native mobile application for stylists and clients.

 

Client - Keaton Row

Keaton Row provides curated catalogs of outfits at no cost to their clients.  Stylists receive payment by commission from Keaton Row partner department stores.

The Challenge

26% of clients did not buy an item because it did not match their style preferences.  That's about 1 in 4 professional women spending unnecessary time and effort using a platform that's not serving them well.  There's a need to create better visual communication between stylists and clients.

The Outcome

We designed a native mobile app connecting stylists and clients on visual boards to review and discuss fashion looks on-the-go.  Based on our user research, we added details to the client profile including body shots, brand likes and dislikes, and social media incorporation (ex. Pinterest) for visual inspiration.  Stylists and clients also expressed their desire to collaborate together when making purchases.  We mimic the real life experience of shopping with a stylist through chat communication. 

One of our stakeholders said, "You got me thinking about my previous assumptions about the user and challenged me creatively."


Green_Feather.png

Empathize with the User

We conducted interviews, contextual inquiries, competitive analysis, user task analysis, and reviewed surveys with 500+ participants.  When we interviewed clients and stylists, we focused on their relationship.  Stylists informed us they approach their work with psychology, not only do they know what looks good, but they need to convince the client and pamper their emotions.  Often times they will have to follow-up with the client.  Additionally, we drew inspiration from dating websites, which help people get to know each other and build relationships.  Our persona client, Serena, doesn't have time to comb through a long styling survey.  Many competitor mobile app and web services just take too long.

Journey Map - We compiled quotes from user interviews and about 50 entries in our survey.  The journey map showed motivations, positives, negatives, and key insights.  

Journey Map - We compiled quotes from user interviews and about 50 entries in our survey.  The journey map showed motivations, positives, negatives, and key insights.  

Persona - Our persona represents the typical Keaton Row user.  She's professional, hard-working, making money, and looking to advance in her career and wardrobe.

Persona - Our persona represents the typical Keaton Row user.  She's professional, hard-working, making money, and looking to advance in her career and wardrobe.

Word Cloud - We created a word cloud based on client's responses to "How do you choose your clothes?"  We noticed people's emotions play a huge factor in choosing clothes.

Word Cloud - We created a word cloud based on client's responses to "How do you choose your clothes?"  We noticed people's emotions play a huge factor in choosing clothes.


blue-feather

Define the Solution

We whiteboarded everything - user flows, wireframes, and pain points.  As a team, we had expo markers, talked, and sketched.  We realized bridging the digital gap would be our main problem.  During in-person styling sessions, stylists could access more views of the client, but on the screen, how could we do this?   Our client, Serena is a high-power professional.  She's on-the-go, so her mobile app will need to keep up.  We decided to have a chat function that could transition easily between style boards and texts.  We also included more information in stylist and client profiles to facilitate understanding between individuals.

User Flow - We decided the user flow for, our persona stylist Blair.  She would receive notifications from her phone, letting her know she had a new client.

User Flow - We decided the user flow for, our persona stylist Blair.  She would receive notifications from her phone, letting her know she had a new client.

Whiteboarding - After discussing the user flow, we sketched ideas to tackle the challenges we'd discovered.  One challenge was: how would the stylist and client communicate?  We drew different ideas, discussed, and drew some more ideas.

Whiteboarding - After discussing the user flow, we sketched ideas to tackle the challenges we'd discovered.  One challenge was: how would the stylist and client communicate?  We drew different ideas, discussed, and drew some more ideas.

Communication - We discussed different user interfaces for the stylist/client communication.  One idea had the chat/texting below while the visuals sat on top.  Our final prototype features the split screen, allowing users to see chat and clothing items together.

Communication - We discussed different user interfaces for the stylist/client communication.  One idea had the chat/texting below while the visuals sat on top.  Our final prototype features the split screen, allowing users to see chat and clothing items together.


pink-feather

Build, Test & Iterate

We started with a paper prototype, moved to a digital mock-up, and finally a clickable prototype.  Our main concern was the style board learning curve.  It's a great way to collaborate only if people know what to do.  With each testing, we added explanations to different sections i.e. the heart icon direction.  We changed interaction aspects to make them more intuitive.

Digital Wireframes - We created digital wireframes as the quick skeleton for our design.  We figured out navigation issues before making the mock-up.

Digital Wireframes - We created digital wireframes as the quick skeleton for our design.  We figured out navigation issues before making the mock-up.

Style Board Explanation - After several rounds of user testing, we noticed most people getting stuck on the style board.  We added help text when the style board first appears.

Style Board Explanation - After several rounds of user testing, we noticed most people getting stuck on the style board.  We added help text when the style board first appears.

Heart Explanation  - The little hovering instruction teaches people how to move the image over to their style board.  It's supposed to bounce to draw attention.

Heart Explanation  - The little hovering instruction teaches people how to move the image over to their style board.  It's supposed to bounce to draw attention.