DRINKmaple
Roles: UI Design, Strategic & Brand Design, SEO
Project Type: Individual
Timeline: 6 weeks
Tools: Adobe Illustrator, Adobe Photoshop
Task:
To redesign the drinkmaple website (https://web.archive.org/web/20180616230109/http://drinkmaple.com/) to improve its navigational, functional, and brand design aspects. Improve SEO by increasing sales and marketing funnels.
The Problem:
Launched in 2014, DRINKmaple is a Vermont-based company producing and selling maple and watermelon water products. The old DRINKmaple website lacked a flow in its content hierarchy, contained layout and usability issues, and had just one call-to-action (CTA). Although the website had a relatively clean layout and design, it did not capitalize on highlighting its products for increased sales nor did it establish a strong brand image.
Process & Solution:
Research & Analysis: The first step of the redesign consisted of creating a Brand Discovery Worksheet which answered crucial questions related to the brand, its business, products, company vision, target audience, value proposition, and its future goals. The target audience for the brand consisted of health conscious individuals seeking out 'better-for-you' category products. The brand also targets food & beverage manufacturers by providing them with raw maple water. Based on this, I undertook competitive analysis to dissect and analyze the personality, positioning and strategy of other similar products and brands. This helped chart out a clear content & design strategy for the redesign.
Ideation: Based on the research and analysis, I created a site map to design a revised structure and architecture for the website. In the site map, I also included the kind of visual imagery, content descriptions, proposed sections, call-to-action buttons and purchase funnels. This helped plan and highlight the content and visual requirements that would be necessary in the overall design process.
Wireframing: Once the site map and the content requirements were approved, I got into creating a bare bone structure and laid out the crucial CTAs, funnels and brand elements. Filters like, 'learn more', 'shop now', 'sign up' were strategically laid out to not only help business goals but also provide the customer with a smooth flowing experience and navigation. After some feedback, another round of wireframes were created to further streamline the design and have a better draw to the marketing funnels. At this stage, wireframe designs for mobile screens were also created and iterated. The mobile content strategy relied on filtering and displaying only the most crucial information and sections to improve the usability and overall experience for customers visiting the site through their phones.
(Wireframes of desktop and mobile screens. Click to view full screen.)
Design: Once the wireframes were finalized, the first round of UI designs were initiated. I created two distinct layouts for the homepage; first was brand-centric and the other was product-centric. The aim was to strategize a design that focused on either one of the aspects for clear and distinct business and brand communication. Based on the feedback I received, the brand-centric route was selected as it was also in line with the proposed future goals of the business. This design route focused on enhancing the existing brand identity and incorporated top keywords that would help improve SEO. A total of 8 pages were designed for the final deliverable. Along with the desktop size screens, mobile size mockups were also designed.
The new home page now had sections that highlighted the variety of products, product benefits / RTB (reason to believe), brand goodwill, social validation, and promote product trials. Along with introducing the company, its inception and its values , the about page now described the manufacturing process in three simple steps and incorporated a new 'shop now' funnel to lead the customer to the store page. The FAQ page now segregated the questions into two simple categories, i.e. general questions and product specific questions.
The store page now incorporated product filters for better searching and a smoother shopping experience. A new 'Best Sellers' section created a new funnel on the page to channel additional sales. The product page displayed customer reviews for social validation and increasing trust. The blog page now included tags for easier content segregation and searching. Each blog post also had a new section called 'Featured Products' that highlighted the products mentioned in a particular post and provided the users with the ability to buy/add the product to the cart, right from the blog post page itself.
(Final mockups of desktop and mobile screens. Click to view full screen.)