Petra Symond - LSTN Mobile App (UX UI Design Project) by Academy Xi

LISTN MOBILE APP

UX / UI DESIGN

listn

02.07.2020 Presented by Petra Symond

1 DISCOVER

LISTN MOBILE APP UX / UI DESIGN

Understanding the problem space

1.1

PROJECT SCOPING I developed this Scoping Framework to create the develop a Project Canvas which outlines the projects deliverables as well as risks and responsibilities. It helped me gain a better understanding of the business and its’ goals.

24.4.20_V2

Audio Book App UX/UI Design

24.4.20_V2

To create a truly interactive and personal audio book experience

Stakeholders

PETRA SYMOND, UX/UI Designer JOE BLOGS, Client SAM SAMPLE, Product Owner

Our purpose is to create a mobile app that appeals to traditional, audio and e-readers as well as tech-curious users due to the highly personal and interactive experience that hasn’t been seen in the market.

• Audio Book users looking for an enhanced experience • Traditional readers who are tempted for a more hybrid audio book experience

• Foundational research - One on one interviews - Online surveys - Competitor analysis - Heuristic analysis

• Tech curios

• Concept definition

• New to reading for pleasure

• UX development

• Children looking for an immersive experience

• Usabillity and testing methods and outcomes • Case study • Working prototype

• Interactive approach, untuitive UI and usibility

• Traditional readers think Audio Books are boring and lazy • Audio readers don’t get to enjoy paper book benefits such as folding corners, making notes and the sentimentality of keeping and touching of a book • Audio book experience is lacking due to its push/one-way interaction. There is no way for readers to reflect or discuss in a meaningful manner • Cuurent audio book reading doesn’t appeal to the social audience of today

LISTN MOBILE APP UX / UI DESIGN

• Range of experience options • Traditional benefits are reimagined and social chat

• Saturated market that hasn’t capitalised. Why? • Current cashed up market leaders Audible (Amazon) and Google Books • Potential fall outs and risk adversity from COVID-19

• Defining concept/problem space

• Limited start-up budget, team & timeline

• Shortlisting unique and desirable user experiences that define the app and its goals. How are we going to help?

• COVID-19 limits on in-person research methods and meetings

• Testing

To conduct foundational research, define problem/concept, UX development, usability testing resulting in a working prototype of a highly personal and interactive audio book mobile app. This will be delivered by a live video presentation and case study.

Joe Blogs Agency is a small start-up comprising of the CEO Joe Blogs and his CTO and Product Owner Sam Sample. They met while working as developers at Atlassian and have branched out on their own. Joe Blogs Agency consists of 3 other employees working in admin and development. The agency’s vision is to build upon their existing smarts and innovativity to create truly meaningful experiences that fill that untapped user need. The nature of this small enterprise means that there is less red tape allowing for fresh blue sky innovative thinking.

This project will be delivered via a live video slide presentation of a case study of the mobile app as well as a working prototype.

This project will be delivered via a live video slide presentation of a case study comprising of:

PETRA SYMOND, UX/UI Designer

• Foundational research

SAM SAMPLE, Product Owner

• Concept definition • UX development • Usabillity and testing methods and outcomes • Working prototype

JOE BLOGS, Client

Due to COVID-19 restrictions, comms have been limited to: • Monday weekly video WIP • Daily Asana updates • Milestone meetings by video • Friday informal catch up via Zoom over a beverage to gauge the week that is been and the week ahead

• Saturated market that hasn’t capitalised on the opportunity to evolve the product. Why? • Current market leaders Audible (Amazon) and Google Books are products of the biggest tech companies in the world. These giants have all the money, brains and time to create a better product. • Limited start-up budget • Limited start-up and lean team timeline • Potential fall outs and risk adversity from COVID-19

1.2

PROBLEM STATEMENT This problem statement was created to help look at the hypothesised problem space from a user’s point of view. It was revised once to better suit the problem space.

An audiobook user feels uninspired about the lacklustre and inauthentic mobile app, wants to engage with the listening experience but doesn’t LISTN MOBILE APP UX / UI DESIGN

