UX for Product Managers | An example
Last week I used an app that was so bad it made me want to pull my eyes out so that I would never, ever, ever have to look at it again.
I am going to take this bad app and re-imagine it using standard product design processes. The App in question is the everyone active app and is for a gym group. This App hasn’t been designed or even thought about. It reflects a total lack of empathy for the customer and the problem the app is trying to solve.
So, here it is, let’s start with the App in question;
This is one screen, the first picture being the top of the home screen and the second is the Home screen scrolled to the bottom. So why is this so bad, in case you need to ask!
What you see is over 40 clickable options on a single screen (yes over 40)
There is no hierarchy of information, for example, you can book football, swimming, gym etc. But by displaying every activity as individual options, it makes it confusing. As a user, what am I meant to do?
There are multiple calls to action(CTA), membership, train safe. Why is membership even an option when you are already in the App?
The social media icons have huge prominence, who cares.
There is no focus. You have CTA, Online Induction, timetables, lessons, account settings, live chat, QR scanners (QR scanner wtf is that for).
This is version 4, I dread to think how bad versions 1–3 were.
Overall, the UI and the UX are broken. A UI improvement will only give marginal gain here it’s the UX that is that needs fixing.
Process
For this article, I am not going to do a full discovery phase. Also, I’ve never worked in this sector I am not an expert. Still, I can make some assumptions and apply some general product discovery rules to make a quick and dirty prototype which I’m confident will be better than the current App. So with this in mind, using a design process this will be the steps.
- Empathy — Understand the issues.
- Define: Decide on our users and Declare our use cases and create a simple customer journey
- Ideate: come up with some ideas
- Prototype — quick and dirty prototype
Empathy
Typically this would including looking at data and conducting interviews. However, as this is just an example, let us pretend we have interviewed lots of gym-goers, both ours and the general public. Additionally, I would have spoken to staff at the gym plus the senior stakeholders, i.e. CEO, Head of Sales, Customer Success etc.
The data is tricky as I don’t have any. However, I would assume new users press lots of buttons but don’t complete actions as they don’t know what does what. More experienced users learn the path they require so don’t use 80% of the features displayed*
Define
As product needs to align both business goals with users goals lets declare the business goal.
Value Statement
‘To help our users achieve their fitness goals and to support making the nation fitter, healthier and happier’.
Business Outcomes
That is the fluffy bit, underneath this would be business outcomes for the App;
- Reduce churn (cancellation of membership) by x%
- Fill rate on every class to be x%
- Increase sessions per user by x%
Personas
- Gym goer
- Parent — booking classes for child
- Receptionist
Job stories
Once you have personas, you may wish to empathy map. I am going to skip onto declaring some needs. I like to use job stories for this. Doing job stories takes a bit of thinking. For this example, I have just put some down with minimal thought.
A job stories format is WHEN (situation) I WANT TO (motivation) SO THAT I CAN (expected outcome)
- The receptionist — When people want to book onto a class, I want them to use the mobile so that I can focus on more my other tasks.
- Gym goer needs 1 — When looking for a gym class, I want to do this quickly so that I don’t miss the available space
- Gym goer needs 2 — When managing my booked classes, I want to do this quickly so that I can carry on with my day.
- Gym goer needs 3 — When I have finished exercising, I want to see how well I have done and the progress I have made towards my goals so that I can feel good about myself.
- Parent need — When my child moves up a level at swimming, I want to book a spot for them in the new class so that my child will be happy.
User Journey
I have created a simple journey for our core user doing their core job. Again this should be expanded to cover other use cases (different journeys). I also like to overlap the user’s journeys and have the business goals included.
Prototype
For mobile apps, I like to restrict to core use cases. If you want all the features head to the mobile responsive site. So here it is.cc
I have taken a clean minimalist approach focusing on the user journey. To do this, I have removed 80% of the options. I have introduced a hierarchy which in this case is a simple menu, that groups items together.
A clear call to action, book a class, makes it simple for users to know what to do. The home screen includes progress and activities completed. In reality, this could be much better with more relevant progress indication.
The booking screen again as a clear call to action. In the same location, which is great for consistency. Confirmed bookings are clear to see. Today’s classes with availability help promote the business goal of fill rate by promoting only classes with availability. Although I haven’t designed the booking page, it would be one page for all activities with pickers for; date, time, activity and user.
Conclusion
Be a human, think like a human, design for humans. The business requirement drives the original App. ‘We want to inform the user of x,y,z’, ‘we want to promote this, that and the other’. Stop, without overlaying business need with the user experience you end up in a mess. Reducing your feature count by 70% but making them 100% usable makes for excellent user experience, less is more.
Notes
- Empathy is a crucial stage and skipped in this example. In the real world, I would never make these assumptions without doing extensive research.
- You may have noticed that I did not cover ideation. I generally prefer ideating as a group exercise. When flying solo I review the previous stages, write out journeys and key concepts. Then do a crazy 8. I typically take a crazy 8 and extend into some paper based ideas/protoypes. I find paper to be really fast and it’s super disposable. The reason I didn’t share is that I am a terrible artist and most of my drawings are completely illegable :0)
Resources
- Practical Customer Journey Mapping by Alex Gilev — free resource for miro.com users
- Prototype template based on Radovan Tucek free XD resource here Download