Guest lecture as part of Software Engineering course at Glasgow University

1. Designing mobile apps
Dr John Rooksby

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.

4. I am researcher in Computing Science at Glasgow. I have
been studying how people use “personal informatics” apps

5. Personal informatics - examples
Rescue time Google Fit
Fit Bit Ginsberg

6. MatchFIT
Apps I’ve worked on

7. Pass the Ball
Apps I’ve worked on

8. App Tracker
Apps I’ve worked on

9. Apps I’ve worked on
My City Glasgow

10. FITtogether (Work in progress)
Apps I’ve worked on

11. So where to start?

12. Look at what is already out there
• Look at apps.
• What do they
support?
• What do they do
well?
• What is missing?

13. Talk to people
• Try to do open,
exploratory interviews.
• Don’t just talk to
people like yourself.
• Be open to surprises

14. Coming up with an idea

15. 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.

16. 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

17. Sketch alternatives
• Moving on to “good” ideas

18. Refine sketches
• The step counts for each week are separate (left),
and then put together (right).

19. Producing a prototype

20. Formalising sketches
• These were produced using software called Sketch.

21. Implementing and trialling an app

22. 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

23. 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}"

24. 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.”

25. 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.

26. Release and beyond

27. (Re)Design
and
implement
Gather and
analyse
engagement
data
Iterative design does not end with a release

28. Conclusion

29. Refined sketches
sketches
More sketches
Paper prototype
Functional Prototype
Release
Further features
Iterative design looks somewhat like this

30. • 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?

31. • 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

32. Thank you.