doesn’t have the functionality to do this.

1.3

MARKET TRENDS & COMPETITOR ANALYSIS I conducted research on industry and market trends, competitors and comparable experiences to get a deeper understanding of the product space and especially keeping en eye out for any market ‘blind spots’.

COMPETITOR ANALYSIS Petra Symond 15.05.20_V2

OVERVIEW The audiobook market is booming across the US, UK, China and other major developed nations including Australia. Interestingly, it is difficult to find statistical data pertaining to Australia only so I will commence the competitor analysis from the largest market share at present (US). According to Deloitte Insights, The US audiobook market in 2020 is predicted at US$1.5 billion. Growth is a steady 20-25% which is predicted to continue for the next few years.

LISTN MOBILE APP UX / UI DESIGN

The report also suggests that the customer base tends to be young, employed and educated. This trend fits in with the assumption that audiobook listeners are tech-savvy. Other interesting outcomes come from the Audio Publishers Association Survey:

1.3

Continued…

LISTN MOBILE APP UX / UI DESIGN

Here are some of the research articles and reports that I referenced:

1.4

USER RESEARCH Due to COVID-19 restrictions, user research was limited to remote methods. Gaining access to

Heuristic evaluation

participants was difficult to find people who had the time and space to be interviewed. I utilised family and class members for video interviews and used Survey Swap for the online surveys.

AUDIOBOOK HEURISTIC EVALUATION Petra Symond 02.05.20_V1 EVALUATION TASK:

Online surveys

LISTN MOBILE APP UX / UI DESIGN

RESPONDENTS

Respondents were

1:1 interviews

One interviewee

largely from Europe

was a book lover, a

and many said they

techie non reader,

used audiobooks only for study or work, price was a factor. I think the location and student aspect became a bias.

INTERVIEWEES

a reader and an audiobook lover. All except the audiobook lover complained about narrators, sign up and navigation.

AUDIBLE:

GOOGLE PLAY BOOKS:

● VISIBILITY OF SYSTEM STATUS: The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

YES

● MATCH BETWEEN SYSTEM AND THE REAL WORLD: The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than systemoriented terms. Follow real-world conventions, making information appear in a natural and logical order.

YES

● USER CONTROL AND FREEDOM: Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.

NO Samples weren’t available on all titles. Was confusing.

NO Didn’t know I had to buy the book from another Google site first.

● CONSISTENCY AND STANDARDS: Users should not have to wonder whether different words, situations, or actions mean the same thing.

YES

● ERROR PREVENTION: Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.

YES

● RECOGNITION RATHER THAN RECALL: Minimise the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.

YES

● FLEXIBILITY AND EFFICIENCY OF USE: Accelerators—unseen by the novice user—may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

NO Accelerators

● AESTHETIC AND MINIMALIST DESIGN: Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

YES

● HELP USERS RECOGNISE, DIAGNOSE, AND RECOVER FROM ERRORS: Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

YES

● HELP AND DOCUMENTATION: Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.

YES

2 DEFINE Synthesise our research to generate insights to

LISTN MOBILE APP UX / UI DESIGN

uncover what problem we are trying to solve

2.1

AFFINITY MAP Here I collated all the important nuggets of information from the research to form the Affinity map.

LISTN MOBILE APP UX / UI DESIGN

The data started to form into these groups of ‘What, how, when, where…’.

2.2

EMPATHY MAP The Affinity Map then fed into creating this Empathy Map. It was quite interesting to put that information in to a visual

LISTN MOBILE APP UX / UI DESIGN

way of empathising with the user and to get a grasp on what they think/feel/see/hear/do when using audiobooks.

2.3

RESEARCH INSIGHTS Some clear insights formed from the research. These insights became key drivers in the ideation process. Some users missed being able to take notes

Book lovers missed

and highlight the

the physicality of

content of paper books

paper books

Readers were sometimes put off by the narrators

The app lacked LISTN MOBILE APP UX / UI DESIGN

