This is a case study of my second client project as part of the RED Academy User Experience Designer Professional program. Our client, Evans Lake Forest Education Society, was selected through the community partnership program with RED Academy.

The Opportunity

Evans Lake is a camp and outdoor forest education facility. The campgrounds are open year-round and are also available for school field trips, family events, weddings, corporate retreats, and private bookings. There is a lot of good content on the website, but it needs to be streamlined and better organized. They also want to make the site more user friendly for those viewing information on their tablets and smartphones.

Goals

• Make the website highlight the core offerings of the organization
• Increase click-through rate from the homepage
• Reduce the amount of website content
• Improve navigation
• Update look and feel

Project Timeline

3 weeks

Deliverables

High-fidelity prototype

The Team

• Amanda Chan, User Experience Designer (Me)
• Sherry Xie, User Experience Designer
• Kirk Zhang, User Interface Designer

The case study below highlights my areas of involvement with this project.

Evans Lake

After meeting with our client we were able to narrow down the website’s primary user, the parents, and the secondary users, teachers or couples getting married looking to book the venue. These groups used the website most often and also generated a majority of their revenue. Evans Lake has a good flow of visitors to their website and often run out of space in their camp programs. They would like to focus on improving the accessibility of the information they have online. Their team often receives phone calls with questions that have already been answered on the website.

Domain

In the domain of camp for kids, we did some research online to learn about the importance of camp. The Canadian Summer Camp Research Project conducted by the University of Waterloo examined the outcomes of the Canadian summer camp experience. They discovered that through camping, kids behaviours, attitudes, and values can change around different themes: social integration, environmental awareness, self-confidence and personal development, emotional intelligence and attitudes towards physical activity.

Survey

To get a sense of how people view Evans Lake and camps, we created a survey to identify people’s favourite aspects of camp and the top factors they considered when deciding to either rent the venue or register for camp. This was sent out to past alumni groups on social media and past venue renters.

Survey Key Findings

Interviews

We also completed a total of 10 interviews for a more in-depth understanding behind people’s motivations for choosing Evans Lake. We learned about the important factors that help them make their decision, their pain points and their goals. Sherry and I took turns leading the interviews.

Interview Key Findings

• Photos were an important factor in the decision making process for all groups
• Parents were unable to find the registration table on when camps sessions are available
• Parents required information (photos, staff bios, etc. ) to help determine the safety of their children at camp
• People like detailed descriptions of what activities are available at camp
• People preferred to call and contact Evans Lake for additional details or questions
• Finding the venue capacity and availability is one of the first things that people must do when planning an event (booking the venue)

Persona

The persona is a person designed to represent the goals and behaviours of a significant portion of our users.

With all the information gathered from the research phase we were able to create an affinity diagram. As a team, we found patterns in the qualitative data and grouped information into different categories that would help us detail out our user persona. The categories we identified were preferred methods of contacts, different users of the website, food options, questions that people ask, concerns, what makes Evans Lake unique, ideal experiences, venue factors to consider, and price concerns. I focused on documenting our secondary persona, the venue booking user, more specifically a fiancée who would be looking for a venue for her wedding. My partner, Sherry, focused on the primary users, the parents.

User Journey Map

To further understand our primary persona, the Journey Map below was created. It represents their first touchpoint, learning about camp, and circling back to the beginning when they register their child again for camp. Highlighted in red are areas for improvement that we had identified through our user interviews.

Information Architecture

From the original website, one of the areas of concerns was its navigation. The navigation was extensive and had two layers of sub-menus. Through our interviews we discovered that some people were unable to find the content they were looking for.

Before we began reorganizing the structure, we read through each page to understand its contents. The webpage headings were then listed onto a card, which we used to perform an open card sort to help identify potential groupings. From the different groupings that were created we developed a new set of category headings, which served as our hypothesis for a potential new main navigation.

To test our theory, we selected people who would fall into one of the previously identified user groups to perform closed card sorting with. People were provided with the new category headings and were required to sort the rest of the cards into each category. In our first few test, there was confusion with one of the category headings we had labelled “Community”. Once we renamed this “Get Involved”, people were able to correctly place the cards into this section.

Site Map

