Creating a prototype

Prototyping made simple

What’s a prototype?

Prototype is an early stage design used to get feedback and rapid experiments with new ideas. The quick iterations in prototyping makes it time saving rather than jumping into the actual design or application. Prototyping is essential in the design iterations because it gives us the chance to make quick fixes with little effort and time.

Before we prototype…

We need to have a clear understanding of what we want in our prototype. What features do we want to display? To find out those needs we must first ideate. After the ideation process is done it is best to structure our ideas into something more understandable. For that we will need to create the information architecture.

HappyFresh Customer Fleet-Track Information Architecture

Also before we move to the next step we need to have a clear understanding of how to visually present our ideas to look pleasing in the users eye, for this we need to learn some principles of UI design.

Design principles to live by

A. Four Basic Design Principles

1. Contrast: Allows you to emphasize elements within your design. This is the most effective way to add visual interest to your page.
2. Repetition: Some ways to make it easier for users to process information of your design is to repeat patterns so it is easier for them to swallow. Examples to create repetitions are bullets, bold fonts, colors, lines, etc.
3. Alignment: this basically means to have rulers and margins so the information being displayed looks tidy.
4. Proximity: Has the same understanding as space. Rather than a page full of dense text, users find it easier to read if there are more white space.

B. Eight UI Design Fundamentals

1. Know your user: Users are your goal, so find out what they like.
2. Pay attention to patterns: Users spend time on different interfaces, use those interfaces familiar patterns so your user can find your app familiar and easy to use, it’ll help them feel at home.
3. Stay consistent: Having a consistent interface enables your users to have a better understanding of how things work and increase their efficiency.
4. Use visual Hierarchy: Size, color, and placement of each element work together to create an easy to understand interface, it will reduce appearance of complexity.
5. Provide feedback: Your interface design should speak to your users, it should help users understand whether their actions were right or wrong. Example, a line under a misspelled word. A green check to let them know the action they are taking is correct.
6. Be forgiving: People make mistakes no matter how clear your design is, your UI should be able to tolerate mistakes. Example, when you delete a message in gmail, it should show an undo box.
7. Speak their language: Provide clear concise labels for actions and keep your messaging simple.
8. Keep it simple: Add only the necessary elements. Ask yourself, do your users really need this?

So now, how do we create a prototype?

We can create a prototype with 3 simple steps

1. Wireframe: low-fidelity way of showing a design. Wireframe is the basic and visual representation of the design. Your wireframe design must express design ideas and should not miss any important parts. Wireframes are a quick and easy way to figure out the layout of the design you want. Usually only represents the placements of images, text, and icons.

HappyFresh Customer Fleet-Track Wireframe

2. Mockups: a visual way of representing a product. Mockups are kind of like high-fidelity static design diagram. Unlike a wireframe, a mockup looks more like a finished product or prototype. It should already have the right UI design. The difference with a mockup and a prototype is that a mockup is not clickable. It is rather a graphic representation.

HappyFresh Customer Fleet-Track Mockup

3. Prototype: a high fidelity representation of the final product which is meant to simulate user interaction (clickable). link. It’s like a mockup with UX experience, interactions, animation and anything else you’d like to experience with the real app. A prototype helps conduct UX research because it’s similarity to the real product. It will also help hustlers pitch their products to stakeholders. Also help developers get the feel of what they are going to develop.