Upload
dohanh
View
221
Download
5
Embed Size (px)
Citation preview
David DewhurstUser Experience Design Portfolio
WWW.DEWHURSTDESIGNS.CO.UK
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.
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.
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
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.
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
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
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.
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.
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
SECTION 2
Design Sketches
10
SECTION 2
Design Sketches
Here you can see the evolution of the educational game ‘Learn the time’ from early sketches through to colour wireframes.
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.
Wireframes for Songkick created using Omnigraffle.
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
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
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
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.
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.