Introduction
Our Client - OpenSponsorship connects brands to 8000 athletes🏃♂️ for authentic, data-driven marketing campaigns. The company aims to get more athletes and agents to sign up through the website.
UIUX Team - In this project, two UX designers and I (Janelle) worked together to redesign the current website to make a delightful and stressless sign-up process. The team was small, and we worked in an agile manner by updating the current sign-up flows from user research and testing.
My Role
UX Design
User research
Design handoff
Corporation: 3 UX Designers, 1 CTO, 1 CEO, 1 Data Analyst
Scope
Problem Framing
Redesign
User testing / Validation
Implementation (iOS & Android)
Company
Timeline ⌛
3/21/2021 - 4/11/2021
(Four weeks)
The Challenge
Redesign the current sign-up current flows and profile page to make the registration process quicker and easier for athletes to successfully complete, but still, let the company get the most essential user information.
Find a balance between having a more succinct signup flow and also letting users answer as many critical questions as possible.
Problems
60% high abandonment rates with low conversion.
5 mins Sign-up process was too overwhelming.
35% Only 35% of users signed up successfully.
Problems
Reduce the amount of information required for registration.
Shorten the amount of time it takes to complete registration
Identify friction points that cause abandonment and frustration.
Outcome
Evaluated the current flow
We analyzed the statistics on current sign-up flow which includes the average time users spent, bounce rate, and exit rate.
We analyzed the current version of the website by conducting user testings and research.
Understood business goals
We satisfied users without affecting the company’s profitability and needs.
Get more users to register successfully
We improved the registration process with a stressfulness & efficient user experience.
Design Process
Heuristic Evaluation
Current website: https://opensponsorship.com/
Severity Rating
0 = I don't agree that this is a usability problem at all
1 = Cosmetic problem only: fix if time is available
2 = Minor usability problem: fixing this should be given low priority
3 = Major usability problem: important to fix, given high priority
4 = Usability catastrophe: fix this before the product can be released
Visibility of System Status
1. Default “ I am a Brand Agency” with confusing instructions about “work email”.
2. “Get Started” button does nothing when clicked during the sign-up process.
3. Site doesn’t support “Amateur” level athletes at this time.
4. No “Back” function that doesn’t let the user go back to a previous step if they made a mistake or need to re-enter information.
5. Input fields only show an error state but don’t confirm when something is entered correctly.
Recommendation
1. Let users choose who they are, instead of the default.
2. Eliminate this button to avoid confusion.
3. Eliminate the “Amateur” level until it is supported.
4. Add a “Back” function to allow users to fix any mistakes or re-enter information.
5. Add a confirmation state of green to let users know they are entering info correctly.
Severity
3 = Major usability problem: important to fix, given high priority.
Match between system and the real world
1. Avoid using Jargon like “OAUTH”
2. Too few lifestyle categories without flexibility. The four categories with icons here do not make sense.
Recommendation
1. Change to different words which most people understand.
2. Too few lifestyle categories without flexibility. The four categories here do not make sense.
Severity
2 = Minor usability problem: fixing this should be given low priority
User control and freedom
1. No way to go back or exit after picking the “Amateur” level, which is not supported.
2. No way to go back and re-read a step during the instructions section of the onboarding and sign-up process.
Recommendation
1. Add a back button.
Severity
3 = Major usability problem: important to fix, given high priority.
Consistency and standards
1. Inconsistent input fields. Some use auto-populate to fill for you while others do not. Active states on input fields vary.
2. Overuse of asterisks with different meanings.
3. Not every social media has all three buttons “Connect”, “OAUTH” & “Verify”.
4. Call to action buttons alternate between colors.
Recommendation
1. Make input fields consistent throughout the whole sign-up process.
2. Make the use of the asterisk more consistent by assigning only one function.
3. Make the button consistent for all social media.
4. Make button status consistent all the time.
Severity
3 = Major usability problem: important to fix, given high priority.
Error prevention
1. No confirmation indicator if the social media account was connected successfully.
Recommendation
1. Green confirmation check to let users know this was done successfully.
Severity
3 = Major usability problem: important to fix, given high priority.
Current Flow User Testing
Users’ pain points:
To understand users' pain points better, I conducted user testings on the current website. I had users to sign up as an athlete because I want to know the pages they felt confused, and the average time they spent on sign-up flows.
When the users completed the registration, they want to browse the product before entering all the information.
Users did not know if they connected their social media successfully or not, and why they need to connect their social media.
When users got stuck on specific steps, there is no immediate help.
Because of the number of steps required to register, users want to give up.
Users’ quotes:
“There’s too many steps, I want to give up.”
“How I know my social media account was connected successfully?”
“I don’t want to short sell myself. I don’t
know what price to set for me.”
“I’d rather check out the product before committing to entering all my information.”
Problem Statement
Based on the research and testings, the problems are further defined as follows:
How might we create a seamless sign-up process to encourage users to register successfully?
How might we help users track and edit their profiles easily and efficiently?
Solutions
Version 1
How do we achieve the above goals?
Reduced all the unnecessary steps to create an efficient and seamless experience.
We deleted the on-boarding sections and keep the redesign registration process only had two sections which are sign-up and profile.
How do we make changes based on the company’s feedback?
The CEO said the email information is really important for the company, so they want only email sign-up.
2 + 3. Social media connection is another essential part in which the pricing of athletes is all based on the number of followers.
Final Design
Stressless and Seamless Sign-up Experience
The final version of the sign-up process allows users to sign up quickly and easily; at the same time, the company gets the most important information they want which are social media connections and email.
Therefore, users get a chance to check out the product before they enter more detailed personal information.
We satisfied users without affecting the company’s profitability and needs.
Step 1. In this final version of the sign-up flow, we reduced the confusing defaults (users could choose who they are).
Step 2. We have users sign up by their name and email based on the company’s preference.
Step 3. This updated version lets users connect their social media in the early sign-up flow.
Step 4. Based on the number of followers they have, we recommend the average pricing on the market for them. So people won’t worry they may short-sell themselves.
An Intuitive and Effective Profile
The final version of the profile page is intuitive and effective. Users can see the completion of their profile at a glance and tap on the pencil icon to modify their profile.
Outcome from User Testings
Styleguide
What’s Next?
Collaboration
This was my first experience working on a real-world project and it taught me a lot about collaboration. Establishing roles and a shared understanding of the problem helped us work more efficiently and the different perspectives each member brought to the table helped us discover better solutions.
Balance
It's my pleasure to work with OpenSponsorship. Working on this project has been a fun and great experience. I found out the way to satisfy users without affecting the profitability of the product was to understand both of their needs. My role is to maximize the company's profits while making the user experience enjoyable.
Communication
One of the most important aspects of effective collaboration is communication. Bouncing ideas of each other and frequent group critiques helped us stay on the same page. Also being able to effectively communicate our ideas with each other and the stakeholders allowed us to stay aligned and achieve our shared vision.
Next Steps
The next steps for this project would be to collect more users' data to see more users' behaviors through the website and keep optimizing. Besides, how to make agents sign-up and control their clients easily would be the next task.