My Role
Lead Product Designer
Timeline
10 Day Delivery
Tools
Figma, Zoom, Slack
Methods
Background
Founded in 2021, Upscribe is a Shopify application for e-commerce businesses that streamlines the process of providing customers with product subscription services. Their primary selling points are the quick and easy onboarding process, subscriber services such as subscription management via SMS, and increasing AOVA and LTV via built-in scaling tools.
Project Brief
Upscribe plans to launch a conceptual site to show to prospective clients to demonstrate the capabilities and features of the service. The company had created its first rendition of the demo-site, but were not fully satisfied with the User Interface (UI). So, the Upscribe team reached out to us for assistance.
Target Audiences
The target audience of the demo-site are potential clients who own e-commerce businesses looking to create an online store primarily based on product subscription offerings. These businesses may be new to Shopify's platform, or they may have used similar applications but are looking to switch providers.
The secondary audience are the conceptual users of the demo-site. Although the site would not be used by real customers, we wrote the copy and utilized best usability practices in order that the demonstration would be as realistic as possible.
Highlight Features
The goal of this site is to increase client acquisition through highlighting key features of Upscribe's services. These features included:
Passwordless Login
This feature allows the business' customers to login to their account and manage
their subscription without the need of a password by emailing them a link to login to their account instead
Quickly add items to subscriptions
Upscribe wanted to demonstrate how customers could add items to their
subscription with the click of a button, without the need to view more than the essential details of the product
Overview
We began by looking at the current site and assessing what was working and what wasn't.
What was working
Brown colors
Big hero image
Serif and san typography
What wasn't working
Tan background aged the product
Too many typefaces being used
Bold strokes around components
UX Audit
Upon further evaluation, we noticed obstacles that would be critical to the users' experience.
CLICK TO EXPAND
Expanding Scope
After these troubling observations, we set up a meeting with the project manager to see if Upscribe was open to more changes to the site than just the UI. They complied, so we expanded our scope to improve the user experience of the site as well as the UI.
Subscription Page
The clientele that Upscribe is looking to attract are retailers offering subscription services, so I wanted to specifically highlight features that would be attractive to them; so, I condensed the coffee and equipment into one "Shop" page, and I added a separate page detailing the subscription program.
I also added a "Home" tab for users who prefer this method of navigation rather than clicking on the logo in the upper left corner.
Login Screen
To simplify the flow for users, we moved the ability for users to manage their subscription from the login page to their account page after they've logged in, because they must login to do so regardless.
Typography
For simplicity, I restricted the design to two typefaces: Lastik and Founders Grotesk.
Lastik is a serif typeface that gives the design a classic, traditional, and timeless feel.
Founders Grotesk is a san-serif typeface, offering increased legibility on web with a modern touch.
Color Scheme
I stylized the background by adding a slight paper texture to communicate product offerings that were hand-made and uniquely crafted.
I used a similar color palette to the original design with a coffee color for the CTAs and a subtle gradient for global elements such as the navigation bar and the footer.
Final Product
Within 10 business days, the finalized prototype was ready for handoff to the developers. See the results below.
CLICK TO EXPAND
Results
I provided the prototype and detailed UI kit to the Upscribe team and they were extremely pleased at the result. They expressed to my team the significant impact that our improvements would make; the site will be integral to the acquisition of hundreds of prospective clients. Overall, the site design was a success and far exceeded the team's original expectations of a simple UI redesign.
Reflection
This project went extremely smoothly in a fast-paced agile work environment. Even so, there are always opportunities to learn and grow.
What went well:
Going above and beyond - I am proud of myself and my team for taking what was a simple UI redesign and turning it into a full redesign to increase usability, aesthetics, and marketability.
Learnings:
Ask specific questions and define success early in the process. As we progressed, we would continually learn of more essential features that the site needed, causing us to have to rework
Something that I could have done better is specifically asking the must-have features of the site. This would have saved time and energy by reducing the time to rework what had already been designed.
© Luke Lewis 2024