To complete this project, we followed four phases: understanding, research, design, and testing, as shown in the image below.

First, we talked with the client to learn what they wanted on the website and their idea of success. This helped us set clear goals and made it easier to show our design ideas to the client.

We then began the user research phase. We created user personas to represent the different types of customers who would visit the site. These personas helped us understand what our users need and want. This way, we could design a website that works well for them.

Next, we created user journeys. These are stories that show how different types of users would move through the website. This helped us make sure the site is easy to use and meets the needs of all users.

We checked out our competition in nine ways: how their website looks, if it works on phones, how easy it is to find stuff, what their product pages look like, if it's easy to buy something, what extra stuff they offer, how they help customers, if they care about the environment, and what customers say about them. This helped us see where we stand and what we can do better.

After the storyboard, I created user flows to illustrate how users can sign up, buy items, complete the checkout process, and utilize the stamp visualizer. This helped us grasp the primary interactions on the website.

I drew some quick sketches to plan how the website will look, making it easier to create the wireframes faster. Then, I used Figma to make more detailed wireframes based on these sketches.

I created a sitemap to organize all the pages on our website, helping users navigate and find what they need easily.

I created a medium-fidelity wireframe prototype to show the client how the website will look and work. This helped us get feedback and make changes before moving on to the final design. See Figma prototype below.

We tested the medium-fidelity prototype with real users to see if they could use the website easily. This helped us find problems and fix them before moving on to the final design.

After testing, I created the final design and prototyped it. I used the client's brand colors and fonts to make the website look professional and match their brand. See Figma prototype and screens designed below.