• Impact
• Impact
Streamlining Sign-Up & Login for Trust and Scalability
Streamlining Sign-Up & Login for Trust and Scalability
Streamlining Sign-Up & Login for Trust and Scalability
Overview
Overview
As a UX Designer at Smart Twigs, a tech consulting company that partners with clients to continuously evolve their technology and adapt to changing business needs, I led the redesign of Redeemer — a Chrome extension and web experience that helps users earn cash back and rewards while shopping online.
Redeemer was brought to us by a husband-and-wife team after a frustrating experience with a previous design agency. The original extension was cluttered, difficult to navigate, and failed to provide a seamless shopping experience, leading to user frustration and decreased trust.
As a UX Designer at Smart Twigs, a tech consulting company that partners with clients to continuously evolve their technology and adapt to changing business needs, I led the redesign of Redeemer — a Chrome extension and web experience that helps users earn cash back and rewards while shopping online.
Redeemer was brought to us by a husband-and-wife team after a frustrating experience with a previous design agency. The original extension was cluttered, difficult to navigate, and failed to provide a seamless shopping experience, leading to user frustration and decreased trust.
Role & Timeline
UX UI Designer, Web design, Graphic Design, User Research, Prototyping & Testing,
July 2024 - December 2024
Role & Timeline
UX UI Designer, Web design, Graphic Design, User Research, Prototyping & Testing,
July 2024 - December 2024
My Team
Product managers
Lead Designer
Front/Back-end Developers
System Engineer
My Team
Product managers
Lead Designer
Front/Back-end Developers
System Engineer
Goal: As Redeemer expanded into a web application, one of our first priorities was to redesign the onboarding experience. Previously, users could only sign up and log in through the Chrome extension — a setup that limited flexibility and caused friction. Our business goal was to provide a seamless, secure, and scalable login and sign-up experience directly through the web app, ensuring a smoother entry point for new users and easier access for returning ones.
Goal: As Redeemer expanded into a web application, one of our first priorities was to redesign the onboarding experience. Previously, users could only sign up and log in through the Chrome extension — a setup that limited flexibility and caused friction. Our business goal was to provide a seamless, secure, and scalable login and sign-up experience directly through the web app, ensuring a smoother entry point for new users and easier access for returning ones.
Problem
Problem
Redeemer’s original login and sign-up flow was limited to email-based authentication through the Chrome extension. This not only created friction for new users but also raised trust concerns, as users were asked to provide credentials within an unfamiliar browser extension. The lack of alternative sign-in options further added to the drop-off rate. To address these issues, we aimed to shift authentication to the web app and introduce OAuth (e.g., Google login) to improve trust, convenience, and conversion.
Redeemer’s original login and sign-up flow was limited to email-based authentication through the Chrome extension. This not only created friction for new users but also raised trust concerns, as users were asked to provide credentials within an unfamiliar browser extension. The lack of alternative sign-in options further added to the drop-off rate. To address these issues, we aimed to shift authentication to the web app and introduce OAuth (e.g., Google login) to improve trust, convenience, and conversion.
Solution
Solution
To improve trust and streamline access, we introduced a dedicated web-based login and sign-up experience. This transition allowed users to authenticate outside of the extension in a familiar environment, and the integration of OAuth options like Google login made the process faster, more secure, and user-friendly.
To improve trust and streamline access, we introduced a dedicated web-based login and sign-up experience. This transition allowed users to authenticate outside of the extension in a familiar environment, and the integration of OAuth options like Google login made the process faster, more secure, and user-friendly.
Discovery & Research
Discovery & Research
Original Sign-In Flow
The original Sign up/Login process was done entirely through the chrome extension. From my initial reaction i can predict security concerns, which leads to more drop offs in registered accounts.
Original Sign-In Flow
The original Sign up/Login process was done entirely through the chrome extension. From my initial reaction i can predict security concerns, which leads to more drop offs in registered accounts.
Screen recording of original sign up/sign in method
User Research
User Research
To better understand user frustrations, I reviewed user feedback and past support tickets. A consistent pain point emerged: users disliked the outdated email/password login flow.
Lack of trust in extension-based login: Users were skeptical about entering login credentials directly into a Chrome extension. The process felt unfamiliar and insecure — especially since Redeemer involves financial data and rewards.
OAuth was underutilized: Although Google login was technically available in the old flow, many users didn’t notice it. It wasn’t prominently displayed or clearly communicated, leading users to default to email/password — even if they preferred otherwise.
Expectations shaped by other platforms: Users were accustomed to quick, one-click logins from apps like Honey, Rakuten, and even Google itself. They expected Redeemer to offer the same frictionless experience.
This reinforced the need to modernize the sign-in experience and align with user expectations by integrating OAuth for ease, speed, and trust.
To better understand user frustrations, I reviewed user feedback and past support tickets. A consistent pain point emerged: users disliked the outdated email/password login flow.
Lack of trust in extension-based login: Users were skeptical about entering login credentials directly into a Chrome extension. The process felt unfamiliar and insecure — especially since Redeemer involves financial data and rewards.
OAuth was underutilized: Although Google login was technically available in the old flow, many users didn’t notice it. It wasn’t prominently displayed or clearly communicated, leading users to default to email/password — even if they preferred otherwise.
Expectations shaped by other platforms: Users were accustomed to quick, one-click logins from apps like Honey, Rakuten, and even Google itself. They expected Redeemer to offer the same frictionless experience.
This reinforced the need to modernize the sign-in experience and align with user expectations by integrating OAuth for ease, speed, and trust.
Competitive analysis
Competitive analysis
To better understand modern sign-up and login standards, I studied how competitors and adjacent platforms handle authentication. This helped identify best practices and gaps in our own user experience.
Clear OAuth Options: All competitors offered prominent, visually distinct Google/Apple/Facebook login buttons above or next to the email/password form. This made social sign-in the default path.
2. First-touch impressions
Login pages are often the first point of contact, and successful platforms use clean, branded layouts with trust indicators (e.g., badges, SSL locks, familiar login buttons).
Many emphasize ease and speed, reducing the mental effort required to get started.
Web-Based Authentication: Most tools used web-based login screens, even if the product was extension-based. This improved user trust and allowed easier reauthentication across devices.
To better understand modern sign-up and login standards, I studied how competitors and adjacent platforms handle authentication. This helped identify best practices and gaps in our own user experience.
Clear OAuth Options: All competitors offered prominent, visually distinct Google/Apple/Facebook login buttons above or next to the email/password form. This made social sign-in the default path.
2. First-touch impressions
Login pages are often the first point of contact, and successful platforms use clean, branded layouts with trust indicators (e.g., badges, SSL locks, familiar login buttons).
Many emphasize ease and speed, reducing the mental effort required to get started.
Web-Based Authentication: Most tools used web-based login screens, even if the product was extension-based. This improved user trust and allowed easier reauthentication across devices.
Screenshots of competitor's website for competitive analysis
User flow analysis
User flow analysis
To design a smoother login experience, we first mapped out all existing and potential access points where users might encounter the login/sign-up flow. This helped us identify friction points and ensure consistent, accessible entry throughout both platforms.
To design a smoother login experience, we first mapped out all existing and potential access points where users might encounter the login/sign-up flow. This helped us identify friction points and ensure consistent, accessible entry throughout both platforms.
User flow for the chrome extension showing access points for login/sign up
Key Insights
Key Insights
Users dislike outdated login methods. Many expressed frustration with needing to remember passwords, especially when switching devices. OAuth options like Google login were seen as faster, easier, and more trustworthy.
Logging in through the extension felt untrustworthy. Users were hesitant to input credentials into a browser extension, especially without clear context or brand visibility.
Limited accessibility across devices. The lack of a web-based login made it difficult for users to access their accounts on other devices, reducing engagement and usability.
Competitor platforms offer seamless OAuth flows. Other fintech and savings tools prioritize convenience and security by offering multiple login options, especially via Google and Apple.
Users dislike outdated login methods. Many expressed frustration with needing to remember passwords, especially when switching devices. OAuth options like Google login were seen as faster, easier, and more trustworthy.
Logging in through the extension felt untrustworthy. Users were hesitant to input credentials into a browser extension, especially without clear context or brand visibility.
Limited accessibility across devices. The lack of a web-based login made it difficult for users to access their accounts on other devices, reducing engagement and usability.
Competitor platforms offer seamless OAuth flows. Other fintech and savings tools prioritize convenience and security by offering multiple login options, especially via Google and Apple.
Sign up/ Log in Requirements
Sign up/ Log in Requirements
Provide Open Authorization through Gmail, Facebook.
Allow Users to sign up/login traditional method through email and password.
Email & Password sign ups follow same flow that was on extension.
Captivating hero image.
Implement verification code sign up/ logins to create more security.
Design
Design
Sign Up/Log In User Flow
Sign Up/Log In User Flow
To bring clarity to the process, I began by mapping out the complete user flow — outlining how users would access the login and sign-up. This not only clarified how users would move through the process — via OAuth or email — but also helped identify exactly which screens needed to be designed to support each step of the journey.
To bring clarity to the process, I began by mapping out the complete user flow — outlining how users would access the login and sign-up. This not only clarified how users would move through the process — via OAuth or email — but also helped identify exactly which screens needed to be designed to support each step of the journey.
User flow for login/sign up
Sketches
Sketches
My first step was sketching the layout of the main login and sign-up page. Drawing from patterns observed in the competitive analysis, I noticed a consistent structure across platforms — which helped guide the layout and ensure familiarity for users.
My first step was sketching the layout of the main login and sign-up page. Drawing from patterns observed in the competitive analysis, I noticed a consistent structure across platforms — which helped guide the layout and ensure familiarity for users.
Sketch of web layouts discovered
Low Fidelity Wireframes
Low Fidelity Wireframes
After sketching, I translated the ideas into low-fidelity wireframes to focus on layout, structure, and user flow without getting distracted by visual design. This allowed for quick iteration and feedback before moving into higher fidelity designs.
After sketching, I translated the ideas into low-fidelity wireframes to focus on layout, structure, and user flow without getting distracted by visual design. This allowed for quick iteration and feedback before moving into higher fidelity designs.
Low fidelity Wireframes made in Figma
Mid-Fidelity Wireframes
Mid-Fidelity Wireframes
With the structure validated, I moved to mid-fidelity wireframes to define component placement, spacing, and interaction states. Everything was fleshed out except for the hero image, which would be finalized in the high-fidelity stage.
With the structure validated, I moved to mid-fidelity wireframes to define component placement, spacing, and interaction states. Everything was fleshed out except for the hero image, which would be finalized in the high-fidelity stage.
Mid fidelity Wireframes made in Figma
Designing the Hero image
Designing the Hero image
Mood Board
Mood Board
To align with the client’s vision, I created a mood board featuring different hero image styles, illustration types, and competitor examples. During our meeting, the clients gravitated toward Honey’s simple landing page and expressed, “We want to showcase Redeemer’s features in a simple but fun way.” This direction helped guide the visual style toward something clean, approachable, and engaging.
To align with the client’s vision, I created a mood board featuring different hero image styles, illustration types, and competitor examples. During our meeting, the clients gravitated toward Honey’s simple landing page and expressed, “We want to showcase Redeemer’s features in a simple but fun way.” This direction helped guide the visual style toward something clean, approachable, and engaging.
A section of a mood board created to present to clients
Sketching
Sketching
With the direction clarified, I began sketching various hero image concepts. This allowed me to quickly explore layout ideas and visual metaphors that could capture Redeemer’s features in a fun, approachable way before moving into digital design.
With the direction clarified, I began sketching various hero image concepts. This allowed me to quickly explore layout ideas and visual metaphors that could capture Redeemer’s features in a fun, approachable way before moving into digital design.
Hero image sketches
High-Fidelity Design
High-Fidelity Design
Based on the sketches and client feedback, I translated the strongest ideas into high-fidelity hero image mockups. These designs followed Redeemer’s style guide to ensure visual consistency across the product and aligned with the rest of the web app. The final visuals aimed to highlight Redeemer’s core value in a clean, engaging way.
After presenting the initial high-fidelity hero image, the clients responded positively to the overall direction. However, they requested that the design also showcase the rewards users could earn by using the Redeemer extension. This feedback helped guide the next iteration of the hero image to better align with both user motivation and product value.
Based on the sketches and client feedback, I translated the strongest ideas into high-fidelity hero image mockups. These designs followed Redeemer’s style guide to ensure visual consistency across the product and aligned with the rest of the web app. The final visuals aimed to highlight Redeemer’s core value in a clean, engaging way.
After presenting the initial high-fidelity hero image, the clients responded positively to the overall direction. However, they requested that the design also showcase the rewards users could earn by using the Redeemer extension. This feedback helped guide the next iteration of the hero image to better align with both user motivation and product value.
High-Fidelity Wireframes designed in Figma
Iterating based off feedback
Iterating based off feedback
Based on the client’s feedback, I updated the hero image to visually highlight the rewards users can earn through Redeemer. After presenting the revised version, the clients were very happy with the direction — it struck the balance they wanted between simplicity, fun, and value communication.
Based on the client’s feedback, I updated the hero image to visually highlight the rewards users can earn through Redeemer. After presenting the revised version, the clients were very happy with the direction — it struck the balance they wanted between simplicity, fun, and value communication.
Iterated Hero Image designed in Figma.
Validating the design
Validating the design
Tasks
Describe your first initial impressions with what you see.
Which way of signing in is most comfortable for users.
Sign Up using Email and Password (Not OAuth).
Login into Redeemer
Tasks
Describe your first initial impressions with what you see.
Which way of signing in is most comfortable for users.
Sign Up using Email and Password (Not OAuth).
Login into Redeemer
Results
Users appreciated having multiple sign-in options.
Many participants felt reassured and more willing to sign up because of the inclusion of Google and Facebook (OAuth) login options.
The flow felt familiar and intuitive.
Participants mentioned the layout and structure mirrored other modern apps, making the process feel quick and predictable.
The usability testing results gave us confidence to move forward without additional iterations. Users were able to complete tasks smoothly, understood their options, and expressed overall satisfaction with the login/sign-up flow. No major usability issues were identified.
Results
Users appreciated having multiple sign-in options.
Many participants felt reassured and more willing to sign up because of the inclusion of Google and Facebook (OAuth) login options.
The flow felt familiar and intuitive.
Participants mentioned the layout and structure mirrored other modern apps, making the process feel quick and predictable.
The usability testing results gave us confidence to move forward without additional iterations. Users were able to complete tasks smoothly, understood their options, and expressed overall satisfaction with the login/sign-up flow. No major usability issues were identified.
Sign Up Final Prototype
Sign Up Final Prototype
Screen Recording of the final sign up flow prototype.
Log In Final Prototype
Log In Final Prototype
Screen Recording of the final Login flow prototype.
Outcome and Impact
Outcome and Impact
Using our MIxpanel tracking we were able to analyze an increase from 52 registered accounts to 2000 registered accounts from July to December.
Clients were pleased with the outcome, especially the clean integration of Redeemer’s branding and the clear emphasis on user trust. The design was approved with no major revisions, giving the team confidence to move forward into development.
The new sign-up and login experience integrated seamlessly with the overall Redeemer web app redesign, creating a consistent and trustworthy experience across both platforms. This cohesion was a key outcome of our broader testing efforts and ensured users had a smooth transition from extension to web.
Using our MIxpanel tracking we were able to analyze an increase from 52 registered accounts to 2000 registered accounts from July to December.
Clients were pleased with the outcome, especially the clean integration of Redeemer’s branding and the clear emphasis on user trust. The design was approved with no major revisions, giving the team confidence to move forward into development.
The new sign-up and login experience integrated seamlessly with the overall Redeemer web app redesign, creating a consistent and trustworthy experience across both platforms. This cohesion was a key outcome of our broader testing efforts and ensured users had a smooth transition from extension to web.
Learnings
Learnings
Using our MIxpanel tracking we were able to analyze an increase from 52 registered accounts to 2000 registered accounts from July to December.
Clients were pleased with the outcome, especially the clean integration of Redeemer’s branding and the clear emphasis on user trust. The design was approved with no major revisions, giving the team confidence to move forward into development.
The new sign-up and login experience integrated seamlessly with the overall Redeemer web app redesign, creating a consistent and trustworthy experience across both platforms. This cohesion was a key outcome of our broader testing efforts and ensured users had a smooth transition from extension to web.
Using our MIxpanel tracking we were able to analyze an increase from 52 registered accounts to 2000 registered accounts from July to December.
Clients were pleased with the outcome, especially the clean integration of Redeemer’s branding and the clear emphasis on user trust. The design was approved with no major revisions, giving the team confidence to move forward into development.
The new sign-up and login experience integrated seamlessly with the overall Redeemer web app redesign, creating a consistent and trustworthy experience across both platforms. This cohesion was a key outcome of our broader testing efforts and ensured users had a smooth transition from extension to web.