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.
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.
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.
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...
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.
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.
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...
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!
- 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