User Research, Flow Diagrams, and Wireframes

image of frame

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.

app store reviews for frame Next, I coded all the reviews of the app in both the Apple App Store and the Google Play Store. A number of interesting patterns came out of the reviews. 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 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).
Modes are bad

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 ad behavior and always showing icons for Remove and Hide. I also explored different placements for those icons:
Exploring 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.
album view

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 app reviews. 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:
vertical photo - 1 screenshot shows full
But on the frame, it was unexpectedly cropped! Which many users complained about.
vertical photo - 2 photo cropped
This was probably implemented believing that it was prettier to fill the whole frame… but it confused and frustrated many users.
Fixing it took 6+ taps: launch app, find photo, tap it, tap Position, fix crop, save.
vertical photo - 3 how to crop

Automatic cropping should be removed. And unless the Position feature is heavily used, it’d be better to remove it and further simplify the app. (To check, I would have written SQL queries to look for usage that wasn’t simply fixing automatic cropping.)

Assumption: Smart Albums shouldn’t be hidden

The app ingeniously creates “Smart Albums” of photos with each face it finds. Great for sharing all your photos of your children, or finding that specific photo of your spouse!

Unfortunately users were unsure what “Smart Albums” meant, and couldn’t hide Smart Albums of people they no longer wanted to see. For example an ex-spouse, which brought up a painful issue during the research. Another example would be a family member who recently passed away.
can't hide smart albums
Incidentally, notice the three-dot menu — it only contains one action “Add To Frames”. That breaks a heuristic: menus should not contain a single button. Instead, the menu should be replaced with the button.

Duplicate buttons and simplification of flow

Because of all the modes, the flow diagram of the app was tremendously complex:
Flow diagram v0

Removing the modes and automatic cropping allowed a great deal of simplification. 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. Further, frame members will likely change rarely, but was widely accessible, so some buttons for it were removed.
Flow diagram v1

Future directions

If the project had continued beyond this point, future directions to pursue would have been:

  1. Fix additional “low-hanging fruit” UX challenges: bugs when uploading photos, no Call To Action after set up, etc
  2. I’d write SQL queries to see how often photos are hidden. Neither I, nor research users came up with use cases for hiding individual photos or albums (except Smart Albums; those make sense to hide). If usage is low, hiding photos could be moved to the “single photo zoomed in view” or even removed. That would significantly simplify the app.
  3. User research study to go deeper on what customers are doing with the frames, and to understand what other needs (besides those mentioned in reviews and this analysis) weren’t being met. Hypotheses to explore:
    • Greater automation of the initial set up, so users could simply connect their photo library and not select albums or people
    • The app encouraged users to add individual photos, some albums, and then a few people. Re-orient it to focus on adding all photos of a few people and then allow further tweaking if necessary.
    • Allow photo uploaders to temporarily highlight new photos, e.g. “we went to Disneyland this weekend!”
  4. Explore directions to hide people beyond just their Smart Album, e.g. hide all photos that a specific person appears in.