THE REALREAL REDESIGN
The RealReal is an e-commerce website that sells luxury goods on consignment, with new products becoming available to customers through flash sales. The following is a blue sky, holistic, responsive redesign from a UX and brand design perspective. The redesign included updates to the homepage, product list page, and product description page.
Checkout
Checkout before and after
Issues
Checkout abandonment rates on mobile web were double the rate of desktop. With the steady increase of mobile usage on the site, this number continued to grow.
The checkout had an enormous amount of white space and text descriptions, that forced the user to scroll large amounts to get to the end of the page, or find the information that they need.
The checkout process did not have the look and feel of a luxury site, nor was it as efficient as it could have been from a UX perspective. Customer service had to field many calls per day about users getting lost in checkout.
Process
Starting with a heuristic evaluation on checkout, issues were found and put into a prioritized list to be fixed. These issues were then approved by internal stakeholders, who added more to the list as well.
Once the list was complete, a new version of checkout was done specifically looking at the issues that came up during the heuristic evaluation. This version decreased actual page lengths anywhere from 1/2 to 2/3 of the original length.
After, we started an exploration into a 2-click checkout. Multiple iterations of this were completed, examining different versions from one-page checkout flows to focused state flows.
Once a 2-click version was approved, a usable prototype was created, and tested with actual users through UserTesting.com.
Solution
The checkout flow clearly lays out all the steps a new user will have to take to complete their purchase. The step titles are all shown on the first page of checkout, with the ability to click in to each section and edit the information.
A floating checkout button was added, with the price of their order persistently attached, so users always know how much they will be spending.
The price changes as certain information is added in, such as shipping address (tax rates), and promotional codes. The checkout button stays inactive and grayed out until users add all of the required information.
According to the new user tests, users more accurately understood how the checkout functioned, and had less questions and errors while working through the checkout process.
Hamburger menu before and after
Hamburger menu
Issues
Based on qualitative user testing, users were struggling to find the products that they were looking for on the mobile site. This was a very obvious issue when users were asked to find a specific product, and would almost immediately get lost in the site.
Obsessions are the highest revenue generating section within the app, but were getting lost at the bottom of the menu in mobile web. It took too much cognitive load for users to find it, and conversion rates were substantially lower.
The Sign Out link was at the very top of the hamburger menu, right under the user's name. This caused large error rates because users would accidentally tap sign out, and be taken out of their account.
Leads were very low for consignment in the mobile web site. The menu item was hardly being used because it was pushed so low on the menu. The lack of visual differentiation was further causing it to get lost.
Not all pages were responsive, so the menu would appear differently based on whether the page was responsive or not. This was incredibly confusing for users, and the two versions of the menu functioned differently.
Process
We reviewed the qualitative user testing videos that showed users attempting to use the navigation, and took detailed feedback notes on this.
Multiple iterations of the menu were done to explore different ordering. The final ordering was approved by merchandising based on customer feedback and complaints that they had received, along with business initiatives for the department.
Multiple versions of the logos were done. The goal was to be able to place the "Consign" and "Obsess" menu items and logos right next to each other, without competing visually.
Iterations of a new responsive grid were completed, specifically focusing on the pages that were previously fluid.
Solutions
"Obsess" and "Consign" were moved to the top of the menu. They were given prominent icons that made them very visible compared to the rest of the menu items. "Sign Out" was moved to the very bottom to match user expectations, and mitigate the possibility of accidental sign outs.
All pages in the site were converted to a responsive layout. This completely removed the problem of multiple versions of the hamburger menu appearing.
*Purchase conversion on mobile web increased .1% after the changes were completed. This translates into almost $7M per year in new revenue, based on projections.
Updated search design
Search
Issues
Search is one of the highest revenue-generating functions on the site, and is marginalized visually and functionally. There is a large opportunity to increase revenue generation through the search function.
The current search function only shows previous searches. It does not provide any further information about the user's previous behavior with search, or provide other suggestions based on what has been entered.
Users don't know what kind of results they will get before they decide to complete their search. It is an expensive action that requires a lot of trust from users, and there is opportunity to lose users.
Process
The process started with competitive research for searching with other large luxury brands. This involved looking at what kinds of suggestions they provided, along with how search functions in a responsive environment.
The next step was to meet with development about which ideal features could actually be included within the updated search.
Re-examination of UserTesting.com tests was done to confirm that the new direction was correct.
After those pieces were complete, wire framing was done for multiple versions.
Once a decision was made by stakeholders, an interactive prototype was created for the chosen structure.
Solution
The search field has been replaced by a smaller icon that is universally recognized by users. This frees up more space in the global navigation menu.
The search field takes over the full width of the page. Users can completely focus on the search function, without getting as distracted by other elements on the page.
Users know what results will return because they see item counts with the search results. They also have access to their previous searches, the most obsessed items within that search, and other suggestions based on their search terms.