Problem: What stopped us gaining more users
FBN has over 50,000 active users, but we have seen a slow increase in user numbers during the past fiscal year.
Goal: As the sole designer on the growth team, I collaborated with my product manager to identify opportunities to expand the user base and increase company revenue.
⏰ Ship it!
We usually have 2-4 weeks for a new feature to be live. This tight deadline for delivering new features highlights the importance of efficient and effective design work.
Our strategy is to ship the product/feature as soon as possible to gather feedback from the market directly.
We continuously refined shipped features based on real user data to improve both user experience and business performance.
How My Design Impact the Business
Sign Up
32%
Store Traffic
10%
Potential Revenue
$5M+
User Acquisition
Sign-up Redesign
I have received a request from my product manager to improve our existing signup experience in order to increase the number of sign-ups.
Currently, less than 50% of users can complete the entire process.
Why would this happen?
Problems
What is a Better Sign-up Solution?
After conducting research and consulting with my product manager, we concluded that the sign-up process is the starting point for users and a critical factor in boosting sign-up rates.
FBN is a complex platform and owns multiple verticals, including Shop, Loan, Insurance, Data analytics, and a Farmers' community, and we aim to create an inclusive sign-up experience for our users.
Form Redesign (Initial Screen)
To address the issues, we aimed to simplify the process by merging the steps and implementing a new, consistent design language that aligns with our design system.
II. Consolidated the Steps (Subsequent Screens)
For Farmer and Livestock Producer (Our Main Customers)
Little Changes Make Big Things Happen
For other user types, eg: Community Builder, Agronomists, etc.
III. Vertical Space is a War (Mobile Optimization)
To ensure ease of access, we optimized the sign-up form for mobile devices, limiting its height to 700px or less.
Research showed that 80% of users log in to our website via mobile, so the CTA for sign-up should be visible without scrolling.
Ensuring sitewide design consistency was a complex process that involved collaboration with the design system manager and legal team. I worked on adjusting the padding and content copy to meet the design requirements. The final result was marketing content limited to a width of 343px (one line of content) and a legal exemption limited to a height of 42px.
Original Form
Mobile Display
In the past, our sign-up button was not easily discoverable as it was hidden under the top navigation, making it difficult for users to find.
To improve the mobile layout and navigation, we prioritized the sign-up button by placing it prominently in the top navigation section, ensuring that it is easily visible for users to find.
Previous Design
New Design
3 Weeks Design Project, Resulted In
Sign Up
32%
New Users
1000+
Potential Revenue
$3M+
User Acquisition
Apply Changes to the Site
As a versatile platform that goes beyond e-commerce, we have multiple places to encourage users to sign-up.
Based on the success of our Main Sign-up Flow, we decided to implement similar changes to our Shop Sign-up and Community Sign-up processes, ensuring a consistent and optimized sign-up experience across all areas of our site.
Shop Sign-up
Community Sign-up
Shop Signup Mobile Optimization
Overhauled the design language for the application to the newest design system, resulting in improved usability and making it easier for developers to maintain.
Increased the efficiency and usability of the shop's sign-up process by eliminating the "Reason for Sign Up" questions, resulting in a smoother and more streamlined experience for users.
Previous Design
New Design
Community Signup Mobile Optimization
Reorganized marketing content into two parts and positioned the first part above the sign-up form, which improved user engagement by emphasizing the value of sign-up.
Improved community sign-up flow by removing the 'Reason for Sign Up' question, enabling users to browse the forum quickly.
New Design
User Acquisition
Blog Experience Sign-up Tray
While the blog attracts a growing audience and highlights diverse farmer perspectives, it has not translated into meaningful revenue impact.
Our goal was to leverage existing system components to design a low-lift experiment that either guides readers toward the online store or increases user sign-ups.
Key Hypothesis 1: Drive users to sign-up
Combining it with a tested sign-up flow, we can make the sign-up more prominent to drive users to the sign up page.
This should be easy to implement as we have multiple components available in the system.
Key Hypothesis 2: Drive users to store
We do not have enough articles that feature our products
Our current system only has card carousel components available, but modifying them to meet our needs would be time-consuming and difficult to maintain.
Get Inspiration
After conducting research on several consumer-based platforms, I identified the best method to drive users to sign up.
Based on similarities of the user behavior with other platforms, I decided to create a sign-up tray feature inspired by Master Class and The New York Times.
Design Solution - Desktop
To drive more user engagement, I redesigned the existing component in our design system and created a new sign-up tray feature for the FBN Blog.
The design of this feature was inspired by The New York Times, but it was customized to meet the specific needs of our audience.
The tray only appears once users have scrolled 50% down the page, ensuring that it doesn't interrupt the reading experience.
Design Solution - Desktop
The sign-up tray is designed to take minimal space on both desktop and mobile devices, with only 76px in height on the desktop and 150px on mobile. This ensures that the tray is unobtrusive and does not interfere with the user's reading experience.
150px
After 1 week Launch…
Sign Up
10%
New Users
300+
Potential Revenue
$0.8M+
Challenges
My objective was to utilize the pre-existing components in the design system for efficient design outcomes; however, choosing the appropriate component was a challenge as each component has its own underlying logic and code.
To make the correct choice, I had to regularly review MUI.com and collaborate with my design system manager for permission to modify components and templates.
I usually present multiple options for consideration by both the DSM and PM, and I need to ensure my design is aligned with our standard to publish in our design system for future use.
Additionally, the growth team does not have internal engineers. I had to transfer my work to an external engineering company that operates in a different time zone. Due to the time difference and the need for fast product shipment, we sometimes had to omit handoff sessions to ensure timely delivery.
It was essential for me to create comprehensive documentation, such as gherkins and specs, to assist the engineers in understanding the flow, thereby reducing the workload and time spent during the QA session.
I'm committed to improving my workflow and ensuring that I provide clear and concise documentation to assist with the development process. Clear communication and collaboration between designers and engineers are essential for the success of any project, and I'm dedicated to playing my part in this process.
Retrospective
During my time at FBN, I have gained valuable knowledge and experience in design systems and product thinking through hands-on practice. Collaborating with engineers has been challenging, but I am continually refining my skills in creating comprehensive gherkins and design specs to ensure seamless transitions. I recognize that a UX designer's primary goal is to prioritize the needs of the user, however, I also must keep business requirements in mind when designing a product.
I‘ll never forget my design manager's words, “I taught you to be a designer, but good is defined by experience.” I am dedicated to pursuing my dream of becoming an excellent designer.