Based on the information we gained from the closed card sort we were able to further develop our site map from our hypothesis. In the site map below, the row of light blue menu items under “Home” represents the main navigation menu. From the original 7 categories, we narrowed down the main navigation to 5: About us, Camp, Venue Booking, Get Involved and Contact Us. Our goal was to reduce the size of the navigation to avoid confusion on where people should go and to also remove sub-navigation to avoid hidden information.

Outdoor Education was another major change we made by moving it down a level in the hierarchy. Although it is a very important topic as it is part of Evans Lake’s mandate, we found it was most relevant to the venue booking section as only these groups would be able to book it.

Get Involved was a new section we created to condense the information around this common topic area we discovered.

Through a design studio with all members of our team we generated many ideas on how to organize and displaying the large amounts of content on the website. From there we created more refined paper prototypes that we used for testing to validate the best way to organize the information.

Landing Page

When creating the landing page, we took into consideration what our personas would like to see. They all looked for photos, so we made that a prominent feature on all pages. By having enticing photos, we were able to engage them and keep them scrolling and reading. We worked on the narrative of someone landing on this page and wanted them to first be introduced to Evans Lake. It would then address their specific needs to go to camp, host private events, or get some outdoor education. As many people expressed interest in the activities available for camp, we also made that available on the first page as it was applicable to all. The page was then completed with a News & Events section if people needed more information to help them decide. For the high-fidelity prototype, we did some selection and A/B testing on the imagery and font choices with Kirk to ensure it conveyed the right message, a fun, safe, place for camp and other private events.

Camp Programs

We utilized tabbed sections to allow easier comparison between the different camp programs. This also allowed all the content to go on one page. This condenses all the information a parent requires to make a decision on which camp program to select on one page.

Accordions

We utilized accordions to hide large chunks of information that may not be relevant to a person viewing the page. It allows for an overview of all content and reduces the amount of scrolling required.

Camp Programs

After user testing, we realized that not only do parents care about photos of what camp will look like for their kids, they also care about knowing the details about the camp site. In our high fidelity prototype, we included a section linking to “Site and Accommodations” to provide them with easy access to the content they want.

Catering Menu

In the original paper prototype, all menu content was available at first glance. However, on mobile this required a bit of scrolling. We condensed the information into tabbed section to reduce the amount of scrolling required.

Contact Us

Through testing we further improved the content to ensure people understood the different options of contacting Evans Lake.

Since this was designed as a responsive website, we created two prototypes to demonstrate the mobile and desktop view. We took into consideration the limited screen space for mobile and adjusted the layout and sizes of different elements.

View the mobile version below (breakpoint at 480px) that I created.

Click here to view the project `EvansLakeMobile`

View the web version below.

Click here to view the project `EvansLake`

To address the goals of the project, we created the following updates on the website:

Make the website reflect the core offerings of the organization

The core offerings of the organization are now clearly highlighted on the first page. The content for different users have been condensed into different tabs. This allows the user to limit their view to what is most relevant to them.

Increase click through from homepage of the website

By increasing the amount of content relevant to the different users of the website, we hope to improve the click through rates from the homepage. Originally, the homepage only included content about the Evans Lake location and did not mention its offerings to different user groups.

Reduce the amount of content /Improve navigation

We significantly improved the navigation through thoughtful consideration into the contents of each page. Through consultation with the various users of the website we were able to verify that our mental model of the navigation menu connected with theirs. We also made suggestions on the removal of content on some pages as it was duplicated across the website.

Sketch

This project consisted of the largest Sketch file I’ve ever worked on to this date. It was a challenge working on it with three people. I made extensive use of nested symbols in Sketch, something that I had recently learned to implement. I am always excited for new ways to optimize my workflow. It made things much easier for me to update and keep elements uniform. However, I learned the importance of having my team on the same page in understanding how to use nested symbols. Some were duplicated because it was used incorrectly, but this problem can be easily avoided if we first review together how to use the symbols.

Web Development Hand-off

Since this project was selected to move forward to the next stage to be developed by the web development students, I had the pleasure of working with them. I provided them with the assets and documentation required to create the functioning website. In the future, it would be more time efficient to ensure the final high-fidelity prototype includes all the images required and approved for the final product for a smoother transition between the teams.

Thank you for reading my case study!

This is a case study of my first client project as part of the RED Academy User Experience Designer Professional program. Our client, GoGram, applied and was selected through the community partnership program with RED Academy.

The Opportunity

