Part 3 of the design process

Putting initial designs to paper

From initial sketches to first prototypes ready for testing

Learn more

My simplified design process

Sketch out ideas with pen and paper

Turn into crude wireframes via way idea possible

Polish UI with Sketch or Photoshop

Create prototype to test, in this case with Marvel

Sketch out initial ideas

A random collection of initial thoughts

The design process isn't as linear as described above but it is similar, it actually begins as soon as the task is set. Initial ideas are jotted and sketched down and either rejected or reinforced by the aforementioned research.

Quick sketches showing ideas of search, folders, filter and tabs

Details of how filter could work

Detail of ideas of sort button and showing only thumbnails for the videos

Draw out crude wireframes

Connecting the dots

To ensure nothing has been missed from the initial design ideas all screens of the flow are sketched out to give a perspective on the userflow.

Simple sketches with all the layout and components to scale

Showing how dynamic sketch could work. Also showing filter options

Alternative filtering technique and ideas of folders and multiple tags

Polish the UI

Thinking about component design early on

I'm of the opinion of testing designs that aren't believable, i.e. do not look like real web pages or products, taints the test. Therefore I dive into Sketch 3 or Photoshop early on to mock up more polished and beleivable wireframes (it is also often a lot quicker to do so especially with a well used styleguide or brand guidelines)

The workboard for the project in Sketch

Experimenting with search and folders

Exploring the use of tabs and filters

Create a working prototype

Transforming the polished flats into a believable connected system

Creating a working prototype is the best way to test design ideas on real users, and with tools such as invision and Marvel it can easily done in minutes. In this case I decided to use Marvel due to it integrating well with Sketch.

Using Marvel to connect the screens

Adding transitions for a more realistic polish

Testing the prototype on the browser

Feedback from team

Whilst designs are progressing I ensure to get constant feedback from my team members (in this case I used my friends)

"Looks like its part of the Hudl app"

Nicola Anderton

"Do you think the search bar is obvious enough?"

Harriet French

"Bit confused by the folder organization"

Dean McBride

Up next

Part 4 of the design process: Test

After every step of design it is time to test in the real world, on users