21
David Dewhurst User Experience Design Portfolio WWW.DEWHURSTDESIGNS.CO.UK

David · PDF filei David Dewhurst User Experience Design Portfolio This portfolio highlights my experience and past projects from the point of view of user experience and user-centred

  • Upload
    dohanh

  • View
    221

  • Download
    5

Embed Size (px)

Citation preview

Page 1: David · PDF filei David Dewhurst User Experience Design Portfolio This portfolio highlights my experience and past projects from the point of view of user experience and user-centred

David DewhurstUser Experience Design Portfolio

WWW.DEWHURSTDESIGNS.CO.UK

Page 2: David · PDF filei David Dewhurst User Experience Design Portfolio This portfolio highlights my experience and past projects from the point of view of user experience and user-centred

i

David Dewhurst User Experience Design Portfolio

This portfolio highlights my experience and past projects from the point of view of user experience and user-centred design.

A large part of my portfolio is protected by non-disclosure agreements, so I am unable to show them here. Therefore some projects are simulated to show my skills and experience in certain areas.

Page 3: David · PDF filei David Dewhurst User Experience Design Portfolio This portfolio highlights my experience and past projects from the point of view of user experience and user-centred

CHAPTER 1

User-centred Design

User-centred design is an important part of all my work. From usability studies and testing through to design and prototypes I always work with the end-user in mind.

Page 4: David · PDF filei David Dewhurst User Experience Design Portfolio This portfolio highlights my experience and past projects from the point of view of user experience and user-centred

EXPERIENCE IN USABILITY TECHNIQUES

User Stories

Personas

Card sorting

Interviews

Questionnaires

Background research

SECTION 1

User Stories and Personas

3

User testing lab at Digia, Finland

A persona created for an OS organisation project.

A persona created for Nokia Conversations

Page 5: David · PDF filei David Dewhurst User Experience Design Portfolio This portfolio highlights my experience and past projects from the point of view of user experience and user-centred

CHAPTER 2

Usability

From four years working in the User Experience Group at Digia in Finland and through my Interactive Media MA I have a good understanding and experience in all areas of usability.

Page 6: David · PDF filei David Dewhurst User Experience Design Portfolio This portfolio highlights my experience and past projects from the point of view of user experience and user-centred

USABILITY TESTING EXPERIENCE

International user testing

Testing for large multinational companies

Small scale ‘gorilla’ testing

Large scale purpose built testing facilities

SECTION 1

Usability Testing

5

Here I am preparing for usability testing with a colleague at Digia User Experience in Finland.

Gorilla testing using Silverback during my Interactive Media MA

During my work at Digia I gained a good experience of usability testing; from paper prototypes to international studies.

I also studied the latest techniques and software including small scale gorilla testing, question structure and report writing during my Interactive Media MA at The University of the Arts, London in 2012

Page 7: David · PDF filei David Dewhurst User Experience Design Portfolio This portfolio highlights my experience and past projects from the point of view of user experience and user-centred

SONGKICK STUDY

1. The original Songkick iPhone app analysed

2. Issues and improvements identified

3. An iPad version designed

4. Wireframes created

SECTION 2

Usability Study

6

Analysis of existing app

Mind map

Songkick Mobile Ideas

iOS AppChanges

First Time Use

iPad App

Combine Locations

and Concerts Tabs

Artists

Concert Screen

Settings Tab

Optional Music Library Scan

Background Library Scan

Wider User

Location Scan

Avoid Empty Results on First

Use

Same Features

More Detail?

Less Focus on Current Location

More Search

and Browse Options

Show results from a wider area if results

are empty

Location based on adjustable distance from

chosen locationsExport individual

events to Calendar App

Subscribe to Calendar. Link adds calendar to Calendar

App

Show More Information in Calendar View

Favourite some

artists?

Text Search

Index Navigation

Only receive alerts for

favourite artists

Location

SharingTickets

Add link to Maps

App

Navigation

Bookmarking

Use iOS sharing sheets

No need to log in to Twitter and Facebook

Add Alarm

Swipe through

alphabet to navigate

large lists

Web Interface

Larger Text Larger

Buttons

Integrate as a Web App element

Use Share Icon For 'Open is

Safari' Action

No need to log in again

Colour Code Days

With Events

List selected days events in Calendar

View?

Original app design

Page 8: David · PDF filei David Dewhurst User Experience Design Portfolio This portfolio highlights my experience and past projects from the point of view of user experience and user-centred

Songkick study extract

Concerts and Locations Tabs

The distinction between the Locations tab and the Concerts tab is unclear.They both return similar results, the main difference being Concerts shows only ‘Your artists’ and Locations shows ‘All artists’. These tabs can be combined into one ‘Concerts’ tab which contains a facility to choose which locations are searched and whether to display ‘All artists’ or just ‘Your artists’.

This is shown in the high fidelity wireframe left:

Map Tab

The ‘Locations’ tab can be replaced with a ‘Map’ tab which will display concerts near the user or the saved locations on a map.

This is shown in the high fidelity wireframe left:

When the user clicks the ‘Location’ button all the user’s saved locations are displayed as well as ‘Near me’ (shown below). Clicking on one of these will centre the map on that location.

This work is intended as a portfolio piece for David Dewhurst and to be indicative of his skills. This is speculative work and not commissioned or endorsed by Songkick. No infringement of copyright is indented. All Songkick logos and graphics are

