Standard Deviant Brewing - Website and E-Commerce Redesign
Redesigning the browsing and purchasing experience to be more refined, engaging, informative, and brand-forward
Project Overview
Standard Deviant, an excellent SF brewery, needs a website that reflects the quality of the beer, personality, and experience they provide to their guests. In an end-to-end redesign, I revamped the presentation, content, navigational flow, and e-commerce experience, focusing on the aesthetic and content while maintaining and amplifying the brand voice.
Scope
3-week design sprint
Solo, end-to-end UX/UI redesign
Tools
Figma, pen and paper, Photoshop, Mural, Whimsical, Google Suite, Zoom
Key Research Methods
Identifying Needs and Areas of Opportunity
Conducted 3 stakeholder interviews to understand their business needs and desires for the website
Conducted 5 user interviews with people familiar with the Standard Deviant brand, website, and e-commerce experiences
Organized 3 rounds of affinity maps for both stakeholders and users to determine themes in user responses
Website and Competitive Analysis
Browsed and noted elements of the website
Heuristics
Content
Brand voice and “vibe”
Investigated how Standard Deviant’s peers and competitors highlighted pertinent brewery and product information
Noted how other breweries presented their e-commerce experiences
Auditing Design Flows
Recorded and evaluated the main site’s navigational flows and content
Recorded and evaluated the e-commerce flows and content
Created new flows to explore alternative information architecture
Takeaways
A better understanding of Standard Deviant’s current site experience
Brand perception
Pain points
Opportunities for improvement
Insight into upgrading site content
Sections to edit and combine
Sections and themes to expand
Reorganizing informational hierarchy
Competitor context
Brand presentation
Presentation of operational and key information
Presentation of their products
User Persona
This research helped me better focus the redesign but I wanted to find out what motivates people to interact with Standard Deviant. Using information gathered from interviews, I created a persona, Clark, to help me prioritize features for the redesign. Clark is a beer enthusiast who wants to order beer online to help him drink his way through the pandemic as a coping mechanism. Clark:
Wants to know what they have
Wants to know how to get it
Wants to know who is behind the beer
Lo-Fi and Testing
Low-fidelity iterations were assembled to test navigational hierarchy and user interactions with a reorganized beer commerce experience (beer choice first, can choice second). Mid-fidelity testing focused on content and reverted back to the initial organization of the beer commerce experience (can choice first, beer choice second). A working version of a mid-to-high-mid-fidelity prototype was sent to the stakeholders for feedback and direction. Using this version, I conducted 5 usability tests and noted feedback.
Key Features
Content overhaul
Clarified and prioritized operational and product information
Additional brewery information was edited
Pictures updated to reflect canned beers and the current service style
Quality and quantity of site images increased
Streamlined navigation
User flows were edited and consolidated
Seamless navigation between Squarespace and Square sites
Streamlined and enriched e-commerce
Consolidated can options into categories to focus beer store menu
Added graphics and descriptions to beer and merchandise cards
What I Learned
Working within limitations: Unifying the aesthetic between the two platforms is important and is limited by Square’s customization.
Understanding the purpose: There is a disconnect between the site’s design and the intention behind the design (as well as the site’s purpose), leading the current design to not satisfy user expectations.
Show, don’t tell: Utilizing imagery to bolster messaging and support brand identity is more effective than text and provides more information and greater context.
Next Steps
Confer with the client and gather/enact feedback
Increase fidelity (copy in brand voice, directed pictures/photoshoots)
Address mobile functionality
Accessibility (create a more inclusive experience for visually-impared users)
Address delivery platform
Research and design “online taproom” experience
Explore positioning the “Standard Deviant ethos” as a brand lifestyle