Designing mobile apps
Dr John Rooksby
In this lecture
• I will discuss app design, focusing on:
• The early stages of design
• Sketching, talking, and prototypi...
I am researcher in Computing Science at Glasgow. I have
been studying how people use “personal informatics” apps
Personal informatics - examples
Rescue time Google Fit
Fit Bit Ginsberg
MatchFIT
Apps I’ve worked on
Pass the Ball
Apps I’ve worked on
App Tracker
Apps I’ve worked on
Apps I’ve worked on
My City Glasgow
FITtogether (Work in progress)
Apps I’ve worked on
So where to start?
Look at what is already out there
• Look at apps.
• What do they
support?
• What do they do
well?
• What is missing?
Talk to people
• Try to do open,
exploratory interviews.
• Don’t just talk to
people like yourself.
• Be open to surprises
Coming up with an idea
Sketch alternatives
• Quick sketches of as many alternative designs as
you can.
• Do this to force yourself to think creat...
Generated by CamScanner from intsig.com
Generated by CamScanner from intsig.com
Generated by CamScanner from intsig.com
Ge...
Sketch alternatives
• Moving on to “good” ideas
Refine sketches
• The step counts for each week are separate (left),
and then put together (right).
Producing a prototype
Formalising sketches
• These were produced using software called Sketch.
Implementing and trialling an app
Functional Prototype
• This was built this with
Apache Cordova
• It was not completely
finished, but “good enough”
to trial...
Mon Dec 08 2014 21:39:59 GMT+0000 (GMT): app-start: "{}"
Mon Dec 08 2014 21:39:59 GMT+0000 (GMT): main-screen-data: "{"ste...
Interviews
We interviewed (most of) the participants
• “Yeah it helped me compare myself against other people,
against a s...
Logs and Interviews
• Logs are good at showing what people did.
• Interviews are good for finding out why people did these ...
Release and beyond
(Re)Design
and
implement
Gather and
analyse
engagement
data
Iterative design does not end with a release
Conclusion
Refined sketches
sketches
More sketches
Paper prototype
Functional Prototype
Release
Further features
Iterative design look...
• Make your mistakes early
• Help customers articulate their ideas
• Get the design as settled as possible before
implemen...
• Sketching helps frequent and fast iteration.
• It is quicker to sketch on paper than on computer.
• Use sketches as a wa...
Thank you.
Guest lecture: Designing mobile apps
Upcoming SlideShare
Loading in …5
×

Guest lecture: Designing mobile apps

1,048 views

Published on

