FEATURE REDESIGN
THE TEAM:
John Grace: Interaction Designer, Project Manager
Derek Tseng - UX Researcher
Yichu Wang- Information Architect & Visual Designer
PLATFORM:
iOS native app
DURATION:
2 Weeks
TOOLS:
Pen+Paper, Sketch, InVision, Photoshop
BACKGROUND
What dog is an iOS dog breed identification app developed by the Microsoft Garage. The Microsoft Garage is an internal project space for employees to work on projects unrelated to their job or Microsoft’s overall business goals. The main function of the app is photographic identification of a dog's breed. The secondary function is identifying what breed of a dog a person is.
WHERE WE STARTED
WHERE WE FINISHED
HOW WE GOT THERE...
“This is the kind of app you’re going to take out when you’re with your friends. You’ll make fun of each other, comparing which breeds you look like, and posting the tagged photos.”
“I see What Dog as a great example of how a carefully crafted user experience can enhance the power of machine learning.”
A LOOK AT EXISTING FUNCTIONALITY
PRIMARY
Take a photo of a dog to identify its breed.
SECONDARY
Take photo of a human to identify their dog breed.
WHAT DOES THIS APP DO EXACTLY?
User testing revealed a disconnect between the two main functions of this app. It was unlikely anyone would need to use the app to identify a dog's breed as they would simply ask the dog's owner instead. While fun in practice our test subjects had a hard time drawing a parallel between the person to dog breed match. They were stumped about how the app was making that connection especially since the results commonly changed when analyzing other photos of the same person.
THE PROJECT TASK
Knowing Microsoft's machine learning and user experience goals for this app, how could it be improved for increased user clarity and what functionality, if any, needs to be redesigned for a better user experience?
EXPLORING THE REDESIGN
We brainstormed some ideas for a complete redesign but ended up focusing on the secondary functionality.
WHAT CAR
What Car was a fun idea but after our researcher ran it by some car enthusiasts it did't seem right. They were too interested in their own abilities to identify cars and wouldn't use an app for it.
WHAT FOOD
It sounded fun and we explored the idea but food always looks different and how often would you have food in front of yourself that you couldn't identify? We felt like this idea had some potential for international travelers but it wasn't the right direction for our team nor within the scope of our project..
HUMAN TO SPECIFIC DOG PHOTO MATCH
This was a loose idea we had from the start after initially playing around with the app and it was the direction we took. Providing users with a dog photo match based on visible traits would likely yield funny matches and more satisfying results than simply identifying them as a breed of dog.
IMPLEMENTING THE IDEA
We spent a lot of time discussing how to implementing our new concept. It was difficult working through how the redesign would interact with the existing app. During a design studio we had a breakthrough shown below. We all arrived on the same page with an understanding of what would be necessary to implement this redesign while creating a fluid user experience throughout the app.
PROTOTYPING
In addition to the feature redesign I also focused on clarification of actions already in the app. This generally resulted in using text beneath and alongside icons. Distilling the vocabulary to convey the actions through word play, researching synonyms, and brainstorming with my teammates, I was able to come up with the right descriptions. Matching a human photo to a specific dog photo has parallels between matching a dog with it’s breed but it's a different type of match and the results couldn't be displayed in the same way. As a team we discussed the implications of each match type and I worked towards drawing enough parallels to make sense of each match type within the same application. Below are a selection of early sketches illustrating my process.
SKETCHING IDEAS
The wording of a completed match was important so I worked through some rough ideas.
MISMATCH FLAGGING
During testing of the existing app users questioned the flag icon in the bottom tab bar. This is a "report error" button but it wasn't clear what error they were reporting. Users asked what could they do to report a false breed match which is the intent of the button so I worked through ideas to clarify this icon while redesigning the content of the report error modal.
EARLY USER TESTING
Using a paper prototype we We were able to learn if our testers understood the new feature we were implementing and if they understood how it was making their photo match. We wanted users to enjoy seeing their match being made by keeping them entertained while they waited.
MAKING SENSE OF PERCENTAGES
The app uses a percentage match when identifying a dog's breed, but there is no language to indicate what that percent actually represents. We wanted to clarify what the percent was indicating and also use this for the dog to human photo match. We settled on calling the dog to breed match a “certainty,” and the human to dog photo match a “Match.” We felt this would convey that when matching a dog to a breed it was a percent of being certain but when matching a human to dog it was simply a percent of the visual similarity.
BREED MATCH
HUMAN MATCH
OPTIMIZED AND REDESIGNED FEATURES
In the prototype I mocked up a facial analysis screen while the user is waiting for their match to be made. During user testing there were a lot of questions around how matches were being made. With Microsoft's desire to "enhance the power of machine learning" through this app it seemed appropriate to give our users more information about how their match was being made. This should keep our users entertained while they wait and increase their understanding of what the app is trying to accomplish.
THE DOG BREED IDENTIFICATION FLOW
THE HUMAN /DOG PHOTO MATCH FLOW
MULTIPLE MATCHES
The flow for each feature is similar and the app would determine if a photo was taken of a dog or a human and then make the appropriate match. When matching a human with a dog's photo we would offer three matches on the results screen. This idea was inspired by the Google Arts & Culture app. Returning multiple matches should increase our users overall satisfaction and save them time retaking their photo to try and get different results.
WIREFRAME CLARIFICATION
INTERACTIVE PROTOTYPE
Explore our Invision prototype. Click anywhere on the screen to reveal all the clickable area. On the take photo screen click on the white circular icon to view the dog breed match flow and click on the reverse camera icon to view the human to dog match flow. View this in a separate window for maximum effect.
NEXT STEPS
More user testing. We have a great interface and have had some positive feedback. A higher fidelity prototype would yield the qualitative results we need to learn how successful our redesign is and what needs more refining.
REFLECTIONS
Working through re-design ideas and researching them in the apple HIG was insightful. As it’s such an important aspect of a native iOS application it was a great learning process for me. There were a lot of user test results around ambiguous content and context. Working through these issues was insightful and a great exercise in how one’s impression of an icon or word can have different meaning to multiple users. Working through these ambiguities and user testing the outcomes was incredibly insightful. Incorporating multiple user groups was a challenge that I found very satisfying. Considering who might use this application and having our researcher test those theories made me realize sometimes you really can’t accurately predict your user base before speaking with them. Initially while investigating this app we threw around the idea of changing it’s functionality to identifying cars. We thought this would surely be something car enthusiasts would like. Our researcher happened to know several car enthusiast so interviewed them and we found out they really wouldn't want an app like this. It seemed like such a solid idea but when it came down to it, it likely wouldn’t have been something in demand now would it have the fun interaction aspect of the feature redesign we settled on for improving What Dog’s functionality.