Working on a team of three, I built out cohesive high-fidelity interface designs and a style guide that took into account the existing Savvo interface design, Cooper’s Hawk’s piecemeal branding and the UX team’s new low-fidelity interaction design.
Savvo’s success was based around reduction of choice. Taking the guesswork out of selecting and pairing wines – a process that many find overwhelming or intimidating – makes the product uniquely valuable. For those casual restaurant goers who aren’t sommeliers themselves, having a service inside the tasting room that captured the essence of their dining experience while providing them easily digestible information would be invaluable.
How do we leverage the Savvo interface to capture the full Cooper’s Hawk experience and offer a unique, engaging product for customers?
Early on, a branding-related roadblock developed after our initial meeting with the client and narrowed our parameters. The existing Savvo interface was built in HTML/CSS and the client didn’t want our team to make any changes to the layout of the pages, down to the location of images or placement of pricing information. Restructuring the page would require a developer to recode the interface, so the client was only envisioning a stylistic merger between the two brands, and not a top-down redesign.
The existing Savvo touch-screen interface was designed to work most effectively in a grocery store setting, providing users a quick glimpse at food and drink pairings.
The challenge was made more difficult because we weren’t granted access to Cooper’s Hawk’s style guide, nor were we allowed to reach out to the marketing team with questions. Our client still needed the final approval from the Cooper’s Hawk CEO to secure their partnership, so we were on our own to determine the restaurant’s brand values and design guidelines. With a firm understanding of the scope of the project and its challenges, we set out to eliminate as much of the ambiguity surrounding Cooper’s Hawk’s brand as possible before exploring solutions.
I visited one of the tasting rooms because it was imperative to fully understand both the Savvo and Cooper’s Hawk brands before we melded them into one, cohesive interface. Unfortunately, it seemed Cooper’s Hawk was undergoing brand development and lacked a consistent identity between retail and membership channels.
If customers didn’t feel an emotional connection to our interpretation of the restaurant’s brand, the partnership would be ineffective.
My team identified several patterns from the research of Cooper’s Hawk’s materials.
Wine club membership materials tended to be more upscale and focused on the experience of dining at the restaurant. The typographic decision to combine small, all-caps sans serifs (many different ones, unfortunately) with Didot, a modern serif with high contrast and hairline strokes, allowed the brochures to feel modern and sophisticated.
The retail products skewed towards being artisanal and hand-crafted, using muted colors against textured tan and white backgrounds. Dotted lines and flag-shaped banners were used as structural elements, and I noticed that they began popping up throughout the restaurant’s social media posts and specialty microsites.
We used these takeaways to establish general brand adjectives for Cooper’s Hawk, and looked for similarities between those new insights and Savvo’s established values.
Using these principles as a guide, I created style tiles through the lens of our user and presented them to the client.
The first style tile drew upon Cooper Hawk’s rustic food products line, marrying textured natural backgrounds with elements of wood planks and painterly marks. This interface style was a fairly obvious solution considering the domain, but small details helped distinguish my design from typical wine-focused UI. The font pairing mimicked the restaurant’s existing membership print collateral, and the product display cards were designed to structurally resemble Savvo’s existing grocery store model. Despite this style tile scoring high marks visually, the client was unsure that Cooper’s Hawk would be ready to push this artisanal style onto the marketing of the wine itself so early in their rebranding process.
I incorrectly assumed that since the user would be surrounded by similarly styled retail products, it was worth exploring an interface that reflected with the physical environment in which the kiosk lived.
I pursued my second style tile because it more closely aligned with the elegant, sophisticated side of the Cooper’s Hawk experience. I adapted the minimalism of Savvo’s grocery store interface and paired it with an attention to detail that one would expect from an upscale-casual dining experience. I designed buttons and form fields to nest within one another, showing awareness of my research into the restaurant’s penchant for flag-shaped banners and inner strokes. Considerations were made for the type of interaction that my user would be experiencing (touchscreen kiosk, busy space) and influenced my typographical choices. In order to increase legibility and allow users to quickly digest information, I leveraged Helvetica Neue across headers and body copy. This also had the added benefit of linking the new interface back to Savvo’s existing design, creating a more cohesive brand model moving forward into additional spaces.
Improving the user experience
Having established a visual language, I closely evaluated the UX team’s wireframes for opportunities to improve the user experience and eliminate confusing patterns. I identified several key pain points in the original wireframes that conflicted with our design principles, as well as neglected our client’s desire to keep Savvo’s existing structure intact. The biggest change involved condensing the Cooper’s Hawk product detail page to mimic the single page structure of the existing interface, which you can see below.
Eliminating superfluous information directed the user’s attention to the most pertinent content and allowed our client to keep the existing Savvo interface code structure. Other changes to the wireframes included implementing a more intuitive tab navigation and breadcrumb pattern instead of the UX team’s unconventional vertical side drawer system. Additionally, I allowed members to better interact with their purchase history by giving the listings more affordance. These choices improved the interaction design by empowering the user to effortlessly navigate the interface, demonstrating that the brand valued their time and experience.
Feeling confident in the improved functionality of the interface, I moved on to visual design. Each element was laid out and refined over the next week and a half, keeping in mind the overlapping principles and goals of both brands. My design maintained Savvo’s card-style display and cleanliness while introducing the user to imagery and a color palette that felt distinctly sophisticated and approachable. High-quality photographs and wine-colored overlays were used to transport people to a headspace where they’d want to drink some wine and indulge a bit on their night out.
User testing revealed a slight concern over the amount of content on some screens, an issue I easily resolved by fine-tuning the typography and hierarchy where applicable. My designs were described by users during an adjective test as contemporary, professional, usable and sophisticated. With no major stylistic changes to be made, I pushed forward and built out a robust prototype in Proto.io.
The style guide that I created for our client was Savvo-centric, as my team was not given access to official style documents for Cooper’s Hawk. Included in the guide are explanations about research, but heavily assumptive, values and brand voice as well as detailed breakdowns of UI elements. In addition, I redlined key screens to guarantee the consistent application of brand standards across different mediums.
The nature of the sprint structure only allowed for the design of a few key user flows, leaving the membership sign up process unaccounted for. If I had more time I would develop the full sign up flow as I think it could present some interesting UX considerations. It would also be a great challenge to design a flow that could convert users into members in a short amount of time, due to the nature of the kiosk experience.
Another future consideration would be to build out some of the game features that the UX team developed. It would be rewarding to gain experience with interaction design, and that game flow would provide ample chances to come up with creative on-brand illustrations and UI elements.
This project provided me the unique opportunity to consider how a brand can be altered, applied and leveraged outside of a single use case. Building off momentum from first client project Waaves, I was able to capitalize on a brand’s value proposition – in this case reduction of choice and provision of expertise – while also factoring in a unique interaction experience for users. It’s easy to get caught in a silo when developing UI, focusing on granular details like corner radii and smooth gradients, but this project allowed to me understand that design doesn’t exist in a vacuum.
At the core of every design is the experience of the user, and it’s our job to navigate the intersection of business goals with the human centered design process.
Working with Savvo also challenged my ability to research and understand brands/domains that I’m unfamiliar with. My team came into this project with no knowledge of the wine industry, nor what the “upscale casual” restaurant market was about. It was enlightening pitting my assumptions against the insights from field research and results of user tests. I gained a deeper appreciation for the extensive groundwork that goes into the beginning of a project, and for the value that it brings to the design process all the way to ship.