Designing an underground book club

David Lang
Jul 17, 2018 · 9 min read

Duration | Team | Role | Project Type

2 weeks | Individual | UX Designer | Concept Project (General Assembly)

UX Methodologies

User interviews | Affinity mapping | Personas | Competitor analysis | User journeys | Experience mapping | Design studio | Sketching | Wireframing | Rapid prototyping | User testing | Visual design | Presenting

Tools Used

Sketch | InVision | Marvel | Mural | Omnigraffle | Paper | Post-its | Sharpies


Brief

Interview a member of the class and find a problem they are experiencing that could be solved by a mobile application. Work through the double diamond methodology and produce an experience map, prototype and high-fidelity screens.

Process

User research

The project started with a conversation with my classmate Gina — like most Londoners she had a busy schedule and struggled to fit her interests and social life around major commitments. I walked away from this initial brainstorm thinking that the problem to solve here was helping her fit more learning into her life (she has a passion for reading and history), especially in down time such as her commute.

Gina struggles to find time for the things she loves

With this in mind, I undertook broader user research (finding users that were busy but had learning objectives was quite easy — there were 14 of us in the classroom), exploring both the topics of commuting and learning. This provided a body of research that I could reference to help make design decisions as the project progressed.

Design studio 1.0

How might we turn a tube carriage into a classroom

The first design studio took us somewhere unexpected

Given a slightly unusual brief (building an app for a single user) I conducted a design studio (ideation session) with Gina very early on in the design process. I call this Design Studio 1.0 because it quickly became clear that Gina was very specific about how she liked to learn. The initial HMW statement was ‘how might we turn a tube carriage into a classroom’, but it became apparent that Gina was much more interested in a social learning experience. We felt that this pivot justified another design studio to fully explore this new direction.

Design studio 2.0

How might we turn a commute into a social experience

Two clear ideas emerge from the second design studio

Our second design studio focused on ‘how might we turn a commute into a social experience’. We came out of this with two similar ideas. The first was a book club where users could share their commute and chat about books (retaining a learning element). The second, a concept we called ‘Tube Buddy’, where users could find interesting people to share their commute.

In retrospect, it’s fascinating how both ideas, in seeking to connect similar people and help them meet, are not a million miles away from being dating apps in their own right!

Experience map

I built a rough experience map based on Gina’s commute, getting not only a sense of how much she hated it, but also the significant constraints on using a mobile app in this environment (lack of connectivity is the tip of the iceberg etc).

Commuting has few positives, except perhaps its completion

Constraints, the full picture

There are multiple constraints on smartphone use in the Tube

In refining the experience map I interviewed Gina about her journey in more depth and uncovered some of the main reasons being on the Tube was so miserable for a smartphone user (especially a petite one). It transpired that the carriages were often too full to raise a phone and look at the screen, and too noisy to hear audio through headphones. This would be the key design challenge for the project.

I decided that this required a problem statement with enough flexibility to navigate these constraints and finally settled on the following:

The London transport system is huge and there are loads of people, but Gina is struggling to find someone that shares her interests and her route.


Solution

How I approached the problem

While brainstorming, Gina had talked about ‘non-places’ (virtual places that inhabit real places) and I thought this was a great metaphor for a virtual book club on the Tube.

Crucially, the app would not be designed for use on the Tube

We would provide users with a way of chatting and seeing the shared sections of their tube journeys, while leveraging a community of interest (and Gina’s interest) around books. Users would experience the benefits of the app on their commute, without needing to actually use their smartphone on the train.

With this in mind I framed the solution to the problem statement in this way:

Gina notices that one of the girls she chats with in the Underground Book Club app shares the second leg of her morning commute — she suggests they meet up next week.

Sketching

Given the time constraints I didn’t really want to design a chat app from scratch and so I implemented design patterns from Slack, WhatsApp and Facebook Messenger. I chose to focus on exploring topic-based group chat (it’s a book club app after all) and indicating commute overlap (these people want to meet in person).

A selection of sketches — photocopied templates helped with consistency and sizing

Paper prototypes

Initial user testing highlighted major issues with the testing process itself

