Our team meets Revd for the client kickoff call.
Overview
Revd is a data-driven managed marketplace providing a frictionless experience to those looking to buy and sell used electric vehicles.
The startup, launching in the summer of 2022, will begin by selling used electric bikes and has a future vision of offering a marketplace for all forms of electric vehicles, including cars and scooters.
The problem
As a startup in the middle of its first stage of VC funding, Revd needed the essential building blocks to help design and develop its product so that it could be ready for the summer 2022 launch.
Their end product vision was a progressive web application with native-like experiences reminiscent of Apple's UI and Amazon's functionality.
The solution
Review Revd’s existing logos, brand colors, and screens to evaluate accessibility and usability.
Build a component library using responsive design methodologies and redesigned components for optimal user experience.
Process
Competitive Research & Synthesize
Heuristic Evaluation & Synthesize
UI Design
Component Library
Style Guide
Dev Handoff
Role
Team Lead & UX/UI Designer
Heuristic Evaluation, UX Research, UX Design, UI Design, Component Library, Style Guide
Tools
Figma
Jira
01. Discover
Client kickoff call
To prepare for our client kickoff call, our team wrote down a list of discovery questions based on the pitch deck and project brief Revd sent over.
Then we set up a meeting to meet the founders of Revd, who we communicated with directly throughout the project. During our meeting, we determined the project's scope, clarified the final deliverable, and discovered how Revd wishes its customers to perceive their experience.
Project plan
After reflecting on our kickoff call, we developed a project plan to determine our process and flow. We then used Jira to break down our work into manageable tasks, which we assigned to team members when appliable.
02. Research
A few reports from our competitive analysis.
Competitive analysis
To better understand the market that Revd is trying to appeal to, we conducted research on seven competitor sites. We focused on the sites' key features, general navigation, and site aesthetics to identify areas for improvement and where Revd can distinguish itself within the marketplace.
Key findings
Revd is the only site out of the 7 competitors that lists product imperfections.
Revd could benefit from adding a feature that provides a detailed zoom-in of the product.
Revd could also benefit from featuring manufacturer or model reviews.
A glimpse into our heuristic evaluation process (mobile).
Heuristic evaluation
Using Jakob Nielsen’s 10 Usability Heuristics, we conducted a heuristic evaluation on Revd’s minimum viable product (MVP) UI screens and suggested ways to improve the current design.
We then determined that the Home Screen and Checkout page were the most impactful screens to redesign based on the opportunity for improvement and the number of frequently used components both screens contained.
Key heuristic concerns
01. Visibility of system status
The user is unable to see which search filters are applied.
The navbar does not demonstrate what page the user is on.
02. Consistency and standards
Search functionality is not available throughout the entire app.
Features such as “see more” are located in some but not all areas.
An option for filtering by range is found on car MVP screens but not bike screens.
03. Lack of user control and freedom
Lack of "x button" on drawers.
No back buttons to return to the previous screen.
Users are unable to remove items during checkout.
03. Design
Logo & color review
Our team reviewed 14 of the client's logo options to select the wordmark and logomark that best represented their ideal brand identity.
We then reviewed the existing colors in Revd’s MVP to determine if the color contrast ratios met the accessibility guidelines set by WCAG. We found that the gradient used in Revd’s CTA buttons failed both AA and AAA accessibility standards, so we created two AA compliant gradient options using Revd's existing blue and purple colors.
-
Revd logo review.
-
Review of the accessibility of Revd's brand colors.
-
Suggestions for how to make Revd's gradient accessible.
Our redesigned mobile home page.
UI redesign
We then created our redesigned UI screens by combining our competitive analysis and heuristic evaluation findings.
While a redesign was not part of our original deliverable, we elected that redesigning 2 desktop and mobile screens supported our workflow, aided in determining the proper sizing for components, and provided the client with additional context for utilizing our component library.
Key changes (desktop)
Padded navigation bar for spacing and ease of navigation (consistency and minimalistic design).
Changed layout and size of featured items cards and created a highlight panel to create a distinction between other listings (consistency and standards).
Added card hover states (visibility of system status).
Added search bar suggestions (recognition rather than recall).
Removed card stacking of the basket items (efficiency of use and user control).
Added “x” icon for users to remove items from the basket (user control and freedom).
Added option for users to add a warranty to items, rather than adding it by default (user control and freedom).
Key changes (mobile)
Removed drawer and changed bottom navigation to supplement for what drawer previously addressed (minimalistic design).
Replaced “menu” with “my account” to reduce crowding on top of screen (minimalistic design).
Added gradient indicator bar on bottom nav to show what page user is on (visibility of system status).
Added Revd mobile header to checkout screen (consistency and user freedom).
Added editing feature to payment and option for adding a billing address (efficiency of use and user control).
Component library
To begin building our component library, we created an organized structure to separate components first by desktop/mobile, then by feature type.
We then dropped in the components from our UI screen redesigns and began creating the remainder of the components from the MVP screens, making sure to redesign elements based on our heuristic evaluation and competitive analysis to improve usability.
Desktop Bike Cards within the component library.
Style guide
Using our redesigned screens and referencing the MVP, we developed a style guide that Revd could reference when building additional screens for their application.
-
Revd Style Guide
-
-
-
-
-
-
04. Dev Handoff
Dev handoff
To begin our design-to-development handoff process, we redlined the specs of our final screen redesigns to communicate with the developers the fine spacing details without requiring them to inspect the document.
We then annotated the final screens and component library, explaining what we changed, the functionality, and our design rationale. Our specific annotations helped the engineers understand the reasoning for our changes and how to use components that were not part of our screen redesigns.
An example of how we annotated for development handoff.
05. Reflection
Reflection
Building a component library for Revd made me appreciate the amount of work and detail required for making effective designs. I realized the power of components, instance swapping, and the immense value in creating a responsive design system (especially for working efficiently and providing more opportunities for design system scalability).
The biggest lesson our group learned from this project was regarding workflow. We mistakingly built the Style Guide after creating the final UI Redesigns and Component Library. Unfortunately, this left us with an unnecessary amount of font sizes, which produced extra work, as we had to change much of the text within our design.
In retrospect, our team should have established Figma text styles after creating our desktop screens, but before building the Component Library so that the remainder of the component text would be linked to set text styles.
Additionally, I learned a lot about leading a team and managing communication between team members. I discovered that miscommunication when working virtually can often be solved with extra documentation and ensuring all major design decisions should be discussed and approved as a group.
I am grateful to Revd's founders, Enrico and Umberto, for the opportunity to work on a product pre-launch and I am looking forward to seeing how our Component Library will be incorporated within the remainder of their site!