Camp Advizor

Camp Advizor is a web app available on all platforms (mobile, tablet, and desktop) that allows parents to find summer camps of their choice using a search method to specify the needs of their children. The platform will return results with enough information about the camps for a quick decision that saves time and effort.

This is an independent case study for my UX Certification. I collaborated with a mentor.

My Role:

  • Qualitative Research & Analysis
  • Personas Creation
  • MVP Definition
  • Wireframes
  • Prototyping & UI Designs
  • Usability Testing

Challenge:

Some parents feel like summertime is somewhat cumbersome (I know I do) because children are out of school, and they still need to work. Some parents take advantage of summer camps, but finding the right camp is sometimes a hassle and a little time-consuming.

Camp Advizor App image
Sometimes finding a summer camp is an hassle. I can't seem to find enough information online.
Veronica, 37-years-old, has three kids, 12, 8, and 3 years of age

My Process is usually different from project to project, but in the development of Camp Advizor, here’s how I define my process to focus on users and their needs.

image of my process for Camp Advizor

Discovery Phase allows me to uncover potiential problem

a snap shot of survey results

For my Research method, I conducted a user survey to gain useful insight into my discovery.

I wrote a 10-question survey and posted it on social media groups like Facebook to reach a larger audience. I received 14 responses from users that matched the targeted user profile. After reviewing and synthesizing the responses, I selected 3 participants for user interviews.

Findings

  • All participant's children attend summer camps.

  • 2 out of 3 participants use search engines to find camps but can’t find enough content about the camps.

  • 1 out of 3 participants relies on friend referrals.

  • 1 out of 3 participants changes camps every year and he or she wants their older kids to be challenged academically during summertime.

  • 2 out of 3 participants keep their children in the same camp until they outgrow the camp.

  • All 3 participants use the following factors to decide on a camp: location, pricing, and program/activities.

Explore to understand users pain points

Based on the user research, I set up two personas. I referred to them throughout the entire process.

  • Each persona had a scenario that identified a realistic goal the user might have when using the web app.

  • The design decisions will focus on the goals and frustration of each persona and the interaction with the product.

Catherine persona
James persona

I wanted to understand users’ mental models regarding the search functionality. How will they define advance search versus the basic search? I decided to use the Card Sorting method. I recruited three users who represent the personas that I previously identified.

Since Camp Advizor is more of an informational product, the layout seems straightforward. While observing the users during the card sorting exercise confirmed that the structure and features were easy to understand through their groupings.

photo of participants doing card sorting exercise
photo of participants doing card sorting exercise

I defined the MVP & User stories based on the information gathered during user research and persona creation to address users’ primary needs, goals, and behaviors.

The main issue that my design decisions needed to solve was for the user to get enough information about different camps based on the functionality of the search box. This information is as follow:

  • Text field for location

  • Selection for distance and age range

  • Text field for educational programs

  • Text field for activities and sports

  • Option to select day or overnight camps

  • Option to select religious preference

Screenshot of an MVP - Minimum Valuable Product

I’ve created a user’s flow diagram to map every step of the user interaction required to achieve the main goal of this app:

As a user, I want to find summer camps for my six-year-old who loves playing soccer and swimming through camp advizor.

user flow sketch image
user flow sketch image
user flow image

At the beginning of my design process, I created a few sketches using the information gathered from my user stories and the card sorting. This process allowed me to ideate quickly and came up with a concept.

sketch screenshot image
wireframe screenshot

Developing the Prototype

I turned my sketches into a black and white interactive prototype using Uxpin software. I tested the prototype in-person and remotely with users to understand how my solution would work.

I believe testing & refinement is an essential stage of the design process that helps validate and improves the design.

Usability Test Demographics:

3 total participants

1 male, 2 females

Ages range between 30-35

Example Task:

Sign up as a first-time user and search for summer camps for your 7-year-old kid who loves soccer and needs improvement with writing.

Test Results:

Overall the testing went well with users able to accomplish the tasks given without any issue. Some of the users were very forthcoming and had valuable ideas around some of the functionality within the app. One of the users had a question about the functionality of the map, which I’ll be iterating and testing to see what users are expecting from the map. This might be something I’ll look into later.

Findings:

  • During the sign-up process, adding text field for zip codes on the location page.

  • The search result page will have field option to sort by price, ratings, or both.

  • Changing the functionality of the log out on the avatar to a dropdown with the option to log out when its clicked.

  • Adding a ‘remember me’ checkbox option for the login page for credentials to be saved.

Here are the changes incorporated in the high-fidelity designs

mobile mockup sample

During the sign-up process, adding text field for zip codes on the location page.

mobile mockup sample

The search result page will have field option to sort by price, ratings, or both.

mobile mockup sample
mobile mockup sample

Changing the functionality of the log out on the avatar to a dropdown with the option to log out when its clicked.

Note: When the avatar is clicked on the wireframe (the left) it will log you out without any warning. This is now incorporated on the high-fidelity designs (on the right).

mobile mockup sample

Adding a ‘remember me’ checkbox option for the login page for credentials to be saved.

Style Guide

I wanted the color palette with the overall look and feel to reflect summer time fun and kids. The colors are bright and vibrant, they represent the primary colors but with a bright blue added (I call it aqua blue). I'm pleased with the colors I've chosen unlike the first color palette I put together.

For the first color palette, I felt the colors didn't really represent the summer time fun I envision and combination were a bit harsh to the eyes when I laid out the design.

style guide screen shot
landing page image on different devices

Landing Page

Login Flow Prototype

What I’ve learned

Research is a must:

The user survey helped uncover other users that were having the same problem as my sister-in-law Veronica. This information enabled me to create design solution that will solve the problem.

Personas are insightful:

Focusing on the users’ needs and pain points helped me to create a seamless experience for the end-user.

Users are always right:

Conducting user testing and evaluating users feedback helped me to discover which features work and the ones that needed adjustments. This process was very valuable and will help eliminate any frustration users might have when using this product.