GoGram is a video editing service that focuses on making professional quality video editing fast and easily accessible at a lower price point than other services. Currently, video submissions are accepted on GoGram’s website and they return the edited video in under 24 hours. GoGram wants to extend their services to be offered on smartphones as a mobile app to make it even more accessible. The app is then expected to become the primary source of video submissions.

Goals

• Communicate that videos are edited by people instead of algorithms
• Ensure customer retention
• Increase engagement
• Increase the number of accounts and video submissions on GoGram

Project Timeline

3 weeks

Deliverables

• High-fidelity prototype
• GoGram rebrand

The Team

Amanda Chan, User Experience Designer (Me)
Cat Doxford, User Interface Designer
Elliot Mayer, User Experience Designer

The case study below highlights my areas of involvement with this project.

GoGram

We started the project with a meeting with GoGram’s co-founder to review the brief and gather additional information.

Company’s Goals and Clients. GoGram was created for the adventurers who like to capture their experiences on video, but doesn’t enjoy the tedious task of editing them. Their main focus is to provide quality video editing services in under 24 hours for a low price. They mostly produce final clips under 60 seconds, which is suitable for social media sharing. Longer projects are also accepted, but would require a custom quote.

Submission Process. For a better understanding of how GoGram users currently submit their videos, we went through the video submission process and noted the information required.

Video Production Process. Once a project has been submitted, GoGram’s team of editors work to complete the project as fast as possible. When completed, an email is sent to the client with a link to their completed video project. GoGram is dedicated to customer satisfaction. They will work with the client over email and will further edit the video until they are completely satisfied with their product.

GoGram wanted to extend this service to a mobile app.

Domain

A number of stats online show an increasing number of views on videos across different social media platforms. This is attributed to the rising number of creators as anyone can have access to the same distribution channels. In 2016, Tubular Insights counted up to 5.7 million independent creators, separate from the entertainment and brand companies. They noticed the most popular content were the quick videos that could be consumed on the go. This information frames the the area of online videos in which GoGram operates.

Comparative/Competitive Analysis

We found some alternatives to GoGram’s services to plot on the positioning map below. Comparing the price point and level of difficult to use the service we were able to identify it’s closest competitor, fiverr. What differentiates GoGram is the team of editors they have that can provide a quicker service than fiverr. The service also stays consistent as it is all managed through one channel of communication (GoGram).

User Interviews

To solidify the identity of the people that would primarily use the app, we interviewed a number of individuals who passed our screener questions. These were developed to ensure that the interviewees were the appropriate users for this app.

Screener Questions

1. Do you like to make video recordings of your experiences?
2. What do you do with these videos afterwards? We wanted to speak with people who edit and share their videos after filming.

From these interviews, we were able to identify the motivation on why they create videos, what they looked for when editing videos, the types of videos they shoot, and their process around making and using videos.

Interview Quotes

[I film and edit my videos] to tell my story.

[I film to] share my experiences in the moment with family and friends. I do this on the go, so they can experience it as soon as I do.

I share my videos on Instagram to connect with people who enjoy the same activities as I do.

Key Findings

• People film videos to share with family, friends, and a community of like-minded people
• They edit their videos to merge different clips, include music to match the mood, add text and additional information to provide context
• Videos being filmed include action shots while on an adventure, travelling shots while in a new place, and everyday activities
• Videos are shared through social media on Instagram and Facebook
• Not all adventurers would use this service as they prefer to have the creative control on creating the videos

Survey

We also created a survey that was sent out to current GoGram users and others that were interested in taking videos and sharing them. We wanted to gain some quantitive insights on some specific areas such as gender, age, devices used for filming, where videos are shared, and what other editing programs/services they have explored.

Key Findings

28 participants

This research was done collaboratively with our UI designer, Cat, who was then able to take these findings and rebrand GoGram. You can find her case study about the redesign on her GoGram case study. From the new brand she also developed the style guide that would be used for the app’s high-fidelity prototype.

Affinity Diagram

From the information gathered in the user interviews and surveys, we were able to use an affinity diagram to organize and categorize the data. Things we discovered were: footage requirements, occupations, motivations, methods of sharing, method of filming, editing factors, types of editing apps currently being used and length of their footage.

Persona

