Questions for our kick-off meeting
Background
Revd is a marketplace-enabled finance company, a new peer-to-peer marketplace for used value-holding goods. What makes Revd different is that it provides a modern, clean, frictionless experience to both buyers and sellers with no ads, and includes delivery and other convenient services. At launch, they are aiming to tackle the used electric vehicle market first and seek to accelerate the world’s transition towards sustainable transportation.
Problem
Our client was looking to evaluate its website and app design prior to launching to ensure it is intuitive and will provide a seamless experience. The client supplied a general mockup idea for their pitch to venture capitalists, but wanted to consolidate their branding and develop a more precise idea of how their product would look and work. The client particularly wanted a mobile web design that would look and feel like a native app.
Solution
Our team divided up the work to produce a components library and heuristic evaluation of the website and app. We split off into pairs to complete the project. My partner and I were primarily responsible for the mobile and desktop homepage redesign, component library, and heuristic evaluation presentation. We designed with the intention of:
Improving consistency and organization of overall design
Incorporating accessible and intuitive interaction and designs to strengthen user understanding
Ensuring that the developer handoff was effortless and easily understandable
Process
Competitive analysis/inspiration
Heuristic evaluation
UX iterations
Components library
Styleguide
Project Duration
5 weeks
Role
UX/UI Designer in a team of 4
Tools
Figma
Discovery & Research
Kick-off Meeting
In order to properly orient ourselves, our team created a list of questions to better grasp what the customer was looking for. The client told us they wanted a clean, modern user experience with interactive elements. They knew they wanted the website to work like Amazon and feel like Apple, but with a dark layout that set it apart.
They also expressed an interest in a smart search that highlighted listings and products right away. Building the key components and main interaction flow while cleaning the existing mockup's design would be success to our client. We had a better understanding of their concerns and what our next steps would be after the meeting.
Competitive Analysis and Inspiration
Our team divided our evaluations to cover more area because the client communicated to us they enjoyed the feel of Apple but wanted to stand out from competitors such as Amazon, Ebay, and others. I researched Upway, Ebay, and Offerup to have a better understanding of specific design choices that I could then use or avoid in our Revd redesign.
We offered a full review with 7 main competitors and 5 competitive inspiration sites based on my evaluation and the other evaluations by my team. We noted that Amazon allowed for precise zoom-in and that other sites featured manufacturing and/or model reviews, as well as the date on each item listing. Apple, on the other hand, had consistent card layouts and a responsive website design.
Heuristic Evaluation
Afterward, I evaluated the website to see if the current mockup followed heuristic principles. Some of the major problems I encountered included:
Lack of exits and undo options for the user
Lack of font hierarchy
Information overload
Button colors did not follow WCAG standards
Difficult to change buyer information
Lack of consistency in listings
UX/UI Redesign
Hero Banner
After analyzing the competitor's landing page, my partner and I designed multiple variations of what the hero banner could look like. To better engage the users, we experimented with adjusting the lighting bolt and the location of the bike.
Footer
We noted that the original footer design wasn't up to WCAG requirements and didn't have the possibility to subscribe to an email listserv. We liked the lightning bolt design in the hero banner and tried incorporating it into the design by using a horizontal lighting bolt or a horizontal gradient line to separate the footer. After consulting with our team, we decided to include a subscribe function with a submit button, as well as a horizontal gradient line to separate the footer.
Buttons
The client's major CTA button had a bright blue background with white lettering in the initial design. We came up with various WCAG-compliant button alternatives after determining that the button did not fulfill WCAG requirements.
Others in my team designed buttons that were different from the client's original, but I made a few buttons that used the same colors as the client's original with a reworked gradient that fit WCAG standards. We eventually settled on one of the buttons I designed that was AAA WCAG compliant while still retaining the client's original gradient.
Homepage Layout
We concentrated on how to split up the enormous volume of information from the listings once we set a style with the hero banner. We experimented with several colors and reorganized portions of the original layout.
We loved how the mobile mockup had a suggestion panel that the desktop version lacked, therefore we incorporated it into our prospective design. The content was more engaging and digestible when presented in a couple of different panel designs.
Interactive Components
Many areas of Revd require repeating design elements. My partner and I built all of the components, applying suitable constraints to make them responsive and providing variants to show interactions where possible. We enhanced our developer handoff annotations by building interactive components. This aided in making the design process more efficient and effective.
Style Guide
Our team established a style guide that summarized the logo, color, font, icons, and buttons design adjustments we made. My partner and I worked on all pages to ensure that the revised components and the style guide were in sync. The finished style guide clarified our design decisions for the client and their team.
Handoff
Handoff
As the project drew to a close, I annotated each of the new screens, as well as the changes we made to their original components, to help clarify these changes and how each component worked. My partner and I provided a visual grid with the height, width, and paddings of the many elements and components used in the final hi-fidelity screens, as well as a style library that allowed us to quickly identify text and color styles utilized throughout.
My partner and I cross-checked all areas on both desktop and mobile before delivering the client the redesign files and style guide in order to ensure quality, consistency, and responsiveness across all screens and components.
Reflection
Biggest Challenges
The other designers on our team have varied levels of experience with Figma's components, variants, and auto layout. My partner and I would assist the others while making sure to quality check areas of the project we were not directly involved in. We needed to plan ahead of time to guarantee that the other designers had enough time to understand and contribute to operational deliverables before the deadline.
In a team of four designers, there were a lot of conflicting ideas on how to approach the design, which could have created obstacles. We were able to avoid these challenges by presenting, collaborating, and communicating our thoughts.
Biggest Successes
Throughout the project, our team communicated and coordinated effectively. Each designer made it a point to alert the team when changes were made to the design and to provide comments on all elements of it, keeping everyone informed and accountable.
Our team performed an outstanding job maintaining UI consistency and cohesiveness throughout the screens we redesigned.
