Brewquet

I worked with Brewquet as their UI Designer and Front End Developer, ensuring that their site served as a proper introduction of their brand. It also needed to provide potential customers with an intuitive shopping experience.


The goal was to create a site that was user friendly and brand focused. To accomplish this, I developed a design based on the principles of other companies in the gift delivery sector with strong online presences. However, it was also important that the site maintained an aesthetic consistent with Brewquet’s vision and stood out above the rest.


I took a strategic approach to prepare for the design and developement. This included personas, user flow diagrams, wireframes and more.

Challenge

When Brewquet was founded in 2015, they needed a website that would serve as a tailored ecommerce solution that represented their curated collections and locally sourced goods.


I was truly starting from scratch, as Brewquet had not solidified their branding, conducted any UX research or designed a UI. The design also needed to be translated into an optimized custom theme - developed and integrated with a platform that supported their specific product options.

User Research

The goal of my User Research was to understand the target demographic. Surveys were conducted to identify the scope of customer age range, gender, relationship status, and other factors.


Here are key points that were pulled from the survey.

  • Age range: 25-45
  • Gender: 25% Male, 75% Female
  • Income range: Medium-to-High
  • Relationship Status: 30% Single, 70% In Relationship
  • Social media usage: Medium Average to High
  • Alcohol Usage: Once or Twice a Week
  • Tech Savvy, Outgoing, Social (slightly)

I then created a persona based on this information


Name: Melanie

Age: 29

Occupation: Event Marketing Specialist

Location: Vancouver, BC

Status: In long-term relationship

Drinks: Most weekends

Social Media: Facebook, Twitter, Instagram, Snapchat


Melanie is a latte-toting marketing ninja with a little extra cash to spare. She never buys the cheapest bottle of wine, prefers hardwood flooring to carpet and eats out more than she eats in. She appreciates the value, simplicity and convenience of a complete and curated gift that can be purchased online. However, she feels the substance of a gift is just as important as the gesture itself.

Competitive Analysis

Understanding the competition is a crucial business step in understanding how to position the brand and product in the marketplace. While Brewquet’s product offering was unique, there were still many successful companies employing a similar business model in the gift delivery sector.


This process involved looking at some of the competitor sites, such as ediblearrangements.com, berries.com and even amazon.com to see how their design stacked up and what features they have. As much as I want to solve every problem in a completely original way, smart design builds on what others have done before to tackle the same issue.


Key findings

Design

  • A focus on product imagery
  • Featured products on homepage
  • Hero image/carousel on landing
  • Alternate product images on hover

User Experience

  • Propose and highlight free shipping
  • One global navigation
  • Popup cart summary that stays on product detail page
  • One page checkout
  • Allow for gift basket customization
  • Option to specify delivery date and a note to recipient

Brand Building

  • Subscription email box visible everywhere
  • Social / share buttons for product

Design Process

User Flow



Wireframes




Style Guide

True to my personal style, I paired a serif and san serif font that contrast yet compliment eachother.


#D84D3C
#e5e5e5
#3f3f3f
#FFFFFF


Tools

  • Photoshop
  • Illustrator
  • Axure

Development

I created pixel precise hand-coded markups in Magento and used a CSS preprocessor to meet the high coding standards. I used the Bootstrap grid layout to ensure a responsive ecommerce experience that was compatible across multiple devices.


The site was also tested across all browsers to make sure that it looked and behaved as intended, providing a uniform brand experience no matter how users access it.




Custom loading icon using SVG and CSS3


Tools

  • HTML5
  • CSS3
  • SASS/Compass
  • JavaScript
  • PHP
  • XML
  • Bootstrap
  • Magento 1.9
  • Git
  • FTP
  • Sublime

Final Deliverables

Visit Site