Published on | Prototyping: From UX to Front End — Medium Sherry Xie

Redesigning Evans Lake’s web experience

Evans Lake is a not for profit organization dedicated to providing forest education through camp programs and outdoor recreation. Located beside a pristine lake surrounded by mountain trails, it’s a popular choice for summer camp and destination weddings.

Team: Our team consisted of two UX Designers and one UI Designer. I was responsible for the research, planning, ideation, design and testing. Amanda and I covered two different user groups in each phase of the design process, while Kirk developed the visual identity and interface elements.

Timeframe: 3 weeks

Opportunity

Our client, the executive director of Evans Lake, wanted to redesign the existing website to reflect the core offerings of the organization. The current website lacks mobile-responsiveness and an intuitive information architecture. The goal of the redesign was to increase click-throughs from the home page, and simplify the navigation.

Challenge

The current website has a massive amount of content scattered across many pages. The site must balance the needs of three different user groups: camper’s parents, school groups, and people looking to book the venue for private events. This makes structuring information a difficult task, as the users may be looking for the same information at different points in their journey. The website currently handles with this by repeating information or adding dozens of links in a single piece of content.

Content on current website — orange links to different parts of the website

Another challenge was balancing the organization’s mandate, outdoor education, with their venue rental business. In order to keep their charitable status and receive government funding, the educational component of their program must be prominent. However, venue rentals bring in revenue that allow the organization to maintain and improve the camping experience.

User Research

Surveys

To better understand the needs of the users, we reached out to past camp alumni, venue renters and parents. We wanted to understand what the different groups were looking for when considering a camp, and why.

We asked them to select their favourite aspects of camp, and their most important factors in their decision-making. Factors that came up most frequently were the activities, natural features and seeing photos of the camp.

Interviews

After conducting 10 interviews with parents, alumni of the camp, wedding planners and a teacher, we had a better understanding of what information the different groups were looking for when making a decision.

When parents were asked why they chose Evans Lake, some answered that Evans Lake represented a traditional camping experience like you would see in the movies. Some parents were avoiding skill-based and religious camps. Other parents liked the location of Evans Lake, far enough that it felt like a trip, but close enough that it was convenient.

Parents needed reassurance that the camp site was safe and their staff well-trained. Almost all of them prioritized seeing photos of the facilities. Parents also wanted to read detailed descriptions of the activities their kids would be doing.

Through the interviews, we identified a common pain point among returning campers. Due to Evans Lake’s rising popularity, camp registration often fills up long before the summer. Some parents forget to register in time, and miss out on their preferred session.

Among venue bookers, finding venue availability is the first step in planning an event. The next most important step is seeing the venue in person before making a decision. Because the availability of the venue is often in flux, as people ‘hold’ the venue before making their final confirmation, live updates or a calendar view of the availability was out of scope for the organization. Instead, we wanted to make it easier for the venue booker to reach out to Evans Lake by redesigning their contact forms and carefully placing the contact buttons.

Planning

Affinity Mapping

Using the data we collected, we categorized the experience of registering for camp or booking the venue. We realized that the users have different methods of contact with Evans Lake in order to accomplish different goals. Parents most often attended their open house, whereas venue renters booked a visit by calling or submitting an online form. This helped us decide which CTAs to include and where. We also grouped people’s favourite aspects of camp in order to convey the feeling and spirit of Evans lake through our visual design.

User personas

Parent Persona

Camp allows kids to mature and excel without us — It’s the freedom to explore in safe way.

Using the interview and survey data, we constructed user personas that helped us map the goals, motivations and frustrations of the parents and venue bookers. The frustrations of the parent are surrounding the safety of their child and finding relevant information on the website. For venue bookers, it’s finding information about the cost and capacity of the venue.

Wedding Persona

User journey map

I created a user journey map in order to understand at which points parents are frustrated with the registration process. By comparing the journey map with the interview insights from the venue bookers, we identified points where the two groups were looking for the same information. Both the parents and venue bookers want to know about the activities from the very start.

Parent Journey Map

In the current site, the information about camp programs is scattered across various pages, making it difficult to compare the programs at once. Identifying these pain points helped us restructure the information architecture.

Card sorting

We conducted five closed card sorts with parents and event planners. The issue arose when the different groups were looking for the same information. For example, content such as activities and photos of the site are relevant to both groups. During the card sort, different users naturally grouped those two pages underneath the category relevant to themselves. Parents grouped activities and photos under ‘Camp’ and event planners grouped them under ‘Venue Booking.’ In the final design, we placed site photos under ‘About Us’ and linked to it from the camp programs and venue booking pages.

Existing Navigation

