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.
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