Sport Clips
Sport Clips is a hair salon franchise that provides haircuts for men in a unique sports-themed environment. The company is aiming to update its visual appearance and app experience.
App final designs
Timeframe:
6 sprints - 2w/each
Role:
Product Design - Visual Design
Team:
Two Senior product designers, Product designer, Associate Director, Dev team, Account manager, Delivery manager.
Role
My role involved driving visual design explorations, creating home and store locator features, supporting waiting experience feature design, and delivering a design library for the account.
Business goals
Based on Sport Clips app (at the time), previous research that included ethnographic research, user interviews, and competitor analysis, the team was able to identify different business goals:
Proccess
We worked quickly and efficiently using the agile methodology. Our sprints were carefully designed to include daily collaboration sessions, mid-sprint check-ins with the client, and demos at the end of each sprint.
Visual Design
Two sprints
We went through several iterations, and the ones shown here are some of the ones I worked on and presented to the client. Ultimately, we incorporated feedback from both internal and client sources to develop the visual language. This was a highly collaborative and intense process.
Initial Visual design explorations
Challenges
- Multiple stakeholders giving feedback at different times can cause misdirection, delays, and excessive back-and-forth.
- The company lacks a clear brand guideline and their internal design team focuses on marketing, resulting in several vague guidelines.
- This project required visual design improvements within a limited budget. Determining feasibility was very challenging.
- Manage feedback to stay on track with the established timeline and maintain high quality.
1st concept:
This modern, minimal, and elegant approach takes inspiration from the actual experience inside Sport Clips Stores. It also aims to have a sporty feel by using images as support.
2nd concept:
I attempted to move away from using straight lines and instead introduced diagonals to add movement to the user interface. By incorporating the in-store experience and sport-related imagery, along with angles and high contrast, I aimed to create a more classic sports visual.
3rd exploration
The client requested to use an "in-progress" marketing campaign as a starting point for one of the explorations. Our inputs included incorporating more red and concepts from the marketing campaign. However, this posed a challenge since these campaigns are temporary, and adapting their style for branding purposes could be risky. Our goal was to strike a balance that would result in a more sophisticated and practical user interface.
Refinements
After presenting and iterating over the course of 3 weeks with the clients, we had green light to continue into sprinting and adding features. This phase refined the visual design and we were able to finally arrive to a design language that represented sport clips as a unique brand and adding brand moment in which some of these ongoing marketing campaign could be added without sacrificing the overall language. Eg: Forms in Web experience, or Splash screen.
Part of the playground file in FIgma
Home
Two sprints
The first feature I had to work on was building the home page of the app. The goal of the home page was to surface the most convenient stores for the user. Think of it as shortcuts within the app that eliminate the need to search for nearby stores on the map.
To start, I gathered more information from the research and developed various high-fidelity wireframes for our initial review.
Evolution of the visual language and UX over time
Toggle bar
The client insisted on having a toggle bar at the top to switch between stores based on convenience. This presented a significant challenge, especially when two or three stores were the same. Despite our strong suggestion to remove it for the MVP, the client persisted, and we had to find ways to work around it.
Toggle states
Home flow example
Store Locator
Two sprints
If Home does not provide the most convenient store, users can find a store using the Store Locator. This page is similar to well-known and established patterns such as Apple Maps and Google Maps.
We faced some technological constraints, which required me to adapt certain interactions to our specific case. We had multiple conversations with developers to achieve our goal of creating a familiar UI without reinventing the wheel by working around the technological issues.
Store Locator App final designs
Cards States
It was crucial to communicate the different store statuses effectively. To achieve this, we worked with developers to incorporate all the states that exist in a third-party app used by Sport Clips in their current app. One of the major challenges was to present this information in an intuitive manner to users, despite the limited space available. Additionally, the solution needed to be consistent with the home card and store detail page.
Store locator structure (for hand off)
Waiting Experience
Three sprints
The Waiting Experience project was a collaboration with another product designer. I led the initial visual exploration the final sprint and the hand-off.
The Waiting Experience is the time between joining the lineup and leaving the store. This was the most important part of the app for the client to improve. The idea was to introduce a tracker to inform users of their position in the lineup.
Some initial explorations
The first step in the process was to identify a suitable method for visualizing the various stages. The client expressed interest in something similar to the Domino's Pizza tracker. However, I wanted to take it a step further and propose a unique tracker for SC, rather than a generic one.
The initial exploration aimed to strike a balance with their brand color, which was a very intense shade of red. Without careful consideration, the color could easily become overwhelming and detract from the content.
We considered adding a sports-related fact to create an engaging brand moment, but we decided against it since users would barely interact with this screen. Adding this feature would only create unnecessary noise and complicate the interface.
Initial Waiting Experience visual design explorations
Of course, there were several technical blocks we had to work around. But after a lot of back and forth, we settled on a final direction. As part of the design direction, I explored different ways to represent different states while trying to stay within the brand guidelines.
I researched best-in-class methods and listened to client feedback. We ended up with the concept of a stopwatch. Once we settled on the different states and analyzed the implications for the user (work done by my coworker), we moved on to refinements and approval.
Waiting Experience phases
Development Hand off
At the end of each sprint
I prioritize communication with the development team by getting to know them personally and having one-on-one conversations whenever possible. This helps me understand their personalities, interests, and working styles, and establish good rapport. This is crucial for a successful design handoff and iteration before and during VQA.
For this project, we had three calls per week, and sometimes more, depending on the issue. I make sure to annotate my designs in detail and allocate time for it when planning sprints.
Home page flows and annotations
Access card anatomy wireframe
Store locator
Final thoughts
This has been one of the most intense projects I've had to work on. Some clients are more demanding, and we need to be able to deal with it. It is a group effort, and this team was very supportive and always had my back during difficult interactions. Working alone is not an option for me. I want to be part of a team that creates better products together, even when the client decides to go in a different direction. At least we tried, and we are proud of our work. I love these dynamics because they teach me a lot about human nature, the power of stories, and ultimately the value of design.
hello@dianapadron.com - 2023