SUPER!Usability Study &

Design RecommendationsiOS 8.2.3 v1.4.0 beta

Scott Valentine & Gavin Johns

March 3rd, 2015

2

T L ; D R - Executive Summary

• Conducted a 22 Person Usability Study (23 yrs old median age) iOS 8.1.3 beta

• Identified 65 Usability Issues in 5 major areas

• Recommendations for 22 Usability Issues

3

Table of Contents

Table of ContentsUsability Study FrameworkDiscoveries - All Pain Points Sign-up Tutorial Navigation Engagement OrganizationSummaryFeedback

3468

101214161718

4

We tracked what usability issues were common for most people and provided design recommendations. We also included all of the relevant issues that people experienced and provided them under Discoveries - All Pain Points.

We recorded audio of the users working on the app while writing down quotes, insights, and issues. We then noted common pain points and synthesized them under areas of interest (i.e. Sign-up, Tutorial, Navigation, Engagement, Organization).

Usability Study Framework

We asked 22 new SUPER users to go through the following two tasks:

1. A friend told you about a cool new app named SUPER, what would you do?

Sign-up. Explore the app to become acquainted.

2. Navigate to the Explore Screen. Try making a post. Do you notice anything different about certain posts? (Strips) Find a post you like and send them a message. (Respond) What are your overall impressions of SUPER?

5

Discoveries / Recommendations

We classified FIVE major areas of pain: 1. Sign-up 12 common issues

2. Tutorial 15 common issues

3. Navigation 10 common issues

4. Engagement 25 common issies

5. Organization 3 common issues

Most issues revolved around themes: Customization, Sharing, Confirmation, Trust & Meaning

6

Discoveries - All Pain PointsSign-up1. Who are these SUGGESTED USERS? [77% users experience]

2. I want to FIND MY FRIENDS first. [23% users experience]

3. FULL NAME feels intrusive [18% users experience]

4. Why can’t I skip through without CONFIRMING my phone number? [14% users experience]

5. I can SELECT ALL to follow but cannot DESELECT ALL to unfollow [9% users experience]

6. Not sure I trust this app yet to find my friends

7. Why can’t I adjust or move the PROFILE PIC GLASSES?

8. Don’t like seeing advertisers/corporate accounts as SUGGESTED USERS

9. Don’t like NOTIFICATIONS

10. Why can’t I click on SUGGESTED USERS to see their profile first?

11. Could make suggestions based on my interests

12. Lack of distinction as to whether this is this inviting or finding friends?

Tutorial13. I don’t know what this app is about. I’d like a tutorial. [82% users experience]

14. Lack of clarity about differences between FEEDS and CATEGORIES [50% users experience]

15. ACTIVITY TAB is unclear. (what information will I be getting in here?) [32% users experience]

16. MARILYN MONROE button is confusing

17. MAGIC WAND icon is confusing

18. Where are these images in my POST coming from?

19. Swipe left to see who posted and to FOLLOW is not clear

20. Large PROFILE HEART is unclear

21. Am I anonymous?

22. Didn’t know I could hold HEART BUTTON to see all likes.

23. No explanation of STARTERS

24. How do I put a photo in my post?

25. How do I add locations? Are my posts geo-locating?

26. How can I see images under text?

27. Looking for app purpose or FAQ in ME settings

Navigation1. I wish I could customize my own EXPLORE CATEGORIES [9% users experience]

2. Not finding NAVIGATION bar at the top of screen. [9% users experience]

3. Why can’t I change from a grid to list views in my FEED?

4. Swipe top header NAVIGATION BAR to browse through feeds quickly

7

5. Improve NEWBIES clarity (names (already done) and round profile images?)

6. Can’t swipe images in post creation to change images

7. Add image from CAMERA ROLL should be grid layout for faster image selection

8. SEARCH should be in EXPLORE feed

9. Lack of visual clarity between PEOPLE and POST tabs in SEARCH

10. No button to jump to top of feed

