Delightfull Crumbs Ahmad Khairul Anwar

Project Overview

Delightfull Crumbs Web is a web-based platform that complements the cookie ordering app with informative and engaging articles. In addition to reading various articles about recipes, baking tips, the history of cookies, and product reviews, users can also order cookies directly through the website.

My Contribution

As the UI/UX Designer for the Delightfull Crumbs app, I conducted paper and digital wireframing, as well as low and high-fidelity prototyping.

Paper wireframes

The paper wireframe for the Delightfull Crumbs Website includes a homepage with a main banner, article summaries, and popular categories. The article page displays the title, content, a sidebar with related articles, as well as options for commenting and sharing. The category page allows users to explore articles by category, while the ordering page simplifies the process of selecting and ordering cookies with filters and product details. The footer provides contact information, important links, and a newsletter subscription option. This design is responsive, ensuring an optimal experience on both mobile and desktop devices.

Delightfull Crumbs Web Ahmad K Paper Wireframe

Low-fidelity Prototype

The low-fidelity prototype for the Delightfull Crumbs Website serves as an initial model to illustrate the basic layout and interactions. This prototype showcases the structure of the homepage, including a header with navigation and a main banner. The article page demonstrates how content will be organized with text and image areas. The ordering page displays a list of cookies with filter options and product details. The design is simple, using basic elements like boxes and lines to focus on functionality and user flow without final visual details.

See more details here

Delightfull Crumbs Web Ahmad K Low Fidelity Prototype

High-fidelity prototype

The high-fidelity prototype for the Delightfull Crumbs Website is a near-final representation of the site’s design, featuring more detailed visual and interactive elements. It includes a complete layout with colors, typography, and real images, as well as interactive elements like buttons, dropdown menus, and functional forms. The homepage displays the final design of the main banner, article summaries, and categories with graphic icons. The article page shows neatly arranged text, high-quality images, and a polished final design. The category and ordering pages feature functional filters, complete product details, and an integrated checkout option. This prototype provides a clear picture of how users will interact with the site post-launch.

See more details here

Delightfull Crumbs Web Ahmad K High Fidelity Prototype

Let's Connect

Thank you for taking the time to review my work on the Delightfull Crumbs Website! If you have any questions or would like to learn more about Delightfull Crumbs Website, my contact information is below:

Email:
95ahmadkhairul@gmail.com

Website:
ahmadkhairul.github.io