From initial sketches to first prototypes ready for testingLearn more
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
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
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
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
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"
"Do you think the search bar is obvious enough?"
"Bit confused by the folder organization"
Part 4 of the design process: Test
After every step of design it is time to test in the real world, on users