Enjoyed meeting lovely people at my workshop at UX Cheltenham a few days ago. From a real-life case, giving the group some user research, I got them to create mobile designs for a course booking system - thoroughly enjoyed it & they seemed too as well (fully engaging with the task). Some of their sketches from the workshop are shown at the end ... Users' determine the mobile experience -> do your user research ...

1. UX Cheltenham - November 2016
Designing for
Mobile - workshop
Indu Kaila
UX Designer

2. About me
❖ Succinctly… a UX obsessive
-> “it’s all in the detail”

3. What is UX?
❖ ‘The UX Book’ by Rex Hartson
& Pardha S. Pyla gives a good
description
❖ UX is a combination of
designing for:
- Users’ needs
- Emotional engagement:
emotions, expectations,
perceptions & motivations
- Usability

4. Reference Materials - Designing for Mobile
❖ iOS Human Interface
Guidelines
❖ Material Design Guidelines
❖ BBC Future Media Standards &
Guidelines Designing: Mobile
Accessibility
❖ www.W3.org
Recommendations
❖ Additionally, ’Mobile User
Experience, Patterns to Make
Sense of it all’ by Adrian
Mendoza

5. Mobile - Principles (1)
❖ You cannot fit everything that’s displayed on
desktop onto a mobile screen
❖ Users’ determine the mobile experience -> do
your user research
❖ Think linear…show the user screen flows
❖ Go for a ‘Cleaner’ layout of elements
/information
❖ Recommended sizes for user interface
elements on mobile
❖ Make it easy for users’ to complete the
path/the function(s)
❖ Consistent navigation & interface elements
❖ Make it obvious on this small surface area as
to the hierarchy of user interactions
(Primary/Secondary/Neutral/Negative action
buttons/calls to action)

6. Mobile - Principles (2)
❖ Make use of the location utility
❖ Consider loading time/speed -
optimisation
❖ User learnability of your design
❖ Incorporate user feedback into the
design
❖ Retainability - keep users on the
mobile site
❖ Monitor usage/gather feedback to
refine the user experience:
- Quantitative: analytics, A/B testing,
user testing - timings
- Qualitative: user testing

7. Workshop - Think “Interactions”
❖ For example,
❖ Tap
❖ Swipe
❖ Drag
❖ Scroll
❖ Pinch etc
❖ Think page/screen flows
❖ Create connections - nothing in
isolation
❖ Screen rotation - how will the
design work

9. User Type
❖ User type will determine the
mobile experience -> you need
good user research
❖ User type (each will have
different needs)
- Novice user
- Intermittent user
- Expert user

10. Who are your Users?
❖ As part of the UCD (User Centred Design)
process, we can find this out from user
research:
- Analytics, A/B testing
- Customer comments,
feedback/queries/customer call-centre data
- Persona/Scenarios from real life
- Observing users
- Interviewing users/user testing - task
analysis
- Remote user testing
- Focus groups
- Ethnography/Field visits
-> Affinity diagrams - pull the material together

11. Understand the Users’ Needs
❖ You need to know what
users’ do, need and think
❖ Consider:
- Context of use
- Mental models
- Level of expertise
- Mobile Accessibility

13. Workshop - Design for users’ to
book attendance via mobile, ‘online training’ &
‘non-online training’ courses

14. Workshop - The Users
❖ Corporate (new wave e.g.
Starlizard, JustEat)
❖ Corporate (traditional e.g.
NatWest)

15. Workshop - User Goals & Tasks
(1)
❖ They need to find the range of
courses (course title)
❖ They need to find the date of courses
❖ They need to find the course location
❖ They need to find a course summary
❖ They need to find more details about
each course
❖ They will need to create an account
in order to book a course
❖ They will need to login/logout of their
account

16. ❖ They need to filter through the courses
❖ They need to be aware of any course
price deals
❖ They will need to share course details
❖ Primary/Secondary action buttons
❖ They need to book themselves on
courses
❖ They need to book other people on the
courses
❖ They will need confirmation of course
booking
❖ They want a booking experience that
delights them
Workshop - User Goals & Tasks
(2)

17. Workshop - User
Persona (1)
❖ Personas should be
created from real life data

18. Workshop - User
Persona (2)
❖ Personas should be
created from real life data

19. Workshop - The Booking Business/System
Requirements
Normally you could have 100’s of
requirements (for the purpose of this
short exercise we have a few):
❖ Mobile display 320 x 480
❖ Back button is already incorporated
via the mobile device
❖ No user tutorial
❖ The few staff that work at the
business find the majority of their
time is taken up with answering
phone calls about courses. They
want to lessen the number of phone
calls they receive answering course
queries

20. Workshop - How the Course
Booking System could be arranged

21. Summary
❖ Think Interactions…the linear flow…
❖ Think You cannot fit everything that’s
displayed on desktop onto a mobile
screen
❖ Think Users’ determine the mobile
experience -> do your user research
❖ Think consistent navigation
❖ More useful materials:
- ‘Simplicity in the Details‘ by Giles
Colborne
- ‘Don’t Make Me Think’ by Steve Krug
❖ THANKS for coming along…

22. Questions