Engagement1. I didn’t know there was dropdown list for changing STARTERS [45% users experience]

2. I wish there were previews of TOOL functions when creating a POST [36% users experience]

3. Cannot see PAGE INDICATORS for STRIPS [27% users experience]

4. Where did my POST go? [23% users experience]

5. Why isn’t there a back button for POST / RESPONSE screens and FEEDS? [18% users experience]

6. How can I retrieve a previous IMAGE for my POST? [14% users experience]

7. I thought I had to delete the SIGN IT placeholder text before I could start typing [9% users experience]

8. Why I can’t close POP-UPS by clicking off screen? [9% users experience]

9. COMMENT and LIKE buttons are hard to see [9% users experience]

10. Why doesn’t the IMAGE refresh when you go back to change the TEXT? [9% users experience]

11. Why can’t I post from my ME PAGE or EXPLORE FEEDS? [5% users experience]

12. No messaging? (chat or PM) Why can’t I communicate with users other than visual comments?

13. When I click on a POST in my FEED I’m expecting to be taken to that post’s page.

14. What if I don’t want to choose a STARTER?

15. Why can’t I reposition and scale the images in my POST?

16. Why can’t I draw on IMAGES?

17. Why would I want to SHARE a RESPONSE? Would the context of what it was in response to be shown too?

18. I added a LINK to my POST but don’t see it anywhere

19. Why can’t I change the font in my POST?

20. No confirmation after SHARING to Instagram

21. Why can’t I blend these images with one of my own? (collage, layers, etc)

22. Why can’t I reposition STARTERS and TEXT layout?

23. Why are there only 3 social share options? Where is Facebook, Reddit, etc?

24. The KEYBOARD call-to-action is inconsistent (done vs join, etc)

25. How can I invite my friends to JOIN me on Super?

Organization1. SEARCH field should have auto-suggestions as you type [9% users experience]

2. What day & time was this POST created? [9% users experience]

3. How can I save IMAGES for use in a later POST?

8

Sign-up1. Who are these SUGGESTED USERS? [77% users experience]

Look at changing messaging to clarify who these users are and/or provide suggestions based on interests. From “People you may love” to “Popular People on SUPER” or something similar.

2. I want to FIND MY FRIENDS first. [23% users experience]

Put this before suggested users. People want to connect with friends first. Also, it gives context for what you’re doing when you follow the suggested users.

Example Sign-up FLow:

3. FULL NAME feels intrusive [18% users experience]

Lose “Full Name” and just put “Name”.

4. Why can’t I skip through without CONFIRMING my phone number? [14% users experience]

Are we able to do this?

9

Sign-up5. I can SELECT ALL to follow but cannot DESELECT ALL to unfollow [9% users experience]

Allow users to UNFOLLOW ALL if they accidentally tap or decide not to FOLLOW ALL.

Example Sign-up FLow:

If you tap FOLLOW ALL, you will see the proposed UNFOLLOW ALL option

along with everyone checked as being followed.

10

Tutorial1. I don’t know what this app is about. I’d like a tutorial. [82% users experience]

Create a tutorial. This should address the list of pain points below: ACTIVITY TAB is unclear. (what information will I be getting in here?)

Lack of clarity about differences between FEEDS and CATEGORIES

MARILYN MONROE button is confusing

MAGIC WAND icon is confusing

Where are these images in my POST coming from?

Swipe left to see who posted and to FOLLOW is not clear

Large PROFILE HEART is unclear

Am I anonymous?

Didn’t know I could hold HEART BUTTON to see all likes.

No explanation of STARTERS

How do I put a photo in my post?

How do I add locations? Are my posts geo-locating?

How can I see images under text?

Looking for app purpose or FAQ in ME settings

Example Tutorial Prototype Link:

11

Tutorial2. Lack of clarity about differences between FEEDS and CATEGORIES [50% users experience]

