18 days to fix usability/usefulness issues with SUP the app, a mobile app that enables nearby friends to fix up last minute activities with one another

Tl;dr: There are issues with the usefulness and usability of the app. In particular, the user flows and button labels used were confusing. The revised app has two distinct user flows, familiar words which users can relate to, and added value with a credit card discount feature.

Timeline: 18 days


Project Outline

The diagram shows the design process the team took to improve the current application.

Background

Sup is a social app, that allows you to find friends nearby for activities. The project was born when the two founders came together and felt that they couldn’t find friends when they needed to, after work, for a meal together. My role for this project was as a project manager and user researcher, over the span of about 2.5 weeks. The project ended early August.

Stakeholder Interview

We met the clients on the first day to understand the intent of the project and where we can help. “Sup” brands itself as an app to find friends and not a dating app like Tinder. The two main aims of the projects were for more user testing to be done on their beta version and ideas on how to get new users onboard. We were told that the founders did a lot of “UX/UI” on the application and were confident of launching it in August. We were also promised that the beta version be given to us on the same day for us to do testing on but we were only given access 1.5 weeks later.

User Interview

During the wait, I told my team to start user interviews, while waiting, in order to save us time. A total of 9 user interviews were done to understand the behaviour of people when they planned for activities and the current social apps they are using and why they liked using them.

The demographics of the interviewees are as follow:

Affinity mapping

Affinity mapping was carried out to make sense of the interview results.

Affinity Mapping

The results:

We found out that 100% of the people do not find a need for “Sup” because they depend on WhatsApp to plan for activities. Amongst them, users who are more sociable would turn to Tinder or apps like Coffee meets Bagel to meet potential dates or friends. Since Sup is a “friends” app, all of the users we have interviewed would not use it. The app was not useful and this was the biggest issue we have found.

We had a hard time bringing this up to the founders. To convince them, we turned to the analysis of the user interview results. Yet, they were persistent that their ideas would work and they insisted that they had done a lot of usability testing on it to make it work. We later found out that they repeated usability testing on the same users each time they improved on the product. This was fundamentally wrong in UX, and I had to educate them on it, in a polite manner.

Heuristics Evaluation

When we finally had our hands on the beta version midway through our project, we quickly got down to do heuristic evaluation and usability testing to identify usability issues with the application and determine areas for improvements and user satisfaction with the current application. We evaluated the app against Jakob Nielsen’s 10 heuristics guideline for user interface design, which highlights current usability issues in the user interface design which should be solved in subsequent app launches.

Usability testing of current application

If the app website is difficult to navigate or does not clearly articulate a purpose, users will leave.

The goal of usability testing at this point is to identify any usability problems, collect quantitative data on participants’ performance (e.g., time on task, error rates), as well as determine user satisfaction with the application and areas where improvements can be made.

The issues that surfaced in the usability tests largely overlapped those issues we have identified in heuristic evaluation. These issues include, a mismatch in the words used in the application to words which users understand, such as “Current Neighbourhood” instead of “Current Location”, puzzling labels such as “20% chances of finding a friend on Sup”, and “Common connections” , “1st”, “2nd” labels which were unclear in the app’s context.

What does 20% chances of finding a friend on Sup mean? What does 1st, and 2nd common connections mean?
Current Neighbourhood is used instead of Current Location

Tapping on the ‘Now’ button in Sup allows users to set an event time, which contradicts the meaning of doing an activity with friends around the users NOW, immediately. Users would use WhatsApp to organise activities in the future and will not use this app. This makes the button meaningless.

Tapping on "Now" allows users to set an event time, which contradicts the actual meaning of "Now", as in, Right Now

As we explored the app further, it was also clear that the company’s business preposition was unclear because, while the founders insisted that the app is not a dating app like Tinder, it allowed users to find “Someone new”. When selected, the users’ request be sent to random strangers based on computer algorithms, which they will not be told of. Users are shocked during user testing and were uncomfortable with this feature because it infringes on their privacy, since they do not know who the request was sent to.

Find me "someone new" introduces a strangers' element which runs contrary to what the app set out to do: find friends nearby.

The user flow within the application was also confusing.

Personas

Three primary personas were drawn up based on user research and heuristic evaluation to help guide the problem solving process. The frustrations of the three personas are issues which the revised app should solve. For the purpose of this project, we have focused on solving the app for Persona 1, John Siow.

Our three personas

Recommendations

After brainstorming, the team decided to recommend both short and long term solutions to the founders, in hope to make the app more useful and usable through subsequent app launches.

Short Term Solution

The short term solution will be to improve the UI of the app, in time for their app store launch in end August, and the long term solution will focus on improving the usability and usefulness of it. We focused on solving the user interface issues in the short term plan, including introducing consistent buttons throughout the app, using words that match the meaning of what people usually perceive as labels (e.g. “Find friends” instead of “Find me someone”) and allowing users to select who they want to send invites to.

