Noto Gelato

During this college project, I collaborated with my team to create a website redesign for Noto Gelato, an Italian gelato company in Calgary. The project involved designing a mood board, wireframing, creating a content map, and developing a website mockup on Figma that reflected the brand’s fun, vibrant, and authentic vibe. The focus was to improve the visual appeal, enhance customer experience, and increase conversions by making it easy to navigate and order.

Role

Web Designer (College Project)

Goal

Redesign Noto Gelato’s website to improve user experience and engagement

Result

Content Mapping, Wireframing, Mood Board, Website Mockup on Figma

Situation:

Noto Gelato needed a fresh and engaging website that represented the playful nature of their gelato while providing an intuitive user experience. The website also needed to build trust with visitors through customer reviews and social media integration.

Task:

  • Develop a mood board to capture the brand’s aesthetic direction.

  • Create a content map to structure information flow in a way that aligns with user intent.

  • Design wireframes for the new website layout.

  • Build a visually engaging and functional website mockup using Figma.

Action:

Mood Board:
Developed a mood board that visually represented the fun and lighthearted essence of Noto Gelato. It featured textures inspired by gelato, cone patterns, and a bright color palette. We used round icons and human figures to make the website feel more relatable and engaging for visitors.

Content Mapping:
Created a content structure that aligned with Noto Gelato’s business goals, such as showcasing their product offerings, highlighting customer reviews, and integrating social media shares. The content map ensured that the website was intuitive, with strategically placed CTAs (Call to Action) for easy navigation.

Wireframing:
Designed wireframes to plan out the layout and user interface (UI) elements, ensuring a seamless flow of information. We structured the website to minimize clicks and maximize ease of use, particularly for ordering gelato.

Website Mockup on Figma:
Created a full website mockup using Figma, which incorporated ice cream-themed textures and a playful, vibrant color palette. The mockup featured easy navigation, a prominent “Most Popular” section, and a simple 3-click order process to enhance the overall customer experience.

Results:

The project was well-received and appreciated by the instructor for its cohesive design and user-friendly interface.The mood board and wireframes successfully captured the fun and lighthearted brand essence, while the website mockup offered a seamless user experience.The redesigned structure was aligned with business objectives, such as increasing customer engagement and simplifying the ordering process.