Content Strategy
Once I had a basic idea of what features would be included in the new design, the remaining question was how they should be organized. Using OptimalSort, I conducted a remotely administered card sort activity with 8 additional 52Frames participants to understand how they would expect existing and proposed features to be grouped.
Before starting to map out the structure of the new site based on these categories, I used draw.io to sketch out a site map of what is currently on 52Frames.com. While interactive elements of the project happen on Facebook, the primary user flows available on the current site are similar to what the new platform will require.
Analyzing the existing site structure proved helpful as it further highlighted broken flows, particularly with regard to photo submission. After landing on the home page, users must visit a separate challenge page and scroll through the details before finding the option to submit. Since users at this step have already completed the challenge, this adds unnecessary friction. In addition to this issue, the site map surfaced other flows where multiple clicks are necessary to reach important actions. Duplicate sign up flows and FAQ sets are also problematic.
With the information from the user card sort as well as the analysis above, I created a proposed site map for the new platform. While there are more pages represented overall, there are fewer in red - reflecting that most content has been surfaced to be just one click from the home page.
 52Frames current site map |  52Frames planned site map |
|---|
The final step before launching into the design phase was to draw out the major user flows I planned to design. The research findings and feature prioritization helped me decide on three primary flows: the process of taking and submitting the weekly photo, opening and browsing the weekly album, and joining 52Frames as a new member. The site map above served as guidance to help understand the various ways users might move through each flow. I made the following diagrams to represent these three user flows.
 |  |  |
|---|