ROLE
Product Designer, Front-end Developer
DESIGN ACTIVITIES
TOOLS
Google Docs, Survey Monkey, Sketch, Marvel, Xcode
YEAR
2016
Project overview.
Tangled is a mobile app that aims to help users find the right stylist for their particular traits and style. As the Product Designer in the team, I was tasked with creating a more concise and personalized experience than the current process, presenting users with better, more relevant recommendations to allow them to make more informed decisions and increase their satisfaction.
Challenges.
The main challenge we faced was how can we shortened the beauty search experience while providing trust-worthy recommendations. People looking for beauty services, especially women, are very specific about what they want. They spend hours researching professionals, their skills, and their work until they can arrive at a decision. To find all of this information, they need to visit many websites and profiles in yelp and dig in the reviews to identify the good hairdressers.
Another challenge was that we were creating a brand new solution. Not knowing what this solution would look like, or not having an existing design to benchmark from, meant we really needed to understand the industry and the customer to develop something innovative and useful.
Another significant challenge was that the product would cater to 2 very different market segments: the beauty professionals & the customer. For the solution to succeed, it needed to solve critical problems for both segments, create a sense of community and provide accurate data.
Understanding the company.
As mentioned before, one of our biggest concerns was our lack of historical data, or an existing solution, to benchmark our design on. So we set out to thoroughly research the beauty industry. After reading many articles and asking friends about their steps to find a hairstylist, we clearly outlined the current process to find a hairstylist, identifying the common pitfalls of the same and potential areas of improvement.
In addition, we tested other existing solutions that tackle similar problems, and after reading reviews of the solutions and testing them ourselves, we noted their advantages and disadvantages.
Other information we gathered was: potential technology we could use and pre-identify a rough idea of who our users would be. We drafted our first personas, which would later be refined with customer input and feedback.
All of this information helped us better shape our objective:
Create the most personalized digital beauty experience through a solution that promotes engagement and provides accurate, meaningful recommendations for the customer.
Processes: Market research, interviews, competitive analysis, requirements gathering
Learning from the customer.
To get ourselves in the mind of the customer we approached both our potential segments: the user and the professional.
On the customer side, we reached out to beauty communities online (Reddit, Facebook, YouTube), engaging directly or through surveys to understand their critical needs and identify who is most affected by this problem. In addition, to better assess the customer’s reaction we carried out ad-hoc interviews at a family/youth event in Toronto which attracted hundreds of attendants. After hours of talking to people, we found that most of them wanted more relevant recommendations which made them feel more certain about making a decision, and most use social media and word of mouth to find recommendations.
On the professional side, we interviewed beauty professionals from different types of businesses, positions, and expertise. We found that most managers were resistant to the idea of their artists getting a spotlight, but the artists were already using social media to promote themselves. An interesting insight we obtained is that sometimes customers come with unrealistic expectations in terms of price and length of service, and this is detrimental to their satisfaction.
Processes: interviews, surveys, requirements gathering
Defining the problem.
Analyzing the data from our research, allowed me to create polished personas to keep the design process focused. I also crafted the customer journey through the current process to identify areas of improvement and clearly define the problem statement:
How might we help young professionals quickly find the best stylist for their traits, while providing accurate matches promote loyalty and reduce frustration?
Processes: Problem statement definition, personas, customer journey
Ideating the solution.
Going back to our initial research, we mapped out the current process, and identified key problem areas and improvements to reduce the task time. One of the main pain points we tackled was that users spend ~2 hours switching between review sites and social media, trying to consolidate all the information they need to make a good decision. By bringing in all the relevant details (which we identified during our customer discovery stage) to one place, making these readily-available and searchable, reduced the task time by 60%.
Then, we evaluated our competitors, different technologies and beauty apps that customers use to find recommendations (Instagram, Pinterest, Reddit, Yelp, StyleSeat, Vagaro) and brainstormed as a team for possible solutions to implement the new workflow we created. At this stage of the process, the more people involved in the process, the merrier, and creativity is encouraged, leaving limitations for later. We came up over 20 options that could potentially solve the problem, and using a decision matrix chose the top 3 concepts, which we refined until we arrived to our optimal solution:
A mobile platform and an algorithm.
We found that using existing platforms wouldn’t allow us to provide the level of personalization desired, therefore we decided to start from scratch with an app that would provide readily-available, accurate data through a social learning algorithm. That way personalizing the key parts of the experience to the user, like sorting results and reviews by how similar the person in the picture is to the user, and how well the professional usually performs on people with the traits of the user.
Once a solution was chosen, we defined several use cases, but decided to focus on the process of searching and finding a stylist that is a good fit for the customer. After narrowing down the user stories and main workflows, we carried out a new ideation round, but this time with focus on what the experience and interface would look like. For this we did some sketching which we then refined into a medium fidelity prototype using Balsamiq, wireframed using Sketch and tested using a Marvel prototype (InVision alternative).
Processes: Storyboards, Brainstorming, Conceptual Design, Paper Prototypes, Wireframes, Medium-fidelity Prototypes
Testing the prototype #1.
We tested the first prototype with 20 people, which helped us identify main design issues, such as some of the navigation icons were confusing, as well as some of the terminology in the app was not consistent with that of our customers. Another interesting insight, was that users were more interested in seeing pictures of work than a list of professionals when looking for a potential service provider. Currently the workflow is find a salon > find a stylist > find pictures of their work. But by reversing this process and allowing them to see their work first help decrease the process a lot, and make “better” decision.
One challenge we faced while testing was the subjectivity of assessing accuracy and relevancy of the results. We simplified this process by creating a post-test questionnaire to assess in a scale form, their satisfaction with the results from the search, and once they found a “suitable” stylist, how confident were they that the service would satisfy them.
Processes: User testing, Questionnaires
Testing the prototype #2.
With the information gathered from our first test we revised our design, this time creating mockups and a high-fidelity prototype that would better convey the experience to our users. We tested this prototype with 16 more users, this time focusing more on the ability to complete a task on the app, considering that the interactions were more realistic.
Processes: High-fidelity Prototypes, Usability testing, Questionnaires, Mockups
Build the product.
For this project I also had the role of Front-end Developer, for which I was tasked to developed the interfaces of the mobile application using Xcode. After several iterations on the design, having clear wireframes and a polished design, it was easy to concentrate on the development of the app, which was completed under 2 months.
With this functional prototype, some of the interactions implemented, which mostly followed current design patterns (swipe to change tabs, sticky toolbars and slide right to go back to previous page) were tested and we identified some conflicting interactions which were then fixed.
Final product and takeaways.
The final product ended up being praised for it’s design and intuitiveness during a demo day that lasted 4 hours, in which we were able to convert 75% of our visitors.
Completing this project was a very rewarding experience, because I was able to own and execute a full design process on a product that I felt passionate about.
Being a co-founder not only helped me get out of my comfort zone and tackle challenges I had never done before, like ad-hoc interviews on the street, but I had the freedom to test many tools, methodologies, and ideas which develop my skills set and allowed me to identify my strengths and areas of improvement.
If I could do it all over again, I would involve the user even more throughout the design process and focus on being more Agile, completing smaller chunks of work faster.