Short Term Improvements
Long Term Solution

Improving the usability of the app

  1. Onboarding

For the long term solution, the term focused on showing the value of the app throughout the app, starting from onboarding. The team initially requested for permissions to get users’ location and contact book at the start. However, usability testing showed that users did not agree to these requests because they do not trust the app yet. Users also reflected to us that they found that the initial on boarding steps were too long.

Subsequent iterations cut the initial on boarding steps from 7 taps to complete to 4 taps to complete. The on boarding screens focused on engaging the users and bringing out the value of the app through proper copywriting instead of requesting for permissions.

Initial: 7 taps to onboard
Final: Only 4 taps to onboard
Improvements

2. Account personalisation

I suggested that we allow users to personalise their account, by selecting activities which they are interested in according to what the app provides, so that the app can suggest friends with similar interests to them in future for them to set up an activity together. The beta version of the app pulls interests from Facebook, which can include interests like astronomy which is not something found on the app. The team also agreed to remove the “find someone new” feature of the app because it contradicts the true intent of the app of helping people find their friends nearby. By removing these unnecessary information, users are only required to fill up 1 section in the simplified profile page rather than the initial 5 sections, allowing for quicker onboarding.

Personalisation of account

3. Granting Excess

In order to get users to agree on granting access to their location and contact book, we shifted the permissions screens from the on boarding to different phases of the app (progressive disclosure). We asked for them in context e.g. “Allow current location” only appears at the homepage when users see an empty map, where we prompt users to allow locations to see their friends nearby. “Allow phone contacts” only appears when users are about to send activity invites to their friends. All the users we did testing on agreed to all the permissions which we asked from them once we took this approach. With this, we solved the founders’ request of helping them think of ways to get users’ data.

Granting permissions in context

4. Homepage

We also changed the home screen from showing activities nearby (in the beta version) to a map that shows number of friends nearby. This helps to bring out the primary aim of the app — to allow users to find friends nearby for activities, right from the start. People exhibited two behaviours during our user interviews. To set up an activity with friends, users usually:

  1. Find friends nearby, before deciding on an activity to do together (Friends → Activities)
  2. Have an activity in mind, and find friends to do the activity together (Activities → Friends)

We also found out that a small group of people would use the app solely to browse for activities nearby. These findings were incorporated into personas for which the team tried to solve for.

Iteration of Home screen from initial to final design

We introduced two toggles on the top of the homepage to allow for users to switch from finding friends nearby to activities nearby. Each tab has a distinct user flow that allows for the two behaviours to be fulfilled. Users can also use the app solely to browse for nearby activities and exit the app. The team came up with a series of sketches and wireframes and conducted usability test at each stage.

Improving the usefulness of the app

In order to make the app more useful, I came up with the idea of having a credit card promotions recommendation. Our user research showed that people usually meet friends up for drinks, cafes and food. Yet, there is no one app out there that could suggest all the promotions that are tagged to different credit cards under one roof. If implemented, the credit card feature could create opportunities for both the business and the users. For the business, more merchants may be inclined to come on-board the app or advertise on the app. For the users, they can easily filter cost-friendly activities to attend to. This is a win-win situation for both sides.

Credit Card Promotion Filter

Prototyping

Sketching for ideas

A well designed app should allow users to easily navigate the app in a logical manner to complete tasks and retrieve essential information intuitively. The embellishment of the design can come later once the app is made useful. The focus should be on tasks completion before design.

In order to come out with a user flow for testing, sketches were drawn extensively for ideation. After which, elements which were relevant for each screens were combined together to form the ideal screen for paper prototype testing.

Testing the new user flow

A user was recruited to test the paper prototype in order to ensure that the new user flow made sense. The user was successful in achieving the tasks assigned to her, signifying that the flow was logical.

Wire-framing and Interactions for Iteration 1

The sketches were translated into wireframes, which were put into Marvel for interactions in order to allow users to navigate through the app like in real life. This app will be named Iteration 1.

Usability Testing for Iteration 1

The purpose of the improved interface is so that users stay on the app. In order to find out about this, testing of the app is a necessary task. The usefulness of the app is evaluated and usability issues are identified for improvements in the next iteration.

Wire-framing and Interactions for Iteration 2

The wireframes are modified according to the findings in order to improve on the previous design.

Usability Testing for Iteration 2

The purpose of the improved interface is so that users stay on the app. In order to find out about this, testing of the app is a necessary task. The usefulness of the app is evaluated and usability issues are identified for improvements in the next iteration.

To Summarise: Improvements from current beta version

Cleaner user flows to facilitate task completion the app to complete a task (to find activities nearby, find friends nearby, make a reservation, purchase a product, subscribe to something, etc).

