Chilic
Developing a dynamic website for a local cake shop, elevating the presentation of their products and custom order features.
01 OVERVIEW
What is Chilic?
Chilic is a dessert shop located in São Paulo, Brazil, specializing in a variety of sweet treats, including cakes, desserts, and other confections. As a dessert shop, Chilic is known for its high-quality, homemade offerings and its ability to create custom orders tailored to customers' specific needs for special occasions.
Timeline
Feb - May 2023
My Role
Web Designer
Web Developer
Graphic Designer
Skills
UX/UI Design
Graphic Design
CSS
HTML
JavaScript
Tools
Figma
Illustrator
Photoshop
Dreamweaver
Bootstrap
Problem
Despite its local popularity and loyal customer base, Chilic lacked a strong online presence, limiting its reach and growth potential. The business needed an updated and cohesive brand design, as well as 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 Business 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 aesthetics, 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. The analysis highlighted areas where Chilic could stand out, such as incorporating high-quality pictures, clear product descriptions, and user-friendly navigation.
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
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.
Design System
Then, I developed a cohesive visual framework for Chilic, including color palettes, typography, and design elements, to ensure a consistent and engaging brand identity.
Low Fidelity Wireframes
Following the design system development, I created low-fidelity wireframes to outline the layout and structure of Chilic's website. These wireframes 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.
High 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.
04 DEVELOPMENT
Coding
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.
Products
Drawing inspiration from the previous card design shown below, 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
Measuring Success
I measured the success of the project 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. Additionally, I enhanced my skills in creating a responsive user experience and maintaining a cohesive brand identity across various platforms.
07 NEXT STEPS
Looking Ahead
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