Guest lecture as part of Software Engineering course at Glasgow University

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,048
On SlideShare
0
From Embeds
0
Number of Embeds
565
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Guest lecture: Designing mobile apps

  1. 1. Designing mobile apps Dr John Rooksby
  2. 2. In this lecture • I will discuss app design, focusing on: • The early stages of design • Sketching, talking, and prototyping • Key point: Effective design work done at the early stages of development will save time later on.
  3. 3. I am researcher in Computing Science at Glasgow. I have been studying how people use “personal informatics” apps
  4. 4. Personal informatics - examples Rescue time Google Fit Fit Bit Ginsberg
  5. 5. MatchFIT Apps I’ve worked on
  6. 6. Pass the Ball Apps I’ve worked on
  7. 7. App Tracker Apps I’ve worked on
  8. 8. Apps I’ve worked on My City Glasgow
  9. 9. FITtogether (Work in progress) Apps I’ve worked on
  10. 10. So where to start?
  11. 11. Look at what is already out there • Look at apps. • What do they support? • What do they do well? • What is missing?
  12. 12. Talk to people • Try to do open, exploratory interviews. • Don’t just talk to people like yourself. • Be open to surprises
  13. 13. Coming up with an idea
  14. 14. Sketch alternatives • Quick sketches of as many alternative designs as you can. • Do this to force yourself to think creatively. Your first idea is rarely your best. • They don’t need to all be good ideas. Think about bad ideas - what makes them bad? • Talk to others about your ideas.
  15. 15. Generated by CamScanner from intsig.com Generated by CamScanner from intsig.com Generated by CamScanner from intsig.com Generated by CamScanner from intsig.com Generated by CamScanner from intsig.com Sketch alternatives • Five sketches for a health and fitness app • All of these were produced as “bad” or “wrong” ideas for the particular project we were doing
  16. 16. Sketch alternatives • Moving on to “good” ideas
  17. 17. Refine sketches • The step counts for each week are separate (left), and then put together (right).
  18. 18. Producing a prototype
  19. 19. Formalising sketches • These were produced using software called Sketch.
  20. 20. Implementing and trialling an app
  21. 21. Functional Prototype • This was built this with Apache Cordova • It was not completely finished, but “good enough” to trial • We ran a user trial with 12 people • We logged interaction with the app and interviewed them after 2 weeks
  22. 22. Mon Dec 08 2014 21:39:59 GMT+0000 (GMT): app-start: "{}" Mon Dec 08 2014 21:39:59 GMT+0000 (GMT): main-screen-data: "{"steps":6002,"you":7074,"friends":4433}" Mon Dec 08 2014 21:40:04 GMT+0000 (GMT): main-swipe: {"page":1} Mon Dec 08 2014 21:40:09 GMT+0000 (GMT): main-swipe: {"page":2} Mon Dec 08 2014 21:40:16 GMT+0000 (GMT): main-swipe: {"page":1} Mon Dec 08 2014 21:40:16 GMT+0000 (GMT): main-screen-data: "{"steps":6002,"you":7074,"friends":4433}" Mon Dec 08 2014 21:40:18 GMT+0000 (GMT): main-swipe: {"page":2} Mon Dec 08 2014 21:40:21 GMT+0000 (GMT): main-swipe: {"page":1} Mon Dec 08 2014 21:40:21 GMT+0000 (GMT): main-screen-data: "{"steps":6002,"you":7074,"friends":4433}" Mon Dec 08 2014 21:40:22 GMT+0000 (GMT): main-swipe: {"page":2} Mon Dec 08 2014 21:40:23 GMT+0000 (GMT): open-post-comment: "{}" Mon Dec 08 2014 21:40:28 GMT+0000 (GMT): main-swipe: {"page":1} Mon Dec 08 2014 21:40:28 GMT+0000 (GMT): main-screen-data: "{"steps":6002,"you":7074,"friends":4433}"
  23. 23. Interviews We interviewed (most of) the participants • “Yeah it helped me compare myself against other people, against a sort of a trend. So I could see if I was dramatically below other people … so instead of getting the bus in the morning I walked, but I didn’t like go out of my way to walk more”. • “You don’t know if these are sporty people, or if they walk a lot, or err, this number here is not, it doesn’t represent much I think.” • “I didn’t have much to write so I said hello. Maybe knowing the other people would make me say more.”
  24. 24. Logs and Interviews • Logs are good at showing what people did. • Interviews are good for finding out why people did these things. • For example: • The logs showed us not many people wrote comments in the app, the interviews helped us identify why. • The logs showed us some people liked the daily steps view, but others looked more at the weekly view, and in the interviews we could address why. • A trial gives you insights into how to improve an app, but its back to the sketch book.
  25. 25. Release and beyond
  26. 26. (Re)Design and implement Gather and analyse engagement data Iterative design does not end with a release
  27. 27. Conclusion
  28. 28. Refined sketches sketches More sketches Paper prototype Functional Prototype Release Further features Iterative design looks somewhat like this
  29. 29. • Make your mistakes early • Help customers articulate their ideas • Get the design as settled as possible before implementation • Its quicker and less stressful to make changes earlier than later. Why do iterative design?
  30. 30. • Sketching helps frequent and fast iteration. • It is quicker to sketch on paper than on computer. • Use sketches as a way of thinking through the design and as things for discussion with others. • Prototypes do not need to be perfect, just “good enough”. Think of a prototype as a sketch. • Talking with people is important . • Feedback is very helpful. • Logging and analytics become important later when you gain a larger user base. Sketching
  31. 31. Thank you.

×