In order to maximise conversions, the user flow has to be build to match the users’ needs.

Current user flow analysis:

  • User goals are not met: Users drop out at many points when they were navigating the app. For example, they were confused when they tried sending dinner invites.
  • Business goals are not met: Users are unable to complete their tasks and attend activities with friends
  • The actions that the business wants the users to take are not inlined with the desires users want satisfied.

Improved user flow analysis:

  • Business goals are met: Get users to attend activities with friends, driving app usage and attract potential affiliates
  • User goals are met: Users are guided to complete their task of getting a friend out for activities through two user flows that are in-lined with their behaviour. New features e.g. filter by credit card discounts add value to their experience, encouraging them to continue using the app.
  • Business needs and user goals are aligned.

Improved features

  1. View available friends nearby, instantly

2. Two clear user flows to guide users to complete tasks, achieving business objectives, and increasing user base.

3. Allow users to select activities that the app recommends, rather than data pulled from Facebook, which can be random. This allows them to find like-minded individuals to attend activities together, driving app usage.

4. Allow users to have greater control over whom they would like to send their invites to, based on user research.

5. Get users information progressively, in context. Usability testing results show that users were more likely to click on “OK” compared to when they were asked for their information at the on-boarding stage.

New feature

Credit card feature creates opportunities for both the business and the users. For the business, more merchants may be inclined to come on-board the app or advertise on the app. For the users, they can easily filter cost-friendly activities to attend to. This is a win-win situation for both sides.

Learning points

Importance of User Research
For any business, or projects, it is important to do in-depth user research to understand if there really is a need for the product in the market. User research cannot be undermined to avoid spending money developing a product that no one will use. It is unfortunate that even after introducing changes to the user flow and adding in the credit card function, people we did usability testing on still said that the app is not useful enough for them to use it.

Educating people on UX 
The team initially only wanted to focus on the improvements we have made for the app in our client pitch, but I explained that it was important to take this opportunity to educate our clients on UX. The clients clearly did not understand what UX really is. The team agreed and we incorporated slides on the design process, and explained the rationale of why we do each steps and highlighted the findings from each. I prepared a report on top of the presentation deck. The report has all the steps we took with explanations of why we did them. We forwarded the report to the founders, in hope that they may learn something from it. I think UX is still in the infancy stage in Singapore and it may take a few more years before more people are willing to invest in it, just like in the UK or US. It is up to UX-ers like us now to educate more people about this and drive the growth in this area, which is why I like sharing about it.

Dealing with stakeholders 
Try convincing stakeholders is an uphill battle but similar to educating the masses, this has to be done. One way to convince them is with data gathered from user research and usability testing, showing them what the users need, and use that to persuade them of the importance of certain improvements. If need be, also show them examples of related apps which had benefitted from UX in the past.

However, the reality is that they may still not accept the idea we have proposed even after trying the above methods to convince them. For Sup’s case, the founders insisted on pushing forward with their ideas. My group proposed metrics that they could track when their app is launched, which includes user metrics (e.g. monthly/daily active users), engagement metrics (e.g. session length, session interval and retention rate), and business metrics (e.g. acquisition cost, abandonment rate). We let the facts and figures tell them about the viability of the app.

Personal takeaway 
I was very affected by the user interview and usability test results that all suggest that nobody wants to use the app. In all honesty, I kept believing that the app is bound for failure and felt helpless that nothing can be done to salvage it. This had hindered me greatly from ideating freely to solve the problems the app have, like in my previous projects.

I decided to reach out to a fellow designer from the industry, and also to my group mates, who were all very nice and reminded me that this situation is exactly why UX designers like us exist. It is our goal to help solve problems, and create value in the most difficult situations by prescribing the best solutions we can based on the constraints we face.

After hearing this, my mind was no longer blocked by that prejudice and ideas just flowed. For example, the idea of having two tabs to toggle between friends and activities came immediately to my mind and I was able to lead the team in ideating for our second iteration. We came out with a new interface and the required improvements in a day following my suggestion.

The founders commented that we were “confusing” the users by adding one more flow but we managed to convince them by showing them their previous flow in comparison with ours. However, they still insisted on pushing forward with the current UI despite us sharing the user interview and usability testing results. We have learnt to accept the situation because we know that we have done our best to improve the app in the whatever ways we can.

Conclusion

This project was so significant to me because I have “grown up” after this experience. I have learnt to be objective in the projects I handle, and the importance of accepting imperfections due to constraints in my projects. I have learnt the importance of having a team who will always support you and a mentor who can help you when you need it the most. What I have learnt from GA is a set of skills and problem solving framework in UX. It is now up to me to expose myself more to larger projects out there, in a competitive environment, to hone my skills and learn as much as I possibly can. I want to become a good UX designer who can solve bigger problems for people around me, making their lives better through the power of design.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.