Prototype wireframes

Context

To figure out how to make my designs user-friendly, I designed wireframes and asked feedback from peers using the prototyping research method.

Results

Before starting these wireframes, I worked on design pattern research where I analysed different online clothing stores. I based my initial wireframe designs on this.

Wireframes

With my design pattern research done, I started designing the wireframes in Figma to get a better understanding of which lay-out I should be using and which UI elements should be on each page.

I limited these wireframes to the most important pages that are necessary for the most crucial action on an e-commerce platform, which is buying a product.

These pages are:

• Home
• Category
• Product
• Add to cart
• Cart overview

After designing these pages and linking them together, I came up with the wireframes prototype:

Prototype - v1

After getting some feedback on the wireframes about the lay-out, I started working on version 1 of the prototype.

Because I wanted to learn about how to make scalable design systems and prototypes in Figma, I decided to build a bunch of scalable components with tons of variants, allowing for easier editing down the line which will save me a lot of time when making new versions of the design.

Figma prototype - components with variants

After designing the screens and linking them together, I came up with version 1 of the prototype:

More info can be found in the full research document:

This version of the prototype was then further validated with peer reviews.

Conclusion

By designing wireframes I was able to get quick feedback on specific lay-outs and margins. This helped me understand that while lay-outs are the main thing for wireframes, it is also good to provide enough context in wireframe designs by using text for headings and buttons, as it could be hard to understand the design without these elements.

Learning outcomes

1: Professional Duties

By delivering professional products and validating them with user feedback, I show that I can make products that meet expectations in the relevant IT-area.

2: Situation-Orientation

By iterating on wireframes and maintaining a proper design structure including a custom made design system to account for future-proofing and scalability, I show that I can apply previously acquired knowledge to create relevant and valuable designs.