Design
Drawing from all the research and strategic analysis above, I went into the phase of sketching and wireframing with the following overarching goals:
-
Satisfy primary user flows: photo submission, album browsing, and joining the site.
-
Surface content to be more accessible and shorten user flows
-
Present a personalized experience that makes albums more compelling and less overwhelming, while keeping feedback and community interaction central to the platform
Considering the aesthetics and technical elements of the site, I also aimed to update it to be more aligned with the popular photography platforms examined in the competitive analysis.
I started with rough hand-drawn sketches, taping together multiple sheets of paper to represent the long, scrollable home screens and cutting these sketches in half to make room for extra sections as needed. Sticky notes were used to represent drop-down menus and actions displayed on mouseover.
I used Sketch to flesh out the rough sketches into medium-fidelity digital wireframes, and added more screens to cover each of the user flows. Since logging in is what allows for many of the personalized experiences on the new platform, I also created screens for the log in flow. Click wireframes to open full version in Sketch Cloud.
SIGN UP
SUBMIT
LOG IN
Once I had the all the necessary screens created as wireframes, I used Invision to put them together into a simple click-through prototype. I had to create some extra screens to allow the prototype to simulate the flow of the feedback mechanism and album browsing. While the prototype did not take user input, testers were still able to click through the submission flow to get a general understanding of how it would work. I used different thumbnail layouts to simulate what one of the differentiating new features, album filtering, would feel like on the new site.
I tested the prototype with three active participants of 52Frames. Testers were asked to complete three tasks (sign up, submission, album browsing) and to give general feedback.
Overall, testing went well. Testers had positive impressions and said that what they saw was generally what they would expect, given the way the site currently works and the ongoing product discussions within the community. They expressed delight at many of the improved flows, especially the surfaced option to submit and the simplified submission form. Testers were able to offer valuable insights as active, engaged participants of 52Frames. They thought carefully about the ways they would expect certain flows to work. For example:
-
While testers quickly understood the purpose of the feedback pop-up, some said they would be unlikely to give feedback when first opening the album.
-
Solution: it was agreed that a better way to trigger the pop-up would be when a user tries to open their own photo to see feedback (give and you shall receive).
-
-
More than one tester expressed hesitation over the placement of the “Edit Submission” link, mentioning that people rarely realize they want to change something until later.
-
Solution: I realized it would be important to surface this option, changing the "Submit" link on the homepage to "Edit Submission" once there is a submission pending.
-
-
It became clear during testing that many users expect keyboard navigation to work within the album, since it did not work on the prototype.
-
Solution: Ensure keyboard navigation is included in the MVP or soon after.
-
Several smaller points of user confusion and opportunities to improve the interface were noted during testing and allowed me to fine-tune the wireframes before delivering to the stakeholder.
Stakeholder feedback was also valuable and generally positive. One of his main requests was to surface the "How it Works" section for logged out users above the educational content. The diverging designs of the photo view and feedback pop-up wireframes proved useful, allowing the stakeholder to compare the two. He suggested that certain elements of the pop-up be applied to all single photos and that the pop-up be further simplified. The stakeholder expressed hesitation about the lack of checkboxes in the submission form, but agreed that his concern applies primarily to new members unfamiliar with the rules of the project. I suggested showing new members an intermediate screen to mitigate this issue while shortening the flow for veteran participants, and he agreed that would be a good solution.
To provide a framework for the visual design of the new platform, I put together a basic style guide. On a photography platform, colors and fonts should be able to showcase a wide range of images without being distracting. A minimalist look is ideal.
H1: Montserrat 30pt (SemiBold)
H2: Montserrat Regular 20pt
Menu: Montserrat Regular 16pt
Body: Montserrat Regular 14pt
Caption: Montserrat Regular 12pt
BUTTON: MONTSERRAT 16PT (SemiBold)
Secondary Button: Montserrat 16pt (Medium)
Many photography platforms (500px, Gurushots, Adobe) have monochromatic color schemes that include blue buttons for calls to action and blacks/grays for content. In the updated color palette, 52Frames is more aligned with this trend. I reduced the number of fonts to one for a streamlined look. Montserrat is a sans-serif font that is elegant and modern when enlarged for headers and navigation but offers great readability as body text.
HOMEPAGE VIEWS
ALBUM VIEWS
FEEDBACK POP-UP (NEW FEATURE)
SINGLE PHOTO VIEW
Using the style guide and incorporating participant and stakeholder feedback, I was able to convert some of the wireframes into higher-fidelity mockups to give a better idea of how the new platform might look with these designs implemented.
research - content strategy - design
The new 52Frames platform has the potential to be more visual and streamlined than its current iteration. It will incorporate exciting new features, giving users a more personalized and compelling experience while keeping feedback and community central to the platform.
go to: research - content strategy