Taking all the information we gathered about the main users of our app from our research, we worked to develop a persona, a person to represent all of the main users’ goals and behaviours. GoGram had presented the main user of this app as an adventurer, but we discovered through our research that there also had to be something more to incentivize their use of the service. We noticed that users with a personal interest in filming and sharing videos and who also had an interest in sharing their business/products through videos were more inclined to pay for such a service if they didn’t have the ability to quickly edit videos. With this information, we created Sarah Roguski below, our main user persona.

Feature List

With a limited time, we had to prioritize all the potential features we had identified in our user interviews and surveys. We identified features that would be a “Must Have”, which would form our minimum viable product (MVP), the most basic features that would meet the needs of early adopters. We also had time to incorporate a number of the features on the “Nice to Have” list, which we identified as important, but not urgent.

User Flow

The user flow below was created by the UX team to help understand all the pathways in which our primary user, Sarah, could go on the app. It helped to identify the different screens in the app design that we would need to create.

Site Map

We created the site map below to help visualize the organization of the app contents. The second row from the top represents the main navigational menu options. “New Project” is made available from all pages as it was the main function of the app.

Journey Map

We also utilized a journey map to understand the emotions the client and GoGram has as they go through the journey of filming video footage and having it edited. By looking at the dips in their mood we are able to identify areas of concerns to improve.

Client Concerns:

• Time it takes to sign up and upload video. To address these concerns, we made sure to display and make prominent the number of steps it would take to complete these actions.
• Feedback and edits required. To promptly address these concerns, we provide the opportunity for them to provide feedback right when they receive their video.

GoGram Concerns:

• Consistently happy until feedback/edit requests are received. From here we noticed the importance of receiving the feedback from clients. However, when no feedback is received it is also important that GoGram be notified when the client is happy with the product and will not require further edits.

Paper Prototype

To create the app, we held a design studio session where we rapidly sketched out every idea we could think of on how to design the different features in the app. We then discussed our options and chose what would work best with Sarah (our persona, the main user of this app). From there we went on to prototyping out our ideas. By simulate the experience of using the app with real users we were able to test our hypotheses and see how they would interact with the app.

Iterations

You can see the low fidelity paper prototype (left) and the further refined iterations of the medium fidelity prototype that was digitally created (right) of the new project screen. This screen serves the main function of the app, to create a new project. We made a vast number of changes on the paper version. We were able to quickly improve any areas that caused misunderstandings by using white out to quickly adjust the wording, add in missing sections with new pieces of paper and drawing in any missing functions. It went through many iterations to address a few concerns:

• User testers were overwhelmed by the number of options available on the “New Project” screen, so the number of steps in the process was increased by one and the pricing/packages was moved into its own separate section following this screen. This also allowed the user to build out their video project before selecting the package that would best suite them.
• The progression bar was unclear, so it was further broken down into the separate title and progress bar.
• The ability to select a theme and audio was confusing to many, so we tried many different methods of displaying this information until we found one that worked (found on the final high fidelity prototype screen).
• The video upload section was rearranged to the top. As the main purpose of this app we wanted the user to consider their videos before selecting a theme or audio.

Following the user testing with the paper and mid-fidelity prototypes, we worked collaboratively with Cat to refine it into our high-fidelity prototype. The final high-fidelity prototype,the result of 9 user tests and iterations, can be found here: https://invis.io/ZJBPBTLF8

To address the goals of the project, we created the following features on the GoGram app based on Sarah Roguski’s needs.

Communicate that videos are edited by people instead of algorithms

The UX team worked with Cat on the final high fidelity prototype to include elements that would identify the video editor in various areas of the app: during theme selection, confirmation screen and the review screen.

Ensure customer retention

Because customer satisfaction was very important, we created the opportunity for any unsatisfied customers to quickly and easily contact GoGram to have their issue resolved by providing a space for feedback on the app.

Increase engagement

We created a community section in the app to allow people to share their videos and view others’ videos as inspiration. This aligned with our persona’s motivations to connect with like-minded individuals.

Increase the number of accounts and video submissions on GoGram

All users are required to create an account before proceeding to any features of the app. This allows the app to personalize the experience for the user and also track their past activity. Also, the ability to quickly submit a video editing request will allow for more videos to be easily created.

Next time, I would spend more time testing my medium fidelity prototype. This would allow us to work out more issues before submitting it to Cat to have the design finalized in the high fidelity prototype. I would also work out a smoother transition between the UX and UI team to increase our efficiency when working with the same Sketch file.

Thank you for reading my case study!