personalisation

Readers spoke about

Users often would leave

their desire for

the app to go to a

inspiration and

search engine to look

connection from the

up people or places

reading community

mentioned in the book

2.4 PERSONAS Four distinct personas were created from the research. From these, ‘Amy the busy working mum’ was chosen as my primary persona as her product use, background and desires were aligned with that of the problem statement and client brief.

Primary persona ‘Amy’ Habitulal

Escapism

Learning

Curious

Goals Wants more 'me' time to read Amy wants to learn more about herself and the world she lives in To live a more productive and enriched life

Frustrations

Age: 40 Work: Marketing Manager Family: Married with 2 young boys Location: Lane Cove, Sydney Character: Social, warm, funny, sensitive

LISTN MOBILE APP UX / UI DESIGN

Personality Introvert

Extrovert

Thinking

Feeling

Sensing

Intuition

Judging

Perceiving

Would prefer intuitive user profiles set up from the get go of using the app for her family Finds the tracking of her app difficult at times and wants to quickly look up something she just listened to but can't find the functionality so has to temporarily leave the app Would like to engage with likeminded readers and friends and family but doesn't have the opportunity to do so

Ambitious

Motivation Incentive

Amy is married to Steve and they have 2 young boys. Amy works in marketing 4 days a week and plays tennis. Looking after her family, keeping the house running and juggling work takes up most of her time and energy. As much as she loves her busy and sometimes crazy family life, she finds it difficult to carve out much time for herself and be herself. Amy loves to sneak in the occasional bush walk on her own and also is an avid reader. Amy recently downloaded the Audible app as she saw Celeste Barbers endorsement on Facebook. Amy has found she has managed to listen to audiobooks while doing her housework, bushwalks and while in the car. This achievement of learning/reading while not taking away from her family has been a revelation. So much so, that she has signed up for the paid app and her family now enjoys using Audible.

Efficient

Wants to get a promotion Would like to increase his streetsmarts and IQ Want to live a successful life in and out of the office

Growth Power

Frustrations "Work hard, play hard"

Age: 36 Work: Business Director Family: Lives with long time Traditional Ads girlfriend Location: Homebush, Sydney Online & Social Media Character: Outgoing, intelligent, trustworthy

Influences

Referral

Guerrilla Efforts & PR

Bio

Educated

Goals

Fear

Social

"Life is a journey, not a destination"

Richard the reading retiree

Daniel the upskilling corporate

Amy the busy working mum

Personality Introvert

Extrovert

Thinking

Feeling

Sensing Judging

Intuition Perceiving

Would like to have more tech-savvy options of voice activation when listening to audiobooks in his car or on the train. Would like a better selection of suggestions based upon his profile and selections

Bio Daniel works in a cut-throat industry as a Business Director and lives with his long time girlfriend Karen. When not working crazy hours, Daniel enjoys playing Oztag with his uni mates and obsessing over the next travel destination and fantasy football results. Daniel is a means-to-an-end type guy and has been listening to audiobooks while on the train or drive to work. He loves it that he doesn't have to bother reading but can benefit from what he learns from his audiobook authors like Warren Buffet. He is quite chuffed at his efficiency of strengthening his work status during commute downtime - win = win situation! The only thing he wishes for is that his app would keep up with the times and work better with voice activation and control so he could easily add notes and look up things while driving.

Motivation

Habitual

Incentive

Maya the millennial Escapism

Action

Thriller

Frustrations

Fear

Doesn't want to give his credit card details over for a free trial period Doesn't want to pay a subscription Doesn't resonate with the sample book narrators Found the sign up process complex and didn't want to have an Amazon account before signing up with Audible Expects a higher level of intuitive title suggestions and functionality Loves traditional book reading but this audiobook experience needs to work harder to get him across the line

Growth Power Social "I'm not old. Just classic."

Influences Age: 66 Work: Newly retired Traditional Ads Married with 3 grown up Family: children Ryde, Sydney Online &Location: Social Media Character: Dependible, honest, Referral hardworking and fun

