DESIGNING FOR THE IMPROVEMENT
Spotlight: Mobile Feedback
Product Design
THE OVERVIEW
Are We Doing it Correctly?
Despite redesigning our mobile app, I realized that we had no avenue of communication between us and our mobile app users. The only time we received any communication was through comments from our user's career coaches or a survey that gets sent out at the halfway and end portion of our program. I felt like we needed to hear more from our users and not through a survey where only one question was asked for our mobile app. I wanted to design a feature that would provided a more frequent method of communication or feedback.
Team
Jeff Lim
Abhi S. (PM)
Aniket K. (iOS Dev)
Vijay S. (Android Dev)
Duration
2 Weeks
Tools
Sketch
InVision/UXPin
Timblee (Beta)
Stark
THE RESEARCH
Competitive Analysis on Feedback
As far as collecting user feedback is concerned, there are lots of way to do it. I looked into a couple of feedback features that we use in our day to day lives.
Transportation:
The most frequent cases of providing user feedback was from ride share apps. Uber and Lyft both prompt riders to provide feedback about their ride/drivers.
Learnings:
-
Short interactions (1-2 clicks for "ratings")
-
Suggested options for giving more detailed feedback without using keyboard
-
Lyft also has a comment section (older screenshot)
Delivery:
For delivery apps I looked at Uber Eats and Doordash. These delivery apps differs with ride share apps because it asks the users to rate both the food experience in addition to the driver.
Learnings:
-
Uber Eats - "Star" value for food and "Like/dislike" feedback for drivers
-
Doordash - measuring quality of both food and driver
Learnings:
There are a variety other examples of asking for feedback such as Mood ratings asking for the cleanliness bathrooms (physical buttons) or websites asking on a scale of 1-10 how willing you are to suggest the site to others, but the ones above seemed most inline with what we were looking to accomplish on our app. All these methods have two things in common. They make it easy to provide feedback and it only happens once per instance (e.g. ride, delivery).
THE CHALLENGE
Getting the Green Light
Now that I identified my next step in improving our mobile app experience, I needed to have a discussion on why we needed this feature and not just from a UX perspective, but also a business perspective. I proposed a method of gathering feedback both negative and positive, but being able to showcase the positives. From a product perspective I would get that communication from the users while from a business perspective we would be able to market and sell our positive feedback in form of app ratings.
My goal was to gather general feedback, both good and bad, in order to provide a method of communication from our users about Spotlight Mobile.
THE DISCOVERY
Gathering All Feedback, Good/Bad
Based on the learnings of the competitive analysis, I created a user flow for providing feedback. In order to satisfy the needs of both the business and our goals, I need to find a method of collecting good and bad feedback while shedding a spotlight on the good. By utilizing the "Like/Dislike" system found in our competitive analysis, I could separate out the feedback between good and bad. From there I could collect the data separately and start to iterate based on the feedback.
iOS and Android:
While discussing the flow with the mobile developers I learned about the difference between providing feedback for iOS and Android. I learned that with iOS' stricter requirements of the Appstore, we could readily implement a feedback system that would allow us to collect feedback directly from the user and send it to the Appstore. On the other hand, Android caters to a larger group of custom apps, which makes integration of collecting feedback a lot trickier. In this particular instance, we would have to send the user directly to the store to give feedback on our app.
THE WIREFRAMES
Getting the Green Light
After socializing the user flows with development and PM, I took to Sketch and created some basic wireframes. So I could better explain our feedback system.
THE ITERATIONS
Accessibility is Key
Based off the feedback, I started added UI to the wireframes. Utilizing what I saw from competitive analysis, I decided to take a similar approach using the like and dislike icons. For the actual feedback section, I went with the standard star approach with a comment section. I felt like users would be the most comfortable to an experience they were familiar with. Then I started thinking about accessibility...
Based on the initial analysis, many of the Principles of Accessibility (Perceivable, Operable, Understandable, Robust) seemed to pass, but there were specific factors that I needed to adjust. With no inputs to popup the keyboard, the "Dislike/Like" buttons didn't need to be so high up. I lowered it for a more comfortable range of motion for the thumbs. The color contrast technically passed the minimum ratio of 4.5:1, but failed the WCAG AAA check which runs at a ratio of 7:1. Technically, it passed the minimum requirement, but I wanted to do a bit more research and ran a colorblind simulation to see what it would look like to people with various colorblind conditions.
Looking at the screens with the different types of colorblindness encouraged me to strive for a 7:1 ratio. I also continued my analysis on the other screens.
I found a few issues with this screen. The touch area for the star ratings were a bit too small. In addition, the instructions were placeholder text, making it disappear on select. I needed to increase the size/touch area of the stars while making sure the input box instructions were viewable to the user after being selected.
THE ITERACTIONS
Making the Changes
For my next iteration, I made some changes to reflect accessibility. I do have to note that after discussing changes to the blue color to improve contrast ratio, I decided against changing it as it is our primary blue (too much impact). With changing coming to our style guide, I decided to make considerations during that exercise.
THE CLOSE UP
Just An Overview
NEXT STEPS
Users Get a Voice
Hopefully after the feedback feature makes it into production (currently in UAT), we'll have a better understanding of what improvements we'll need to make and even how we prioritize them. It's just a small start, but it's one step towards bettering the mobile user experience.
Specific Steps:
-
Keeping an eye on App Store ratings
-
Analyzing actual feedback (comments section)
OTHER CASE STUDIES
Explore some more
