Case Study: Mobile Indexing App
By: Kevin Dewey
Tags: Human Centered Design, Mobile Apps, Case Study, UX, Interaction Design

TWO ROADS DIVERGED IN A WOOD

After sketching out some ideas we had two flows for two different approaches we wanted to test. So we quickly built an invision prototype with the two flows and headed to a local college to test them.

Initially we thought we wanted to get the kinks out first on local English speakers because we didn’t want to “waste” our limited local Brazilians on a first test that we weren’t sure how it would pan out.

Flow 1: The user chooses something to highlight something and then highlights it. So for example they click “people” then they highlight the name, then if they want to highlight a city they select “Cities” then highlight it.

Flow 2: The user is prompted to highlight names dates and places and then after highlighting something, they are prompted to identify what they highlighted. When they make the initial highlight it is yellow then once they identify what it was it turns it’s respective color.

MISTAKE

We had a limited amount of local Brazilians available for testing so we ended up testing in English to “save” our resources. You will see later on how this choice led us down the wrong road. This prototype was intended for Portuguese speakers from Brazil and we should have stuck to that in every phase of testing.

FLOW #1 WON

Testing showed that 4 out of the 5 people liked flow 1 better. They said with flow 2 they didn’t know what to do initially, there wasn’t a strong enough call to action. Other insights we learned were:

Even for flow #1 it wasn’t clear for everyone what to do at first, that they needed to tap on a category then start highlighting.

People were confused about the wording of the tasks (like highlighting and transcribing) initially till they tried it.

Once they tried it they liked it more compared to traditional “it’s good that it’s on your phone so you don’t even have to pull out your computer.”

It was more work for people to highlight First name / last name not needed, just say “full name.”

MAKING DESIGN DECISIONS

After getting valuable feedback from user testing, we met again to collaborate on the design decisions we needed to make to keep this project progressing. Here are some of those decisions:

01 CONTINUE WITH FLOW #1: Each user test revealed that the mental model that local American/English speakers related most with was to choose a data type (name, date, or place) and then to highlight it, rather than highlighting something and identifying what it was. We decided to flesh out this flow more in the next round.

02 HIGHLIGHT ALL THE NAMES OR 1 AT A TIME? One idea we had was what if a person just stayed in “name” mode and highlighted all the names on the image? We realized that this could be the fastest approach to highlighting because you stay in one frame of mind. The negative to this approach is we wouldn’t know what name matched with what city or date on the image which was a key business need.

So we decided we would do another test with this new flow. We wanted to see if highlighting just all the names, or all the dates, or all the cities would be a lot faster and be a game changer for this app. If that was the case then we would need to build another micro-task in the app later to connect all the data or see if the business could work around this given the potential speed of this approach.

03 COMBINE FIRST AND LAST NAMES: One thing that was clear from testing was separating out first and last names proved to be more clunky and confusing. We changed it from “highlight first names” then “highlight last names” to just “highlight a full name”.

04 ON-BOARDING WAS PARAMOUNT: We also realized from testing how confused people were on just what to do because this prototype was so different than traditional indexing. We needed some on-boarding to help people get context for what to do.

05 CLICK AND DRAG TO HIGHLIGHT AND USE 2 FINGERS TO PAN: Another problem we had to solve is how would a user move or pan around the image and also highlight the image since they were both similar movements. In our competitive analysis we saw a lot of sights (desktop apps) that would click and drag to create a highlight. We decided to move forward with this approach. Then we decided since that required 1 finger then, if users wanted to move around the image they would use 2 fingers.

06 INVISION RAN ITS COURSE: From our tests with Invision we realized that we did great at testing the concept with Ivision and people liked it but it was almost impossible to test the true interactions. This app is all about moving, panning, zooming and image and creating highlights on it, and Invision just didn’t cut it.

Our testing helped us get approval for 1 dev to work very part time on this project to bring this to life. Me and Andrew then collaborated on those design changes by white boarding those concepts out and then updating our digital mocks and by talking with the developer to explain the ideas and interactions. We also invited him to come with us to test it.