Goals Curious to explore the technology and world of audiobooks Richard wants to keep his brain working and his learning alive with reading whether it be book or audiobook To enjoy the indulgence of reading a book without having to tend to anything or go to work

Guerrilla Efforts & PR

Personality Introvert

Extrovert

Thinking

Feeling

Sensing

Intuition

Judging

Perceiving

Bio Richard recently sold his small importing business to retire and spend more time with his wife Sandra and their two dogs. Richard always wanted to spend more time doing things like travelling, DIY and with his grandchildren. Richard has been enjoying his free time but has been spending too much time reading on his iPad and paper books which he finds difficult due to his deteriorating eyesight. Being reasonably tech savvy for his age, he is curious to try audiobooks as it seems like an easy option for his situation but found the sign up process frustrating as well as he didn't like the idea of handing over his credit card for a 'free' trial period.

Motivation

Quirky

Incentive

Sassy

Motiv

Agile

Incentive

Goals

Fear

A tech native who wants to find her place in today's world To read a book for uni or fun but not have to spend the time doing it

Growth Power

Fear Growth Power

Frustrations

Social

"There are no superheroes, just us. Influences We are the ones you have been

Social

Time short Doesn't want to have to fork out the $ each month for a subscription

waiting for." Traditional Ads

Prefe

Traditiona

23 Media Online Age: & Social Work: Account Coordinator ReferralFamily: Single Location: Carlton, Melbourne Character: Charismatic, selfGuerrilla Efforts & PR assured and smart

Personality Introvert

Extrovert

Thinking

Feeling

Sensing

Intuition

Judging

Perceiving

Bio Maya has just finished her Arts Degree and has landed herself a job as an Account Coordinator at a PR agency. Although she loves her new job, she still hasn't figured out what her exact fit is so she is studying Digital Communications post-grad part-time while working. Not only does it mean she is crazy busy, but she is always trying to fit in time to study as well as live on her meagre salary. Maya works some of her more mundane things like reading into her commute time. She listens to audiobooks as it allows her to browse her social media at the same time. Cost is a big factor as she is on a budget and doesn't want to pay for a subscription. She is happy to sign up for the free trials for some apps and cancel when she has listened to the book. She quite likes the pay by the book offers as that means she isn't locked down.

Online & S Referral

Guerrilla E

2.5 CUSTOMER JOURNEY This customer journey map was created

ENTICE

ENTER

ENGAGE

EXIT

EXTEND

What attracted the user to audiobooks?

What happened when the user started their app experience?

What happened when they’re using the app?

What happened when the user finished the app? What were their final impressions?

Will the customer come back? Has feedback been acted on?

CONTEXT

Amy is watching TV while on the couch at home with her husband working in the study.

Amy is in her study and has just sat down to start her work from home.

Amy has gone to bed a bit earlier so she can make the most of her time getting on the app before sleep

Coming up to the end of her free month trial, Amy is ponder

DOING

She is chilling out by scrolling through Facebook on her iPhone and sees her fave Celeste Barber endorsing Audible

She uses her iPhone to download the Audible app. She signs in with her Amazon account.

Amy is on her phone with her earphones in. Lamp on and water on bedside table.

Amy is listening to Audiobooks on the kitchen bluetooth speakers while cleaning up after breakfast.

WHEN

At night when the kids are in bed.

Amy has sorted the kids for homeschooling. Just after 9am, just before she is due to start work

9.30pm when she has finished putting the kids to bed and has tidied the house just enough not to be messy for the morning.

8am on a Sunday just after breakfast.

THINK

“Hmmm... I love Celeste and i’ve heard good things about Audiobooks. This lockdown time might be the chance to give this a go”

“Easy, I’ve got an Amazon account and can sign in to the free trial. So far so good...”

“I’ll just check out a few titles on my wish list. ... Great, they have all I want. And SO much more. Maybe too much more...?”

“Lets sign up for the Audible subscription as I don’t want to miss out on any awesomeness! I wish I coud share/tell the others. I’m a believer!”

