WineRatings+ by Wine Spectator App Redesign
Check the app out on the app store!
Check out an updated and more in-depth Figma presentation here
If you would like to connect, I would love to walk you through the presentation deck.
Overview
WineRatings+ is an iOS mobile app with trusted, blind-tasted ratings & reviews by Wine Spectator that ensures you have great wine, every time.
As one of Wine Spectator’s top-grossing products, the business felt that it was time to redesign the outdated app and its app store product page.
Role & Responsibilities
For the majority of this redesign, I was the UI designer.
Primary Role: UI Designer responsible for wireframes, mockups, prototyping, establishing a style guide/design system, and app store mockups/video
Secondary Role: UX Designer responsible for user flows, copywriting, and onboarding
Tools
Figma, Adobe XD, Invision, Miro, Adobe Creative Suite, Google Suite, Pivotal Tracker, and Slack
Client
Wine Spectator
Founded in 1976, Wine Spectator is the world’s most influential source of wine information, both in print and on the Internet. Wine Spectator editors review more than 11,000 wines each year in blind tastings, and each issue contains from 400 to more than 600 wine reviews with detailed tasting notes and analysis. The magazine sets stringent standards for itself and relies on the proven abilities and experiences of its editors as tasters and critics.
About the Client
Accomplishments
Increased the app’s app store rating from 2.0 to 4.7
Improved overall user satisfaction
Modernized an outdated user experience
Brought forth new content such as wine labels, wine label illustrations, and the iOS 14 wine of the day widget
Created a design system, ultimately improving design consistency, developer handoff, and the speed of future iterations.
Before
Old Explore tab, search results, wine detail page, and saving experience
After
Redesigned Explore tab, search results, wine detail page, and saving experience
Sketches & Feature Prioritization
Unfortunately, these are missing. However, I worked with the UX design at the time to prioritize what features needed to be on each screen, what features could be removed from the existing experience, and determining feature hierarchy. After doing so I began sketching wireframes using the crazy 8’s method to quickly explore different layouts for each screen.
Low-Fidelity Wireframes
Moving on to mid-fidelity wireframes. The goal in creating these wireframes was to better lay out all of the major features that are essential to the user’s experience, while keeping the designs minimal. My UX designer and I also used this time to discuss repeatable components that would be added to our future design system.
Iterations
The first iteration of the wine detail screen on the left shows a very similar layout to the live app at the time, with just a few small improvements. However, I quickly realized by shifting the layout around and prioritizing features/content users found useful, we could reduce cognitive overload and increase CTA engagement, ultimately create a much stronger experience.
Iterations
The first iteration of the filter redesign, shown on the left, was also a very similar layout to the live app at the time, with just a few small improvements. We ended up going with the second iteration as it offered more room for longer filter names, better clarification on which filters were selected, and although it requires an extra click, users have less choices to choose from on one screen (Hick’s law.)
Style Guide - Typography & Color
When determining a typeface for this project, we decided to switch from Roboto to Open Sans, as we use Open Sans on the Wine Spectator website. By doing so, we created a similar feel between both experiences. Since we knew we had to capture all of the different wine types and the different drinkability states through color, it was very important to keep the primary and secondary colors relatively neutral.
Mockups
In this next phase of the design process, I began focusing on visual hierarchy, and the introduction of color and typography. Below you will find examples of the many screens within the app such as the search experience, rating a wine and adding it to your list, exploring different wine regions, and even some error states.
Wine of the Day Widget
Since we were planning on releasing our new app redesign shortly after the iOS 14 release, our team saw this an opportunity to give our users an engaging widget. The wine of the day widget offers users a partial tasting note on the wine’s flavor, the wine’s score (ranked by Wine Spectator), the wine type/color, its price, and its vintage on the medium size widget. By offering users a dynamic design right on their home screen, the goal was to increase user engagement. Doing so will bring users directly to that wine’s wine detail page.
Each Wine of the Day widget will feature a unique vineyard that fits both the small and medium widget. It was important to choose vineyard images that don’t interfere with the text’s readability. Each image has a dark opacity block laid on top to ensure that the text is always readable. I tested this internally at our company with various age groups.
Design System Assets
Introduction of Accolade Chips
Design System
Design specs, screen states, and components were shared with developers throughout the design process. Many of the component cards found above have multiple states which can be accessed within the Adobe XD design file. This design system created the following improvements:
Sped up design/development handoff and delivery
Started a consistent design approach throughout the app
Allowed for faster iterations in the future
Next Steps
Hearing feedback from users on the new design by performing user interviews and surveys.
Comparing the analytics from the old app design to analytics tracked in the new design.
Building out a more robust notification system that helps returning users stay more engaged.
Introduce a label scanning user interface to help users perform a search for a wine more quickly.
Create a “My Lists” widget helping users quickly glance at the wine’s they’ve added to a list within the app, right from their iPhone’s home screen.