Role
CoachNow brought me on as their Lead UI/UX Designer to conduct user research, redesign, and improve experiences for their remote coaching communication apps.
Challenge
The legacy product had no clear onboarding, lots of old support guides and tutorials, and unclear navigation and processes. Coaches complained about poor media uploading, clunky/difficult interfaces, and feature confusion while connecting with their athletes/clients, leading to poor reviews and high abandon rates.
Process
After defining our KPI's, conducting legacy audits, and running feedback loops, my team and I met with coaches to understand their needs, mindset, and behaviors, while drawing themes from their issues. We then ideated solutions via design sprints and brainstorming, prototyped against further usability testing and beta groups, and rebranded and launched CoachNow for continual improvement.
Goals
User: Design and develop a remote communication app that eases processes, fosters teachable moments, and centralizes materials for coaches.
Business: Continuosly hit our KPI's, grow our premium offering subscription rates, and generate athlete/client engagement for coaches.
| KPI's | 2017 | 2019 |
|---|---|---|
| User base | 150,000 | 310,000 |
| Net Promoter Score | 40 | 51.8 |
| Posts per month | 20 | 52 |
| Renewal rate | 73% | 90% |
| YoY revenue growth | 10% | 33% |
Timeline
2 Years, June 2017 - April 2019
"The ability to communicate across multiple platforms is invaluable. As a coach, we need to be smart and efficient in order to streamline communication, and CoachNow provides that and more."
Matt King, Executive Director at Arizona Basketball Coaches Association
Define Product Roadmap and Vision
Vision Boards and KPI's
All teams converged on our vision for CoachNow. We each filled out product vision boards, discussed and adjusted them, and came to a consensus on KPI's to measure:
- User base
- Net Promoter Score
- Posts per coach per month
- Annual renewal rate
- YoY revenue growth
Goals
User: Design and develop a remote communication app that eases processes, fosters teachable moments, and centralizes materials for coaches.
Business: Continuosly hit our KPI's, grow our premium offering subscription rates, and generate athlete/client engagement for coaches.
Our Hypothesis
We then put together a hypothesis statement:
We believe better communication and teachable moments between coaches and athletes can be achieved by providing essential tools associated with "learning" and "teaching" while centralizing training information for easier access and reference.
Audit and Test Existing Products
Visual Auditing and Surveys
We immediately set to work on auditing the existing mobile apps. I sent out user surveys for specific UX and feature feedback loops, breaking down the existing iOS and Android design and noting indifferences or fallbacks, and forming patterns to act on.
Insight and Action Items
I got great insight that debunked previous notions and initiatives, saving us a lot of time by narrowing the scope. We compiled this data, drew some patterns and association, and rewiewed:
- Instead of creating more features to handle different use cases, create just 1 feature that generates the same outcomes
- Rethink the current apps navigation, information architecture, and UX to improve accessibility and clarity
- Implement tracking to objectify KPIs and form data-driven decisions
- Focus on improving the communication UX in the long term vs. prescribing more tools/hot fixes in the short term
- Streamline media and video analysis capturing for mobile
Visual audit by section/flow, noting current inconsistencies, features and functionality.
Learn and Understand from Coaches
Interviews, Observations, and Empathy Maps
I started exploring various ways of gathering information about our users. From many interviews and focus groups with coaches, observations, and empathy mapping, I learned a lot about the coaching process.
Persona
This information and insight led me to craft our persona:
Demographic
- People who chose coaching as a career
- Trains 1-on-1 and/or with teams
- Wears multiple hats and performs jobs outside of coaching
Needs
- Better work/life balance
- Being more time efficient with coaching
- Clear, uncluttered channels for communication and follow-ups
- Improved athlete retention and encouraged feedback
- Easier ways for getting parents involved
Behaviors
- Uses multiple tools for sharing curated content
- Texts/call athletes frequently for follow-ups
- Relies heavily on hands-free onboarding for new athletes
- Creates rigid schedules for various functions and meetings
- Works in person and remotely equally
Define Their Problems
Themes
I put together a dashboard centralizing all the problems noted from our audit, interviews, and feedback. As the process went on, themes began to emerge:
- The app had no onboarding and users would get dumped into a blank environment with no helpful context
- Coaches couldn't avoid using multiple tools and just needed them be intuitive, centralized, and seamless for communicating with athletes/clients so they can focus on preparing materials
- There were many confusing features that either did the same thing but in different ways, weren't used as intended, or not used at all
- Users complained the app was hard to learn and difficult to use, especially in the field
- Users got bombarded with too many notifications and they have to sort through them to find what they actually care about
- The app had issues with uploading and sharing large media files and telestrations. There was a large quality loss and coaches would lose curated content if it crashed
Come Up with Solutions
Converging
I went back in with the team and started brainstorming and discussing ideas. After design sprinting, we came to the realization that the mobile app was trying to do far too much.
Realization
Coaches only used the app to capture and share media with athletes to review later. This made sense because coaches had little time to use the app in the field.
Ideas and Solutions
This immediately gave us a good path to follow and led to a series of solutions:
- Capturing media was crucial and we needed to remove unnecessary UI, improve upload quality, and fix crashing
- Make posting, liking, and sharing content very seamless and obvious
- Improve navigation so features are easily accessed
- Merge various and similar features into one so coaches didn't have to choose or figure out which was best for their use case
- Improve onboarding so coaches can immediately invite athletes and start posting
Prototype and Design System
Approach
I put together a strategy for our UX roadmap and decided to start with the capturing/posting UX and work our way out from there. We'd then improve onboarding and apply our new and evolving design system.
View Initial Strategy DocInformation Architecture, Sketches, and Wireframes
We built information architecture that laid out the apps navigation and features at a high level. This made sketching and wireframing much easier as we translated them into wireframes.
Form Design System
I then started building our design system. We wanted to use this system to break down designs into their most basic elements and use them to assemble views in various, but visually consistent ways. As I went a long, I documented everything.
View Design System SpecPrototypes
Using Adobe XD and shared libraries with components, I started designing views and flows in high fidelity and sharing them with users and stakeholders for review and iterations.
View Mobile Prototype Example
Version 1 of iOS primary flows.
User Testing and Iterations
Beta Releases and Feedback
Led weekly recaps with stakeholders and users to review updated prototypes and collect feedback. Once the app went into development, we released a beta for field testing. Results:
- Capturing and posting was much simpler to use and understand
- Still need the ability to bulk upload media and schedule posts
- Some features are still confusing, consider changing or removing them
- Notifications would be better in bulk instead of real-time
- The rebrand to "CoachNow" made more sense for the app
Rolling NPS
After repeating this process, we setup rolling NPS metrics to track our user outcomes and satisfaction. Over an 8 month span, UX improved and KPI's were beginning to be met.
Improving
Approaching launch, we continuously responded to feedback and created more themes to act on. Overall, having solid feedback loops in place made a significant impact on user outcomes and cut down on deployment times.
The Outcome
After we launched CoachNow in the Spring of 2018, we continued to address feedback and iterated. It received great reviews from tenured coaches and became a reliable and replacement tool for academies.
Prior to my departure in 2019, I put together a "rocket ship" mobile prototype for further user testing and a lean product brief for handoff.
| KPI's | 2017 | 2019 |
|---|---|---|
| User base | 150,000 | 310,000 |
| Net Promoter Score | 40 | 51.8 |
| Posts per month | 20 | 52 |
| Renewal rate | 73% | 90% |
| YoY revenue growth | 10% | 33% |
View on App Store
View on Google Play
Strategy and UX Roadmap
Introduction
After putting together our vision boards, establishing an hypothesis, and in parallel with working through our mobile app, we had considerations and decisions to make for another big piece: the web app. Like its mobile counterpart, it was in great need of user research, improved design, a better coding framework, and thorough testing.
Form Objectives and Roadmap
Since mobile apps took priority, web app required more of a lighter lift in the short term. It already performed basic product requirements, like posting content, inviting athletes, profile management, etc. and was essentially a pre-built MVP. We decided to put toghether a roadmap for working on web app in conjunction with mobile:
- Do a short term light design update for brand parity with marketing assets
- Audit and analyze current web app user behavior to set clearer KPIs and direction for web
- Use design thinking and sprints to uncover problems and solve for them
- Redesign, rebuild, and continuously release a more robust web app
Audit and Test Existing Product
Visual Auditing and Surveys
One of the first objectives on our roadmap was to audit the existing web app. Following the same process we did for mobile, we sent out user surveys for UX and feature feedback loops and broke down the existing design and structure for audit. Findings:
- Users had difficulty navigating various pages
- The Feed and TrainingSpace features were the most utilized by far
- Commenting on posts and uploading media were the two highest pinged events
- Only 15% of coaches used the web app at all, but 70% of athletes/clients did
- A surprising majority of coaches handle both 1-on-1 and team instruction
- Many commented that the app's design and aesthetic felt inconsistent or incomplete
Analyze and Action Items
We got great insight into the web app by listening to users right off the bat. It saved us a lot of time in the long run by focusing on the real issues at hand. After compiling this feedback and data, we started noticing some patterns to act on:
- Instead of creating more features to handle different use cases, create just 1 feature that generates the same outcomes
- Align the current apps navigation, design patterns, and UX with mobile for a consistent cross-platform experience
- Implement tracking to objectify KPIs and form data-driven decisions
- Focus on improving the communication UX in the long term vs. prescribing more tools/hot fixes in the short term
- Streamline posting, sharing, and interacting on web
Learn and Understand from Coaches
Interviews, Observations, and Empathy Maps
In parellel with the mobile app, we explored various ways of gathering more information about our persona. From many interviews and focus groups with coaches, empathy mapping, and Mixpanel behavioral metrics, I put together a clear snapshot of our target users:
Persona
This information and insight led me to craft our persona:
Demographic
- People who chose coaching as a career
- Trains 1-on-1 or with teams
- Wears multiple hats and performs many jobs outside of coaching
- Coaching as their job or looking to start their own practice/business
Needs
- Better work/life balance
- Being more time efficient with coaching
- Clear, uncluttered channels for communication and follow-ups
- Improved athlete retention and encouraged feedback
- Easier ways for getting parents involved
Behaviors
- Uses multiple online and analog tools for sharing curated content
- Texts/call athletes frequently for follow-ups
- Relies heavily on hands-free onboarding for new athletes
- Creates rigid schedules for various functions and meetings
- Works in person and remotely equally
Define Their Problems
Existing Problems and Needs
We then put together a dashboard centralizing all the problems noted from our audit, interviews, and past feedback. As the process went on, patterns began to emerge from the web app that validated our new theories and debunked old ones. One important thing we noted was users were experiencing issues similar to that of the mobile apps:
- Coaches couldn't avoid using multiple tools and just needed them be intuitive, centralized, and seamless for communicating with athletes/clients so they can focus on preparing materials
- The web app had a plethora of handy features for athlete and content organization, but were difficult to learn from lack of onboarding, strange naming convention, and burying in the UI
- The original navigation looked like it was on the right track to becoming a familiar sidebar platform experience, but fell off over time. Band-aid fixes, random UI redundancies, and inconsistent interaction sets caused obstruction
- While using the app, many coaches get bombarded with too many notifications and they have to sort through them to find what they actually care about. They wanted finite control of this and to have notifications come in bulk
- The app only supported uploading one media file at a time, causing headaches for a bulk of our users needing to upload many for faster processing
Come Up with Solutions
Converging and Realization
Having similar issues as mobile made is easy for us to quickly understand where user frustration and confusion came from with the web app. After discussing ideas and holding design sprints, we came to the conclusion that although web and mobile apps performed almost the same functions, coaches and athletes both used them in entirely different ways.
From tracking/retention data and feedback, most coaches, though a small amount of them on web app, mainly used it for creating and managing TrainingSpaces and inviting/responding to athletes. Most of the other features were largely ignored. Athletes also followed the same behavior, only logging in to review and respond to coaching content. Contrary to the mobile app, which was used sporatically during training sessions, the web app was used for longer durations of time after sessions were over and during off-hours.
Solutions and Focus
This immediately gave us a good path to follow and led to a series of objectives:
- Improve inviting and onboarding: Since athletes were the majority users of the web app, we wanted to make their experience joining as seamless as possible
- Consider renaming or removing unecessary features: There were 4 other features that all performed helpful actions for coaches to manage their TrainingSpace/Team content, but were built in a backwards and confusing way. This in combination of using confusing names led to almost no engagement
- Make posting, replying, and sharing more robust: The commenting and sharing functions were very basic and lacked many handy functions users would expect having in a social sharing platform
New Partnership and Prototype
SportsEngine
Around this time, we partnered with popular sports and team management platform SportsEngine, to bolster our userbase and help improve the web app experience for managing large rosters and teams. This was a good time to explore other coaching and inviting functions because the web app served as a promising platform for these types of tools.
View Product PageInformation Architecture, Sketches, and Wireframes
Forking off the mobile app information architecture, we started laying the ground work for improving the web app's inviting, onboarding, and new SportsEngine roster import UX. Using our inside-to-out approach, this touched other areas of the app for us to explore and make consistent over time.
Form Design System
Similarly to mobile app, I built our web design system, breaking down designs into their most basic elements and using them to assemble views in various, but visually consistent ways. As I went a long, I documented elements and why/where to use them:
- Principles and purpose: Why we are doing this and how it helps teams and users
- Design language: Typography, colors, spacing and imagery standards
- Components: Navigation bars, sidebars, segment bars, media viewers, post containers, dropdowns, fields, etc.
Prototypes
Using Adobe XD and shared libraries with these new design system components, I started designing views and flows in high fidelity and sharing them with users and stakeholders for review and iterations.
View Web Prototype Example
Version 1 of the Team creation and SportsEngine roster import flow.
User Testing and Iterations
Staging Updates and Feedback
Working closely with our teams and SportsEngine stakeholders, we iterated on the web app, particularly the inviting and Team/Space creation and management process. After an MVP was developed, we pushed the updates to our staging site for user testing with coaches and athletes. Results:
- Roster import was slow and took too many steps to complete
- Still need the ability to bulk upload media and schedule posts
- Engagement with secondary features was better but still low
- New Notification center is excellent
- Replying and liking comments became more popular
Rolling NPS and Satisfaction Scores
With each update we pushed to staging for review, we'd setup rolling NPS metrics and kept a close eye on satisfaction scores for our various outcomes. Over time, we noticed the new creation and roster UX was more adopted and NPS scores increased for our core feature set.
Improving
By responding to the feedback and designing/developing against them in real-time, we made significant strides in a shorter amount of time. After improving the UX and applying our new brand system, the web app felt like a completely new and revamped plaform.
The Outcome
We launched the CoachNow web app in the fall of 2018 and continued to learn from feedback to iterate. Prior to my departure from the company in 2019, we put together a "rocket ship" mobile prototype for further user testing and a lean product brief for handoff.
| KPI's | 2017 | 2019 |
|---|---|---|
| User base | 150,000 | 310,000 |
| Net Promoter Score | 40 | 51.8 |
| Posts per month | 20 | 52 |
| Renewal rate | 73% | 90% |
| YoY revenue growth | 10% | 33% |
Discovery and Roadmap
Kick Off and Meaning
We consulted with the original team to get a better sense of what went behind the orginal branding and why:
- The term "Edufii" came from "education" and "edification" to foster teachable moments
- The two "i's" symbolized two people coordinating and learning, coach and athlete
- Originally wanted the name to become a verb, like "Google it", but for sharing and improvement
Brand Roadmap
This helped point us in the right direction initially with the philosophy and meaning of the company. After settling on the name "CoachNow", we went to work drawing up meanings while keeping ourselves in line with best rebranding practices and outlines:
- Coach "now", not later
- Using multiple and familiar tools for coaching success
- Athlete progress is the job-to-be-done
- Coaching matters
- Achievement, fullfillment, and hitting milestones
Identity Doc and Auditing
I then put together an identity system doc that highlighted the brand's mission of coaching success and athlete progress, any data and research supporting our themes, some initial prototypes and ideas, and an audit of the existing brand system.
View Identity System DocDefine Design Language
Themes
While coming up with a new logo and mark, we started breaking down brand meaning into design themes to explore and experiment with. These would help lead us to the building blocks of our actual design language:
- Coaching symbolism and objects
- Athlete progress and forward movement
- Timely and responsive
- Multitasking and multiple hats
Testing
We wanted to converge with the team and stakeholders on what "coaching" meant to them to gain some perspective and test against these hypothetical themes. By sending out some Google Form surveys, we uncovered some great insight that pointed us in the right direction on a theme and solidified our brand's meaning.
Building Blocks
Using themes and feedback to drive design language decisions, we broke it down into building blocks:
- Primary palette: Bright orange/gradient and blue, indicating a new dawn and beginning
- Secondary palette: Green, purple, and yellow, indicating different coaching tools and approaches
- Shapes: Circular, indicating impact, focus, inclusiveness, and privacy
- Typography: Modern, sans-serif, bolder
- Iconography: Simplified coaching objects, rounded
- Imagery: Candid, athlete driven, and coaching inspired
Define Logo and Mark
Ideas
At first, we were really focusing on physical representation to define our brand, things like common coaching materials. After hundreds of sketches, multiple surveys, and thorough research, we ultimately went into a different direction: metaphorical. The athlete's progress and forward movement theme kept resurfacing after working through ideas and we felt this was the path to go down to visualize our logo and mark.
Sketches
My design team spent much time sketching and ironing out this aspect of coaching. We lived in grid paper, whiteboards, and Google Draw for quite a while before landing on strong candidates to proceed with. Things like athlete representation, medals and trophies, accomplishments, crossing the finish line, and other related metaphors were hashed out.
Digitize and Refine
We landed on three strong candidates after further iterations and direction changes. They all represented fullfillment, progress, movement, and impact althetes received from coaches and instructors alike.
Three final versions.
Format and Pressure Testing
Visual and Format Checks
We ran our finalists through a series of visual tests to see how well they'd scale and adapt in various formats. Anything from website headers, to app stores, to printed material, we shopped them in and shared them for consensus and feedback.
Final Surveys
Upon further review, all three logos looked good and scaled well into their various formats. Now it was time to send them out to stakeholders and a small subset of users for one last round of feedback. Results:
- Option 1 with the "running man" and "C"/"N" form was the clear favorite
- Option 2/3 didn't really convey the athlete as well as 1
- All options work well with the design language and typography
- The "C"/"N" form also reminded some users of a stopwatch and time metaphor
The Outcome
In retrospect, this rebrand effort took quite some time and slowly became a design-by-committee approach, which is always a difficult hurdle for designers to overcome in business. However, all the inspiration, definition, refinement, and iteration led to a promising brand, visualized and brought to life by graphic design, a marketing site, apps, landing pages, emails, print, and ad campaigns.
View SiteView Brand Guide
View Design System Spec
