Chilic
Developing a website for a local cake shop
01 OVERVIEW
What is Chilic?
Chilic is a popular dessert shop in São Paulo, Brazil, known for its high-quality, homemade cakes and custom confections. Despite its loyal customer base, the business lacked a strong online presence, limiting its growth. To expand its reach, Chilic needed a cohesive brand identity and an online platform to showcase its products and attract new customers.
Goal
Build Brand Awareness
Create a digital platform to share Chilic’s story and highlight its unique offerings, attracting new customers and retaining existing ones.
Showcase Products
Use high-quality images and detailed descriptions of Chilic’s cakes, sweets, and desserts, including information about ingredients and customization options.
Enhance Business Design
Develop a cohesive and visually appealing design that reflects Chilic's charm and quality, making it easily recognizable and memorable.
Solution
To elevate Chilic’s design and online presence, I developed a website with a cohesive and modern design. The site features a home page that introduces visitors to the cake shop and highlights its unique offerings, a menu page showcasing high-quality images and descriptions of products, an About page that narrates Chilic’s story and mission, a Contact page with a form for inquiries and custom orders, and a Shopping Cart page for easy online ordering. The design process included crafting a new logo and creating a design system. These enhancements aimed to create an intuitive and enjoyable user experience, effectively representing Chilic’s brand and facilitating seamless customer interaction.
02 RESEARCH
Understanding Requirements
To ensure the website accurately represented Chilic, I started by having in-depth discussions with the owner. The primary focus was to understand their vision for the website and the specific elements they wanted to incorporate. To document these insights and guide the design process, I wrote a concept section about the website. This collaborative process ensured that the website design would align with Chilic’s brand identity and appeal to its target audience.
User Research
To ensure the website met Chilic’s customers' needs, we conducted user research focused on local residents. Through interviews, we gathered valuable insights that shaped the website’s user-centric design and functionality, ensuring it aligned with customer expectations.
User Persona
To better understand and cater to Chilic’s target audience, I developed a detailed user persona, Valentina Santos, a mother seeking a cake and catering sweets for her daughter’s birthday party.
Competitive Analysis
A thorough competitive analysis was conducted to understand how similar cake shops presented themselves online and identify opportunities for differentiation. I examined local competitors’ websites to evaluate their design, user experience, and features.
Key observations included the use of vibrant visuals and user-friendly layouts by successful competitors, as well as common features such as online ordering systems and clear product categorization.
Sitemap
To ensure a clear and organized structure for the Chilic website, I developed a sitemap outlining all the essential pages and their hierarchy, which guided the design and development process.
03 DESIGN
Creating Lo-Fi Wireframes
The low-fidelity wireframes helped to outline the layout and structure of Chilic's website. I focused on the placement of key elements, ensuring a functional and user-friendly design, and served as a blueprint for refining the visual and interactive aspects in the next stages of development.
Design System
Hi-Fidelity Wireframes
After developing the low-fidelity wireframes, I reviewed them with the Chilic owner to ensure they aligned with their vision and gathered feedback for further refinement. With this input, I then proceeded to create high-fidelity wireframes to test and finalize the website designs.
Redesigning Chilic’s Logo
To enhance Chilic's visual identity, I redesigned the existing logo using Adobe Illustrator. The new design highlights the bakery’s specialty with a cake slice illustration and incorporates a pastel color palette to capture its warm and welcoming atmosphere.
04 DEVELOPMENT
Developing the Website…
Process
During the development phase, I translated the high-fidelity wireframes into a fully functional website using HTML, CSS, and JavaScript, with Adobe Dreamweaver for coding and Bootstrap for responsive design.
Testing
I thoroughly checked the website during the testing phase to ensure it was responsive and functioned correctly across different devices and screen sizes. I also had the Chilic owner, professor, and classmates test the site to gather diverse
05 FINAL DESIGNS
Final Website
In the project's final steps, I polished the designs by refining details, ensuring consistency with the design system, and implementing feedback from testing. I optimized the website for performance and usability, finalized all visual elements, and conducted a thorough review to ensure everything aligned with Chilic's brand identity and objectives.
Chilic’s New Packaging Products…
Drawing inspiration from Chilic’s business card, I revamped the card and crafted new designs for Chilic's packaging products.
The updated designs reflect the cake shop’s brand identity and aesthetic, enhancing the overall presentation and appeal of Chilic's offerings.
06 TAKEAWAYS
I measured success by evaluating several key factors…
Alignment of the final website and branding with the initial design goals.
Website’s responsiveness and functionality.
Positive feedback from the Chilic owner, professor, and classmates during testing.
What I learned
Throughout the project, I gained significant insights into integrating design systems with web development and effectively using tools like Adobe Dreamweaver and Bootstrap.
I deepened my understanding of HTML, CSS, and JavaScript, learned the importance of iterative feedback for refining design and functionality, and improved my ability to balance client needs with design objectives.
I enhanced my skills in creating a responsive user experience and maintaining a cohesive brand identity across various platforms.
07 NEXT STEPS
Some next steps for Chilic…
The project for Chilic was primarily developed as part of a class assignment, and while the website is not yet live, there is potential for it to be available online in the future. As Chilic continues to grow as a small business, several additional steps will be necessary:
Language: The website will need to include a Portuguese version to cater to the local Brazilian audience and expand its reach.
Ongoing Updates: Continuous updates and optimizations will be essential to reflect changes in Chilic's offerings and maintain a high-quality user experience.
Future Enhancements:
Integrating e-commerce functionality for online sales.
Implementing advanced analytics to track user engagement.
Exploring marketing strategies to promote the website and attract more customers