FEELING

Excited, optimistic

Excited, happy, accomplished

Excited, overwhelmed

Pleased, relaxed

to investigate the context of the user’s experience and how they are feeling and at what stage. It was interesting to see how Amy would get overwhelmed by too

LISTN MOBILE APP UX / UI DESIGN

many options.

“I love being able to listen to Audible while doing the housework and walking. I just wish I could share this awesome experience and what i’m reading with my friends and family”

Amy the busy working mum

CUSTOMER JOURNEY

3 DEVELOP Explore effective solutions using

LISTN MOBILE APP UX / UI DESIGN

an iterative approach

3.1

HOW MIGHT WE… Here I reframed our insight statements as How Might We questions to turn those challenges into opportunities. I originally had double the amount of HMW’s but ended up with these final three as they emerged to be the strongest and most suitable.

How might we enable audiobook listeners to discuss and share their reading journey with other readers How might we add functionality that mimics the benefits

LISTN MOBILE APP UX / UI DESIGN

of paper book reading How might we offer listeners more creative control over their audiobook listening experience

3.2

IDEATION I used Crazy 8’s and storyboards to help with ideation and solutions. Keeping our problem statement and key persona Amy in mind, options from both top quadrants of the MVP were chosen to fulfil the client brief and persona desires.

LISTN MOBILE APP UX / UI DESIGN

Crazy 8’s

Minimum Viable Product (MVP)

Storyboard

3.3

TEAM COLLABORATION In this scenario of pandemic restrictions and online learning, I had to use what limited resources I had access to. I reached out to the other Xi students via the Slack channel with any broad questions. This helped immensely to normalise my uncertainty and solidified us students as helping one another. The information was helpful and so was the peer encouragement. I also connected with Jaemie on 3 x mentor sessions. In each session I had overarching questions that I usually found difficult to articulate via the Slack channel and were specific to me. Jaemie helped by knowing my project well enough as well as my skillset to offer advice and answers. I also PM’d Jaemie via Slack to get quick answers eg. “Is this run order OK for my preso”. I reached out to a couple of other team members and we shared our situations and questions. I had one great piece of advice from one of them: always go back to your problem statement. In addition to that, I would run things by my husband who has a background in I.T. and business. He helped by giving an

LISTN MOBILE APP UX / UI DESIGN

objective view on my project.

3.4 CARD SORTING & IA I used card sorting to see how different users see information categories. This user flow was developed to showcase how Amy would navigate/ explore the app. I created the Information Architecture map to get a broader idea on the user’s options. This felt like a necessary step for me to go to a macro view of the app (IA) and then I could better pave out Amy’s flow from there. The IA map was not perfect and needed further thought.

3.5 USER FLOW This user flow was developed to showcase how Amy would navigate/explore the app. Amy is automatically is signed in, browses a book club and selects to follow it, and then starts to explore other readers’ and what they are reading while also searching for reader connection.

Book Clubs

Auto-sign in

Welcome Amy

Current book

LISTN MOBILE APP UX / UI DESIGN

Lets explore

Book Club

Add to Wishlist Add to library Follow book club Join book club

Explore

Lets explore: Your library Book Clubs Genres Top 100 books Discover who is reading what Listn Community

Contextual menu pop over

Who is reading what

Location

List of readers and books

View book

Choose narrator

Play book

Contextual search pop over

Swipe book image box

Search app Search internet Top reader results Search book content

Contextual highlight pop over Save word Save sentence Save paragraph Write note

Who else is reading this book

View reader profile Follow reader Message reader Readers books Readers Book clubs Readers social media Readers comments Comment

3.6 WIREFRAMES I designed the wireframes in Adobe XD with the intent to easily go from basic wires to a hi-fidelity prototype. The wireframes below were created using the assets in the XD program and is the very first draft of the wireframes. From here, I iterated 7-8

LISTN MOBILE APP UX / UI DESIGN

times; removed any decorative fonts to make for a cleaner/pure wireframe, expanded the user journey.