A. Start users at the EXPLORE section. That way, they can navigate into feeds vs. thinking that the FRIENDS feed is the only one. Allows to view organization of content before jumping into it. B. Clarify during Tutorial.

C. Create a Visual Hierarchy. Currently there is no visual differentiation between pages, default feeds, “trending” feeds, hashtag feeds and starters.

3. ACTIVITY TAB is unclear. (what information will I be getting in here?) [32% users experience] Show first time users something in their feed (YOU signed up for Super, YOU liked a post, etc). That way they know what it’s for, plus they can keep track of their own actions.

12

Navigation1. I wish I could customize my own EXPLORE CATEGORIES [9% users experience]

Allow users to customize their EXPLORE page with feeds and categories of their choice. This can be done by creating an ADD feed-square or bar in the EXPLORE page that will take you to a curated list of categories to add or allow to search for own topic, like “lebron”.

Example Add-Category FLow:

ADD feed / category square Curated grid with check-boxes,

search bar, and ADD bar.

Search result for category

keywords.

13

Navigation2. Not finding NAVIGATION bar at the top of screen. [9% users experience]

Increase the size of the carat at the top of the screen.

Example Design:

Smaller Carat Larger Carat

14

Engagement1. I didn’t know there was dropdown list for changing STARTERS [45% users experience]

This can be resolved during a Tutorial.

2. I wish there were previews of TOOL functions when creating a POST [36% users experience]

A. This can be resolved during the Tutorial. B. Change the layout of the compose section. See Examples below.

Example Designs:

Flip Existing Button Layout Add another row of images and

change interaction to be swipe

up to see a grid of images

instead of swipe sideways for a

line of images.

Create buttons within buttons.

Resize preview images to expand

to full bleed.

15

Engagement3. Cannot see PAGE INDICATORS for STRIPS [27% users experience]

An onboarding tutorial designed as a STRIP with instructions on what to look for and how to navigate the many features of SUPER will eliminate this pain point.

4. Where did my POST go? [23% users experience]

Provide confirmation - discussed previously.

5. Why isn’t there a back button for POST / RESPONSE screens and FEEDS? [18% users experience]

Provide a back button during the POST screen instead of the “X”. Thorben showed me you can tap into it, but 0% found the feature.

6. How can I undo an action while composing a POST? [14% users experience]

A. Be able to undo an action while composing a POST. B. Be able to save image in interim to compare and contrast.

7. I thought I had to delete the SIGN IT placeholder text before I could start typing [9% users experience]

Upon clicking on the SIGN IT field, the placeholder text goes away

8. Why can’t I close POP-UPS by clicking off screen? [9% users experience]

Allow tapping off of pop-ups like the ADD LINK / LOCATION button and the SHARE/ RESPOND/REPORT button.

9. COMMENT and LIKE buttons are hard to see [9% users experience]

Make larger - discussed previously.

10. Why doesn’t the IMAGE refresh when you go back to change the TEXT? [9% users experience]

When users press back to edit text while posting, allow the images to refresh to the new text. Are we able to do this?

11. Why can’t I post from my ME PAGE or EXPLORE FEEDS? [5% users experience]

Show Compose button in ME page and other FEEDS.

16

Organization1. SEARCH field should have auto-suggestions as you type [9% users experience]

When searching for images, allow auto-suggestions in a list during typing.

2. What day & time was this POST created? [9% users experience]

Put timestamp under name in profile screen of post.

Example Design:

Existing Profile screen in Post. Proposed Time Stamp.

17

Conclusion

Feedback for SUPER was very positive. Most people liked the fun “feeling” and delightful surprises they experienced when using the app for the first time. The majority of users were excited to use it again.

The usability issues discovered during this second sprint present a host of opportunities for SUPER to continue to improve its user experience. We hope these design recommendations help the team make SUPER, SUPERer.

18

NEXT STEPS

Scott Valentine & Gavin Johns

• FEEDBACK?• Is there a way to track changes and measure?• Design refinement?

Thank You!