copyright of Songkick. All original work is copyright of David Dewhurst January 2013 www.dewhurstdesigns.co.uk.

Page 9: David · PDF filei David Dewhurst User Experience Design Portfolio This portfolio highlights my experience and past projects from the point of view of user experience and user-centred

CHAPTER 3

Interaction Design

As a new media designer interaction design is a constant part of my work. From storyboards, design sketches and wireframes through to prototypes and specification writing.

Page 10: David · PDF filei David Dewhurst User Experience Design Portfolio This portfolio highlights my experience and past projects from the point of view of user experience and user-centred

SECTION 1

Storyboards

I have created user stories and storyboards for many projects. These have varied from hand drawn sketches to colour illustrations.

9

Storyboard from my MA final major project. An interactive tea museum exhibit.

Sketched storyboard for in interactive narrative project

Page 11: David · PDF filei David Dewhurst User Experience Design Portfolio This portfolio highlights my experience and past projects from the point of view of user experience and user-centred

SECTION 2

Design Sketches

10

Page 12: David · PDF filei David Dewhurst User Experience Design Portfolio This portfolio highlights my experience and past projects from the point of view of user experience and user-centred

SECTION 2

Design Sketches

Here you can see the evolution of the educational game ‘Learn the time’ from early sketches through to colour wireframes.

Page 13: David · PDF filei David Dewhurst User Experience Design Portfolio This portfolio highlights my experience and past projects from the point of view of user experience and user-centred

WIREFRAME SOFTWARE SKILLS

Visio

Omnigraffle

Illustrator

Photoshop

SECTION 3

Wireframes

Wireframes are a key part of every design I create. I am proficient with Visio and Omnigraffle. I have also created many high fidelity wireframes using Illustrator and Photoshop. These wireframes often form the basis for interactive prototypes.

12

High fidelity wireframes for ‘Learn the time’ an educational game I created to teach children how to tell the time.

Wireframes for a mobile app version of Nokia Conversations.

Page 14: David · PDF filei David Dewhurst User Experience Design Portfolio This portfolio highlights my experience and past projects from the point of view of user experience and user-centred
Page 15: David · PDF filei David Dewhurst User Experience Design Portfolio This portfolio highlights my experience and past projects from the point of view of user experience and user-centred

Wireframes for Songkick created using Omnigraffle.

Page 16: David · PDF filei David Dewhurst User Experience Design Portfolio This portfolio highlights my experience and past projects from the point of view of user experience and user-centred

PROTOTYPING SKILLS

Paper prototypes

Illustrator and Omnigraffle

Basic interactive wireframes

HTML, CSS and JavaScript

Interactive wireframes and website mockups

Flash and AS3

Mobile and web prototypes with advanced interactions and graphics

Adobe AIR for iOS, Android and Desktop

Quickly convert Flash prototypes into native apps for mobile devices. For testing or for distribution and sale in app stores.

SECTION 4

Prototypes

15

‘Finnish First’ available on the App Store.

Native iOS app created in Flash

I have created many prototypes using Flash with Actionscript, as well as QT (QML), PhoneGap, OmniGraffle, HTML and JavaS-cript. The prototypes ran on mobile devices or the desktop, sup-plying an interactive simulation of the final software for further testing, research and promotional purposes.

My programming skills are shown in an app called Finnish First which I created to teach Finnish by playing a quick and fun game. It is a native iPhone app created using Flash and Adobe AIR for iOS. I took an existing Flash Lite app that I created a few years ago and converted it to Adobe AIR for iOS using AS3. Fin-nish First is available on the App Store.

Please Download on the Apple App Store

Page 17: David · PDF filei David Dewhurst User Experience Design Portfolio This portfolio highlights my experience and past projects from the point of view of user experience and user-centred

I have created prototypes for iPad as well as iPhone. Below is an example of an iPad prototype I created for an art exhibi-tion.

16

This iPad prototype was designed to showcase an art exhibition. I am currently in the process of converting the prototype into a fully functional app for distribution on the App Store.

iPad Prototype

PhoneGap prototype being tested on location.

I have also created prototypes using PhoneGap, which allows functional mobile prototypes to be developed using web technologies.

The example here is an interactive narrative project I created as part of my Interactive Media MA

Page 18: David · PDF filei David Dewhurst User Experience Design Portfolio This portfolio highlights my experience and past projects from the point of view of user experience and user-centred

SECTION 5

Specifications

17

SPECIFICATION EXPERIENCE

I have created detailed specifications for mobile apps and websites, as well as updating and editing existing specifications for clients including Nokia. These projects are protected by NDA.

Mobile app flow diagram for a Forum Nokia e-learning site that I created.

Podcast wireframes and interactions detailed for the mobile app version of Nokia Conversations

Page 19: David · PDF filei David Dewhurst User Experience Design Portfolio This portfolio highlights my experience and past projects from the point of view of user experience and user-centred

CHAPTER 4

Information Architecture

As well as mobile apps I have also designed and built many websites including large e-learning sites. Information architecture is often an important part of the design process.

Page 20: David · PDF filei David Dewhurst User Experience Design Portfolio This portfolio highlights my experience and past projects from the point of view of user experience and user-centred

SECTION 1

Flows and Navigation

19

The same flow diagram illustrated with wireframes.

Flow diagram for an interactive narrative project

Navigation details for Nokia Conversations.