3.7

UI DESIGN After finishing the wireframes, I designed a mood board to encapsulate the personality of the app; bright and interesting. I started off by sketching my ideas. The serif font is a nod to traditional book reading and the Poppins font is a nod to the contemporary aspect of the app.

listn

Hey Amy

Poppins Icae conseque volupta tquidis digene

LISTN MOBILE APP UX / UI DESIGN

officid ea dunt unt occusae stisquam a vendis et ape ex ea nihit et eliti.

What are you going to read today? Becoming

Michelle Obama

Let’s explore

4 DELIVER

LISTN MOBILE APP UX / UI DESIGN

We build and test our solutions

4.1

LO-FI PROTOTYPE Going from a static wireframe showing what goes where, I started to build in interactions and skinning on design elements to

LISTN MOBILE APP UX / UI DESIGN

the wireframe file. Below is a basic working prototype of the app including numbered touchpoints.

4.2 USABILITY TESTING PLANNING I tested the app in lo-fi mode to 2 people and then again once it was developed into a hi-fidelity prototype. This is the document I used to plan my tests.

USER TESTING Petra Symond 22.06.2020 TESTING TASKS: TEST 1: User to go from splash screen to choosing a book title in a book club TEST 2: User to try and see who is reading what by locatin TEST 3: User to be guided by tester through the whole user journey TEST 4: User to explore the whole app Users are to be tested on either test 1 and 3 or 4, or test 2 and 3 or 4. All tests are to be videod to pick up on any physical indications such as pauses or facial expressions. TESTING QUESTIONS: QUESTION 1: How would you describe your experience carrying out your task? QUESTION 2: Did you know where you were? QUESTION 3: Did your task and journey make sense to you? QUESTION 4: What are your thoughts on the app concept? QUESTION 5: How did using the app make you feel? QUESTION 6: Were there any points of your journey that you were unsure of anything?

LISTN MOBILE APP UX / UI DESIGN

QUESTION 7: Were there any points of your journey that made you happy? QUESTION 8: Would you use this app? QUESTION 9: What are your thoughts on the user interface/looks of the app? QUESTION 10: How did you find using the apps navigation? QUESTION 11: Are there any suggestions you have for the app? QUESTION 12: Now that you have had a chance to explore the app, what are your thoughts on it?

4.3 PROTOTYPE TESTING The user testing results directly influenced the app as I included all of their changes and it validated the concept of creative and connection.

Test 1

Test 2

DANIEL: Tested on iPhone

MIKE: Tested on computer

SUZAN: Tested on computer

•

Wanted to have a ‘Home’

•

Liked the UI design

button to get back to ‘Explore’

•

Didn’t know where she was

Wanted to have a ‘X’ Close button on pop ups.

LISTN MOBILE APP UX / UI DESIGN

Test 3

•

Suggested separator lines between listings

•

in ‘Book Club’

•

Really liked the idea of

Too many options on ‘Explore’

exploring other readers, their

screen. Reduce by 2 options.

books, location & community.

4.4 ADOBE XD ARTBOARDS I kept the artboards and workspace as tidy as possible to ensure a clean design space. I tried to use libraries and components

LISTN MOBILE APP UX / UI DESIGN

where possible. I also added side notes to confirm what functions go on what button as well as the user journey touch points.

LISTN MOBILE APP UX / UI DESIGN

4.5 PROTOTYPE

4.6 CONCLUSION & NEXT STEPS Summary

Next steps

In answering the Problem Statement and HMW’s, yes,

•

the Listn app allows audiobook users to listen and connect

audiobook users’ social media

while also offering an enhanced listening experience.

integration, chat and comment

But more work needs to be done. The enhanced listening experience and social/connection aspect is such a nuanced space. The current prototype has

LISTN MOBILE APP UX / UI DESIGN

proven the concept to be valid but the details need further investigation and development.

Conduct specific research on

trends.

•

Lets take a closer look at evolving the book listening options to ensure Listn is meeting the users’ desires. Research and ideate this space.