Winkelstein
Steven Winkelstein, UX Designer | Author
Title_Mockup.png

Photofeeler

BRIEFPhotofeeler wanted to redesign their voting page to increase the size of user's photos and incorporate more current features. They were concerned about crowding the screen.

MY ROLE. Ideation, Wireframing, and UI design. 

SCOPE. A team of two. Duration of three weeks.

 

BRIEF. Photofeeler wanted to redesign their voting page to increase the size of users' photos and incorporate more current features. They were concerned about crowding the screen.

MY ROLE. Ideation, Wireframing, and UI design. 

SCOPE. A team of two. Duration of three weeks.

 Confering with Photofeeler founders Ann and Ben

Confering with Photofeeler founders Ann and Ben

Key Findings (25 screeners, 12 interviews)

  • Women trust friends over strangers to grade their photos because their friends already have context

  • Users did not want a video or a live photo feature unless it was already mainstream

  • Users wanted to be able to rate entire galleries of photos of a single person for more context

  • Users wanted a way to rate photos with some kind of visual context as to where the photos would appear

 

Meet Mary, Photofeeler's main target user. She needs to feel comfortable on and find value in Photofeeler if she's going to use it.

Allplay.jpg

 
 

Iterations

Desktop Sketches

I started playing around with different gallery designs, applying visual context in the form of photo frames. I also began to play with creating more room by thinking about how we can minimize the space taken up by the voting buttons. 

 
 

Mobile Wires

I wireframed several concepts for a voting screen with galleries and visual context. A problem presented itself in terms of screen size. The current Photofeeler voting process required no scrolling. We needed to test scrolling...

Scroll Test

I built a mobile flow for voting, and we discovered that scrolling wouldn't work if we wanted the user to keep the photo in the screen for context and also make the photo larger. 

Design Studio

Scrolling failed user testing. I lead a design studio to come up with alternative layouts for voting buttons in order to maximize space for a larger photo.

Wireframes & Testing Second Round

After picking a winning design, I wireframed and tested before designing mockups.


 
 

Solutions

Validated through testing, I was able to redesign the voting page for Photofeeler, incorporating a gallery feature and visual context. The dating voting screen is based on a Tinder card, the business voting screen is based on LinkedIn, and the social voting screen is based on Facebook.

Mary needed a better way to experience the visual context of the photos on which she would vote, and those she would test. 

Now she can participate in Photofeeler with a sense of value and understanding that didn't exist before.

Photofeeler likes this because it achieves their business goals of updated features, larger photo size, while decluttering the screen.

Increased Photo Size

And speaking of photo size... 

Screen Comparison.png

 
 

The Prototype: Test it out! 

If the simulator isn't loading below, try this. NOTE: You can only give our model 3s on each trait for each photo!

Learnings

  • Incorporate a "notes" page at the end of each photo in a gallery for voters to provide more context
  • Galleries on the voting pages need a larger callout to let voters know that they're voting through multiple photos
  • Future iterations:
    • updated buttons to give their look a more current feel
    • desktop mockups