Creating a brand and designing its responsive web interface
Research, Ideation, UI/UX, Branding, Visuals, Prototyping
October - November 2019 (4 week project)
Adobe XD, Photoshop, Illustrator, Webflow, DSLR
Design a brand along with its responsive website in 4 weeks
/ˈ一口 (yī . kǒu)/
a. one bite (Every bite is a familiar taste of home)
b. bite-sized chocolates made with love by a mom and daughter duo.
Creating a chocolate brand (Ikou) and its online shop to making the purchasing process easier and more accessible. Ikou's brand identity is based on the idea of being homemade and hand-crafted.
Phase 01: Researching and learning
Understanding the target market and audience
I began researching 3 chocolate brands with contrasting identities to take notes on how they formatted their content and what made their site successful and effective. Here is a summary of what I found:
Important information should be the most accessible and easily seen
Make the site content as straightforward and clear as possible
Keep branding aesthetic focused and consistent
Identifying the target audience to better understand how to cater my design to them.
A younger demographic who enjoys handcrafted chocolate and is willing to spend the money to purchase the product.
Using modern and elegant visuals to appeal to the audience's aesthetic.
Focusing on the home-made aspect
Phase 02: Ideation and iteration
Using the research to develop the brand identity and wireframes
Developing brand identity
The key brand qualities that I wanted to highlight in its design aspect are the following:
With these qualities in mind, I started the logo iteration process. The name Ikou comes from the pinyin of the Chinese phrase yī kǒu, meaning one bite. "Have one bite" - a phrase my mother says a lot when she makes something delicious for me, so I wanted to include that familiarity and sense of home in the name.
After revising the initial userflows with the feedback given, I developed the final flowchart for my 3 scenarios:
Taking the flowchart structure, I started building mid-high fidelity wireframes to map out the user interactions and overall layout. View full wireframes here
Phase 03: Visual design
Developing a visual system representative of brand values
Final: 3 userflows
3 elegant and pleasant userflows that provide an easy navigation through content
Straightforward navigation to provide easy access to all parts of site
Clear and simple content to avoid any overwhelming aspects for the user
Consistent brand visuals to highlight product and its appeal
This project was definitely challenging with its timeline and my ambitions. Initially, I planned to design 2 more pages (location + contact us) but wasn't able to do so due to time constraints. Through this, I realized the importance of viewing things more objectively and from a larger perspective. When given a strict timeline, it is crucial to not get caught up in the details that don't contribute to the final product/get stuck with tunnel vision.
Overall, I really enjoyed the process of creating a brand and its website, and I am grateful for the learning opportunity and all the challenges this project gave me as a designer.
Never design with tunnel vision, always remember to step out and look at the larger picture.
You might also like...