In the current site, navigation categories have sub-categories of their own. We wanted to eliminate these sub-menus in the new design to increase mobile-friendliness and reduce the number of clicks required to find information. We featured camp activities on the home page because it was clear from our research that both venue bookers and parents were interested in it. We also placed Outdoor Education, one of their primary mandates, underneath the venue booking category. We made this decision based on our interviews, where we discovered that the only users looking for the Outdoor Education content were school groups looking to book a venue. To reinforce the mandate, we featured it on the home page in our final design.

User flows

Design & Testing

Testing

We tested the paper prototypes for mobile and desktop with our target users before digitizing the design. After making the necessary changes, we began creating a mid-fidelity prototype in inVision to continue testing. Finally, we finalized the visual elements of the design.

Home Page

In order to showcase the camp’s core offerings in a way that appeals to all three user groups, we carefully curated the content of the home page. We chose images that portrayed the atmosphere at Evans Lake. During our interviews, our users repeatedly used the words “magical” and “serene.” Subsequently, we chose photos of people interacting with the scenery at Evans Lake. As opposed to exclusively featuring children’s activities, which would put off the venue renters, we wanted to strike a balance between elegance and fun. We added tab content outlining the three offerings, the default tab being ‘Camp Programs’ because of its popularity. This tabbed design pattern is reused throughout the site to deal with the large amount of information that needs to be conveyed to the users.

Home Page Iterations

Photo Galleries

Solution: In subsequent designs, we placed each section’s respective photo gallery underneath its own navigation item. In addition, we positioned an image link to the photo gallery underneath the bulk of information in the ‘Camp’ section. We predicted that users would follow the flow of the page and it would reduce the time required to navigate to the photos. In our testing, after users finished reading detailed descriptions about the camps, the schedule and price, they wanted to look at photos of the site.

Mid vs high-fidelity

Solution: In subsequent designs, we placed each section’s respective photo gallery underneath its own navigation item. In addition, we positioned an image link to the photo gallery underneath the bulk of information in the ‘Camp’ section. We predicted that users would follow the flow of the page and it would reduce the time required to navigate to the photos. In our testing, after users finished reading detailed descriptions about the camps, the schedule and price, they wanted to look at photos of the site.

After more rounds of user testing, we realized that parents also wanted to read about the camp’s facilities as much as they wanted to see pictures. This led to the addition of another photo link to Site & Accommodations.

Camp Programs

In the existing website, the five different camp programs have their own pages outlining each description of the camp. In our new design, we created a table with tabs for each of the five programs. The content underneath dynamically changes based on which one you select, allowing parents to easily compare the different programs without navigating to other pages. After testing, we increased the size of the tabs on mobile to make them easier to tap.

Camp Programs

Explore the desktop prototype

Click here to view the project `EvansLake`

File collaboration

We learned the hard way trying to keep massive (600mb) Sketch files consistent between 3 designers would require more forethought. The more screens we created, the more difficult the files were to manage as we scaled. A single ungrouped symbol meant that when something needed to be changed, we had to manually replace it in the 20 screens we had inadvertently copied it into. To avoid that mistake again in my next project, the first thing I did was ensure all my Sketch symbols were properly nested, and had the correct resize settings. Articles like the ones below really helped.

Sketch Resizable (Smart) Symbols for Responsive Interfaces and how they can speed up your workflow.
A Better Way to Make Buttons in Sketch

Developer hand-off

After presenting the design to the client, we began the hand-off process with the 3-person web development team. We provide visual assets, mobile and desktop prototypes and explanations for the interactions. The development team is also given 3 weeks to build the custom WordPress site.

In about a week, we were told there would have to be a change to the information architecture. In our current design, the top level navigation items aren’t clickable. We made this decision by watching people use the current website. We learned that when users are looking for something specific, they immediately looked for it in the sub-menus that appear as they hover over a top navigation item. This behaviour caused issues in the current site, as important information was hidden in the top level link, but people weren’t clicking on it.

However, the developers predicted they wouldn’t be able to implement this type of IA in the given time frame. In response, we created screens for the top-level navigation items that directed people to content in its sub-menus.

Client feedback

Before the presentation, I was concerned about the navigational changes we had made to the site, including removing Outdoor Education and Photo Galleries from the primary navigation. After presenting my reasoning based on the user testing, I was surprised that the client was satisfied with the changes we had made.

The client requested minor changes for the home page, such as replacing the iconography in the tabs with photos to draw more attention to them. We also asked her to provide high resolution photography of the actual lake to replace our placeholders in the prototype.

Thanks for reading! 😊

Follow me on my design journey:

Check out my portfolio or connect with me on Linkedin!

<a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a>

Evans Lake: A UX Case Study was originally published in prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Evans Lake: A UX Case Study

Cool stuff, every week

More Articles