Project Description
Research and redesign for a beautifully easy digital picture frame — the company wanted their app to be an equally great experience.
Skills Used
- Interaction design
- User research
- Flow diagramming
- Wireframing
Analysis and mini User Research process
First I reached out to people who mentioned using the frame on Twitter to get their take on it. Then I then took it a step further and set one up in my apartment, testing it with my own photos. That all lead to many helpful insights.
To gather additional reports of user issues, I coded the app’s reviews in both the Apple App Store and the Google Play Store. Finally, I ran a User Research study; participants thought the frame was beautiful but were confused by the app.
Highlighted issues
Many issues came to light, here are the most detrimental:
- Heavy use of interface modes
- Assumption: Crop photos to fill frame
- Duplicate buttons and simplification of flow
- Future Directions
Heavy use of modes
The Nielsen Norman Group says “Modes can cause a range of usability problems, including […] low discoverability of mode-specific features.” The app used two different modes to add photos to the frame — the app’s most common and important task. Modes hide affordances (what to do, e.g. how to add photos) and status (what is selected, e.g. which photos have been sent to the frame).
Here’s how the app’s use of modes muddled the process of adding photos:
Two additional modes added further complexity and confusion: removing already selected photos (mode #3), and hiding photos from individual albums (mode #4).
To simplify, I merged the modes into the normal album view, by simplifying the add behavior and always showing icons for Remove and Hide. I also explored different placements for those icons:
As mentioned, adding a photo is the most common action, so I settled on a design where tapping on the photo adds it. That might seem like it lacks affordance, but it was the action users immediately tried in the research study.
Other changes in the album view included fixing inconsistent icons and placement of Back buttons, immediate uploading, and making Hiding Photos discoverable.
Assumption: Crop photos to fill frame
The app shows the entire photo, but when the frame was in landscape orientation (wider) portrait photos got cropped! Mildly confusing with portraits of one person, but very jarring when there’s no face (or many faces). This was the most common issue mentioned in reviews of the app. Similarly, if the frame was in portrait orientation, landscape photos were cropped.
Notice the photo of the crosswalk (2nd row). Within the app it looked correct:
But on the frame, it was unexpectedly cropped, like so:
This was probably implemented believing that it was prettier to fill the whole frame… but instead of helping, it confused and frustrated many users.
Fixing it took tapping 6+ times: launch the app, find the photo, tap it, tap Position, fix the cropping, tap Save.
I recommended they remove automatic cropping should be removed.
I also recommended removing cropping entirely, since it was so hidden and added further confusion. I would have liked to write SQL queries to look for usage other than simply overriding automatic cropping.
Duplicate buttons and simplification of flow
Because of all the modes, the flow diagram of the app was tremendously complex:
I recommended removing the modes and automatic cropping. That simplified the UI and the flow diagram a great deal.
Also, there were multiple distinct buttons and icons to access Frame Settings and Members of Frame. Duplicated buttons on separate screens confuse users — they’re unsure if they do the same thing. Duplicate buttons with different icons are even more confusing. So I recommended removing many of them.
Additional research
If the project had continued beyond this point, I would have explored other hypotheses:
- Further automate the initial set up, so users simply connect their photo library
- Reorient the focus from adding individual photos (slow and manual) to selecting people to show on the frame (fast and quickly yields a large body of content)
- Allow photo uploaders to temporarily highlight new photos, e.g. “we went to Disneyland this weekend!” That was a use case that came up in app reviews and in my own testing
- I’d write SQL queries to see how often photos are hidden, and a few other features are used. If usage is low, move them to the “single photo zoomed in view” or even remove them. That would significantly simplify the app.