The initial task-based testing was more or less disastrous. Users not only struggled with a low fidelity UI (despite being based on patterns used by some of the most prominent apps on the planet), but were unable to orientate themselves and perform basic tasks. But the tasks were only meaningful to users who had an understanding of what the app was — the scenario was not providing enough context.

Learning — complexity is the enemy at low fidelity. It’s about proof of concept

To compound this problem, the tasks themselves were also too complex given the information available on the screens to the user. Problems started on the second screen. Users tended to stumble through this but on screen three had no idea what the iconography and UI elements represented. A dead end. Time to re-think the approach.

Context was the answer, I got there eventually

Realising that users weren’t getting sufficient context from the pre-test scenario I began work on the app on-boarding screens. Taking users through these screens before they attempted the tasks not only provided me with feedback on the on-boarding screens crucially also saw users start to complete the tasks that had previously been so problematic.

Digital prototypes

It was now time to start working on the block and low fidelity digital prototypes in Sketch. I exported screens into Marvel and tested the interactive prototype in the same way as the paper prototype. Users were given a scenario, taken through on-boarding and finally asked to complete tasks.

You can view the Marvel prototype here.

The screens after three waves of digital prototype testing

Visual design

Mood board visually depicts design treatment look and feel

This brief required me to output high fidelity screens. Stepping away from the prototyping I went back to the user (Gina) to talk about visual design. I got a very strong steer from her with Italian Vogue, and created a mood board that fused classic literature with elegant travel. The colour palette was inspired by an Art Deco cover of the Great Gatsby — a book I took on to feature in the screen design.

Iterating at high fidelity — a nightmare

The time constraints forced me to step away from testing with unresolved issues. I was having to address these problems even as I working up to high fidelity in Sketch. This will always be problematic given how much detail is on the screens at this point. I was still iterating (left) on the design of the user profiles and particularly the bottom half of the screen showing a user commute crossover.

The high fidelity core screens finally came together — a chat app for book lovers that lets users see who shares their commute. An app for the ‘non-place’ that is the Underground Book Club, a virtual book club that exists across 270 stations and hundreds of miles of track in between.

The final core screens were taken up to high fidelity

Next Steps

There’s always more to do, this is what I would focus on next:

Explore the user data comfort zone: After interviews and testing, I ultimately designed the shared commute visualisation so that origin and destination were obscured. It would certainly be interesting to explore user comfort around personal data as it could provide opportunities as well as limitations to further work.

Iterate on the shared commute indicators: UI design time was extremely limited and I think that the in-chat shared commute indicators could definitely be improved. Even after on-boarding, they were still proving unintuitive for users.

Investigate business plan: Never a real consideration for concept projects but something that would certainly be a solid next step. The app itself would require capital to build, support and market and it would be interesting to consider how it could be monetised and what a viable user-base would be.


Hmmmm…what have we learned here?

UX Learnings

You’ve read what I did on this project, now you might also be interested in what I actually learned during it.

Context is critical

Ok, so this is really obvious. Users need context in order to test prototypes. My biggest failure (and learning) on this project was that familiar design patterns and a scenario are not always enough for a user to understand what they are seeing. Knowing when to provide more information, and what that information should be, is critical to running prototyping that produces meaningful results.

Feel good about failure and do it even faster

I learned on my first project to fail as fast as possible, but it wasn’t nearly fast enough. Working up to the highest fidelity really highlights the need to be as ruthless and rigorous as possible with your own work during paper and low fidelity prototyping. This is where it is easy to make changes, it only gets harder…which brings me on to my final point.

The higher the fidelity, the longer it takes to iterate

The first time you attempt try to wade through significant iterations at high fidelity (i.e. your beautifully crafted screens), you know you don’t ever want to do it again. It might take five minutes to sketch up a paper prototype and be ready to test. In the same time at high fidelity, you’ve probably just opened the Sketch file and located the art board you want to change — and that’s the start of the headache.


Thanks for reading my article, I am a UX designer looking for a full time job, you can find my portfolio here.

If you ♥ what you read please be sure to give me a clap.

David Lang

Written by

UX Designer | former Strategy Director and Analytics Lead

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade