To start, we met with the conference directors and the lead developer on the website on understand the current state and how we wanted to restructure the website as a whole. Our goal with our discussion was to establish requirements and what we collectively envisioned the future state to look like. Additionally, we outlined the process of how we were going to accomplish our main goals of improving the website's accessibility, usability, and overall look & feel.
To begin our process, we had to identify the key areas in which visitors felt most frustrated and thus the areas that we wanted to target in our redesign. To do this, we visited the original website to evaluate the design heuristically as well as gather thoughts from people in our community that used the website. Although most of these conversations informally, we were able to grab key quotes from those conversations. These, along with our own observations, helped inform us with our design decisions.
"It was kind of a struggle when I was searching for specific pieces of information because some things weren't labeled and we had to make lots of assumptions"
As a result of the pain points that we discovered, we identified the main areas we targeted to fix with the redesign. To do this, we sorted the categories of the main pain points we established across several of the pages and rephrased them into "How Might We" statements to rephrase the problem. This way, we had clear objectives when ideating on solutions.
The main problems we aimed to solve include:
Initially, the content of the website was not clearly organized. Additionally, many of the pages were split up into separate sections with little to no content on each page. Our goal with the new site map was to reduce the number of pages overall to reduce the number of clicks users had to take to get to their desired destinations. This meant that we had to redefine the navigation and group together pages with overlapping content. Ultimately, we were able to cut down the number of pages of the site from over 15 to 8 pages while still ensuring not to overload each page with information.
Based on the information architecture we established, we were able to get straight into ideating! We outlined the main content that needed to be on each page and went through several iterations of each page to ensure that primary information is displayed clearly and visually appealing. We also found ways to re-use patterns to ensure the website overall felt like a cohesive experience.
Our goal with the design was also to be intentional with images, add visual interest with cards, and clearly define elements that help draw the user's attention to the main actions within the site.
Since our target audience is a combination of younger campers who are interested in learning more about the camp as well as parents who are looking to sign their children up, we wanted the style of the website to be light and playful.
I led the creation of the style guide to ensure that we maintained consistency and cohesion across pages. Additionally, the style guide also helped us while working together with our developer so he was able to create reusable components across the site. In addition to the basic styling of the website, we also provided insights onto the grid spacing and overall content spacing across all the pages. When translating this into tablet and mobile breakpoints, these spacing guidelines proved to be extremely helpful.
Previously, the website featured large blocks of information that had little to no hiearchy. This made it difficult for visitors to skim and easily find the information that they were looking for. To reduce this, we identified overarching themes throughout all the content and grouped them in ways that was easier for people to read. We also clearly defined typography to introduce clearer information hierarchy.
Currently, most people who visit the website only do so once a year for registration purposes. However, we wanted to create more engagement for the website. Additionally, TAF does not have a centralized location to store exciting content that users like to see, such as pictures and videos from past years of the summer camp. By adding a media page and events page, we're able to give people more reasons to revisit the site.
