Chauncey Harlan Portfolio

Designing A Paw-Some Sign-up Process

During the Summer Cohort for Code Louisville Program in 2022, my team was faced with a challenge for Cat-tastic, a fictional social media app for cat enthusiasts to create and share cat-related content. Despite being downloaded by users, the sign-up process was not being completed. We were given three weeks to find a solution to this problem.

Collaborative Design Process

Competitive Analysis: We analyzed existing successful apps and their sign up processes to develop a foundation for our own process.
User Research: We conducted surveys to understand the feelings and behaviors of young user aged 18-35, to figure out what their challenges were when signing up for new services.
Empathy Mapping: Based on our user research, we developed empathy maps to help us understand our target audience's needs, goals, and emotions.

My Role

User Flow: Developed a user flow to visualize how our target audience could quickly and efficiently get signed up.
Wire frames: Created wire frames to prototype the app's design and structure.
Prototyping: Created both low-fidelity and high-fidelity prototypes to test and refine the app's design and features.
Testing: Showed low fidelity screens to individuals within our target age group to gauge how close we were to our desired outcome, getting more users to sign up.

Who

Our target users were millennials and Gen Z cat lovers who wanted to quickly start creating, viewing, and sharing cat-related content. They found sign-up forms that required too much information and had too many steps to be cumbersome and time-consuming.

The Challenge

According to our stakeholders, users were beginning the sign up process for app, but only 30% were completing the process. Our biggest challenge was addressing the low completion rates of the previous sign-up process without any prior screens available to analyze. This meant that we had to rely solely on best practices for sign-ups and qualitative data from user research to find a solution. Additionally, we had a tight deadline and limited resources, which meant that we had to work quickly and efficiently.

Discovery: Let's Look at the Competition

Team looked at sign up processes that were effective for popular social networks using competitor analysis and studying expert UX insights

After defining the problem statement, to align the team, we started by studying the sign-up processes of other competitive social media apps. By examining their app screens, we noticed that the majority of these apps offered social media sign-up buttons for a quick and easy sign-up experience. On the other hand, when these apps did not have social media sign-up buttons, they had no more than a few pages with minimal input fields and incorporated a strong password indicator for data protection. They also offered options for verification such as verify by phone or email. To add, we turned to well-respected UX organizations such as NNG to study best practices for sign-ups.

Learning Lesson Note

During the process of looking at other social media apps and gathering user data, the team became bogged down a little with the unimportant details. Valuable time was lost due to thinking about the total app experience rather than our core focus, the sign up process. We felt that we had to create certain deliverables to complete a design process rather just using the UX tools we actually needed. Journey maps and user personas that get too deep into irrelevant information don't add any value or get you closer to the solution, which was our issue. We should have asked ourselves why we were doing it rather than just the what. Eventually, we were able to gather and refocus on our goal.

How do users feel about sign-ups?

Due to limited time, the team used quantitative data from a survey to gather insights on our users' feelings about sign-ups. The data revealed that users found sign-up processes often too lengthy, required too much information, and had too many steps involved. This was in stark contrast to their main goal for signing up for a social media app - to quickly start creating, viewing, and sharing content.

Empathy Map

By analyzing user survey data and creating an empathy map, the team was able to generate a list of general concepts and design a user-centered solution that addressed the needs and challenges of the target users.

How can we solve this problem? Utilizing all of our insights gathered during the discovery phase, we generated some general concepts for our sign up process and the reasoning behind them. Below is the list I compiled.

Sign up/login with other accounts Quick and easy so certain users don’t have to waste time with a conventional sign up process
Short descriptive call to action to display the value of signing up (feel of value proposition depends on the brand, ex. witty, fun, etc.) Informs the user why they should sign up in the first place, how the app gives value
Need 2 to 3 input fields Any other inputs such username could possibly be collected after the initial steps of onboarding allowing for a quick, streamlined process.
Hide/display password option For user privacy purposes to prevent password interception.
Validate instantly after user inputs email and password with clear error indicators
Let the user know right away if they input information correctly or show clearly what went wrong so that it can be corrected.
Verify account later option but restrict access to certain features.
Caps lock indication Users should know immediately if the caps lock is engaged, which could lead to frustrations and dropouts.
Show password requirements clearly to the user Users should know what is expected and required before entering their password choice to limit confusion.
If using multiple steps, have indicators on how long the process is and where the user is in the process. Helps indicate to users how long the process will take without guessing which can lead to dropouts.

Going with the flow

Team aligns social network sign-in process with familiar user experiences based on target user feedback

We each created our own user flows based on the ideas generated during the discovery phase. We then compared and combined the results to arrive at a shared understanding of the design. I also created a wire frame, which I showed to users within our target age group to gather feedback. I attribute the generally positive feedback to aligning the sign-in process format with that of other familiar social network applications and not reinventing the wheel here.

Putting it all together

Individually designed a high fidelity user interface by creating a familiar and user-centered solution with detailed design rationale notes

After creating the wire frame and testing, I set out to design my own take on a high fidelity user interface. As stated before, I wanted to ensure that the design was familiar to potential users. I used my low fidelity wire frame as a guide throughout the design process. I am also aware the solution may not be perfect and may need further testing. Given the short time frame, this is what I was able to come with. I made sure to keep detailed design rational notes throughout the process. The final result is showcased below with said notes.

Obvious sign up button for new users
Quick, simple flow with little distractions
Obvious page titles to let the user know what their doing and what is expected.
Friendly, cheerful, warm gradient synonymous with what a fun, quirky vibe a social media platform would want to project.
Password requirement section to help guide user to creating secure, effective password
Social media logins as the first option front and center as most users according to the research data utilize these elements the most for sign ups.
Ability to hide and display password for security and in order to help the user see what they typed to confirm password choice
According to the survey research, a large percentage chose both email and phone for account verification they prefer which led me to include both options for which ever is easiest for the user
Verify later as an option that would have to be discussed more extensively from a business standpoint. For the user it eliminates friction in the sign up process

Reflections

Team delivers fast, efficient, and secure sign-up process aligned with user needs, despite limited information and testing constraints

In the end, our team was able to design a fast, efficient, and secure sign-up process that aligned with the needs and expectations of our target users. One aspect that I wish I could have done differently is to gather more information from the stakeholders regarding the previous sign-up process. Having a deeper understanding of the root cause of the high abandonment rate would have greatly impacted our solution. However, despite this limitation, my team and I were still able to effectively address the issue and deliver strong results.

Although we faced challenges with time constraints and limited testing, we were able to deliver a minimal viable solution that received positive feedback from individuals among our target group, our program mentors, and fellow cohort members. This project taught us the importance of empathy, collaboration, and user-centered design, and we look forward to applying these skills in our future UX endeavors.