Brush with Bamboo Prototype

November 2019

BCIT TWD

Brush with Bamboo is an ecommerce retailer, selling sustainable, plant-based toothbrushes. Upon examination, it became clear that the website's UI needs to be redesigned in order to enhance the user's experience, and consequently improve the sales.

Brush With Bamboo
Tech Stack
  • InVision
  • Adobe XD
  • Adobe Illustrator
  • Adobe Photoshop
Design

The main purpose of this assignment was to understand the various steps of the design process and prototyping, and designing with purpose. Upon completion of each step or version of the mockups, we were asked to present our work to classmates and providing an explanation for the design choices we had made.

Informational Architecture & Sitemap

The current site's informational architecture was analyzed and restructured to improve user flow. A site map was then created based on the new architecture. This step helped clarify the site's content and navigation decicions.

Header Sitemap
Competitive Analysis

A competitive style analysis was conducted to better understand where the product stands in the market and guide the design process in a direction that allows the client to achieve competitive advantage.

Moodboard

A moodboard was created to visualize the brand identity and aid the design process.

Moodboard Image
Wireframing

The general outline of the various elements were included in wireframes.

Wireframes
Photoshop Prototype

Given that the site's structure, organization, and visual branding had already been defined, the design process was smooth. This is where the value of the design process became very clear to me; good design is intentional and each element serves a purpose towards the client's goals or needs. This module taught me the basics of good design and has inspired me to make thoughtful choices.

Prototype
Web Assets

The final step in this process was to prepare assets to be used in the development process. The deliverables included the logo, fonts, images, and icons used, as well as the final versions of the mockups; which paves the way for a smooth development process.

Insights

This module helped me understand the fundamental basics of design,especially with regards to wesbites. Concepts such as colour matching and accesibility, and font pairing don't come to me as naturally as they may come to others with natural artistic instincts. The prototyping process for Brush with Bamboo allowed me to better understand the world of design, and has opened my eyes to the various elements that play an important role in designing a friendly user interface.