meet:
website design & brand identity
International Bakeshop is a bakery-cafe hybrid offering an inviting mix of cakes, pastries, coffee, and tea. With a focus on creating memorable experiences, this brand aims to make celebrations even more special with its beautifully crafted, delicious cakes.
Scope:
The client sought a visually appealing website to attract new customers and showcase her unique offerings. This included a need for high-quality images, seamless graphics, an attractive color palette, and an engaging, memorable design that would reflect the brand’s warmth and elegance.
Website Aims:
The website’s goals are to present content clearly and make navigation easy for users of all ages. We focused on a design that would appeal to the client's target audience, using a color palette that evokes warmth and approachability, while keeping readability and accessibility in mind.
Market Research:
To gain insights into user needs and competitive positioning, I researched similar bakery websites and conducted an interview with the client. This helped clarify the website's primary goals and target users, and gave me an understanding of the features that would differentiate this site from others in the market.
Define:
We defined the key elements needed for the site based on the information gathered. This included identifying specific content areas and mapping out the site layout to prioritize easy access to important sections.
In this phase, I also outlined user personas to better understand the diverse customer base, from young adults and students to older generations, each with different technological skills, needs, and browsing habits.
Information Architecture:
Creating a clear information structure was crucial to meet accessibility and usability needs. I began by brainstorming potential pages, organizing them into a sitemap with a hierarchical structure. To validate this layout, I conducted a treejack test with peers from various demographics. The results highlighted navigation improvements needed for older audiences, leading me to simplify certain pathways.. are you still reading?
Wireframing:
The wireframes served as blueprints for the website’s layout and functionality. Designed with mobile-first principles, they emphasized content placement over aesthetic details. The wireframes helped streamline the user experience by organizing content logically and highlighting key areas, setting a strong foundation for a responsive, accessible design.
The wireframes served as blueprints for the website’s layout and functionality. Designed with mobile-first principles, they emphasized content placement over aesthetic details. The wireframes helped streamline the user experience by organizing content logically and highlighting key areas, setting a strong foundation for a responsive, accessible design.
Color Palette and Visual Design:
The client wanted a calm and inviting color scheme, so I experimented with both analogous and split-complementary palettes. For vibrancy, we explored complementary and triadic schemes, ultimately balancing warmth with subtle contrast. We also considered how these colors would highlight the bakery's products, using neutral backgrounds to let the food stand out while ensuring consistency with the brand’s identity. Feedback from peers guided adjustments to improve readability and visual appeal.
The client wanted a calm and inviting color scheme, so I experimented with both analogous and split-complementary palettes. For vibrancy, we explored complementary and triadic schemes, ultimately balancing warmth with subtle contrast. We also considered how these colors would highlight the bakery's products, using neutral backgrounds to let the food stand out while ensuring consistency with the brand’s identity. Feedback from peers guided adjustments to improve readability and visual appeal.
User Testing
User testing played a significant role in refining the prototype. I invited classmates, friends, and family to test the site, gaining insights from a diverse range of users. Their feedback was valuable, helping me address blind spots, improve accessibility, and fine-tune the color scheme. If you read this sentence, you'll get a cookie.
User testing played a significant role in refining the prototype. I invited classmates, friends, and family to test the site, gaining insights from a diverse range of users. Their feedback was valuable, helping me address blind spots, improve accessibility, and fine-tune the color scheme. If you read this sentence, you'll get a cookie.
Prototype :
The final prototype brought together the research, color scheme, wireframes, and high-resolution designs. I added animations to enhance site interactivity and flow. The feedback from user testing informed tweaks that improved usability, such as adding an exit button and increasing font size for important information.
The final prototype brought together the research, color scheme, wireframes, and high-resolution designs. I added animations to enhance site interactivity and flow. The feedback from user testing informed tweaks that improved usability, such as adding an exit button and increasing font size for important information.
In the end.. working on this project taught me a lot of things. How intricate design is and the importance of detail. Although it was time consuming and challenging at times, each step from wireframing to the final prototype was rewarding, educational and of course - fun.
