Girl Scouts OC - Website Redesign

In this case study, we dive into a two-week design sprint to redesign the Girl Scouts of Orange County website. Full Case Study Coming Soon!

Visit Website

Numbers that seal the deal

40+

Over the past 5 years, I’ve worked with more than 40 companies.

4.9/5

Clients have consistently rated me 5/5, except one Brett.

2M+

I’ve driven over 2M conversions through content.

Girl Scouts of Orange County Website Redesign

Girl Scouts is 2.5 million strong—more than 1.7 million girls and 750,000 adults who believe in the power of every G.I.R.L. (Go-getter, Innovator, Risk-taker, Leader)™ to change the world.

Project Overview

We wanted to redesign the website to increase the overall efficiency and usability for new and existing users.While maintaining within the tight constraints of the Girl Scouts brand, we began to develop a research plan.

(1) RESEARCH

Creating A Plan

The main goal for our research was to get a sense of what works on the current site that can be carried over, and what needs to be changed.

Objectives

  1. Understand our user's pain points when navigating the site.
  2. Understand the user's main goal and initial thoughts about the site.
  3. Gain an understanding of how well the marketing comes across for our ideal user.

Utilizing A Survey

We utilized UsabilityHub to create an initial survey to gather general information about the website from various users.

Usability Testing

Data Categorization

Using an Affinity Diagram, we synthesize the survey data into categories.

User Interviews

We interviewed (4) ideal users & (1) stakeholder.
We utilized Miro to analyze the data and started to develop our feature priority matrix.

We were surprised to learn that the majority of those interviewed thought the layout was organized, but still very green. A good portion of them stated that they do not use the website regularly. We they do use the website, it is difficult to find the information they are looking for.

Insight Discovery

Insight 01

By conducting user interviews and surveys, we discovered that the current Girl Scouts of Orange County website is extremely cluttered and difficult to scan.

Specific users even stated that the current cluttered layout is causing many people to click off the website and look for information elsewhere.  We believe that we might be able to help if we make the layout of the website easier to scan. We might do this by reconstructing the navigation and overall layout of the page to ensure that our users can easily find the information.

Doing this will allow our product to successfully communicate information to our users with minimal frustration.

Insight 02

By conducting user interviews and surveys, we discovered that the current Girl Scouts of Orange County website is failing to highlight what we believe to be the main feature.

Through our testing we have observed that quite a few users do not know what the main function of the site is. We believe that we might be able to help if we create a feature prioritization matrix and figure out what our users really need. We might do this by emphasizing the highest priority feature by making it at the top of the hierarchy.

Doing this will allow our product to convey the highest priority information before sharing secondary information.

User Persona

In order to empathize with the user, we decided to craft a user persona that highlight key usability factors to consider in our redesign. We also drafted a short story to allow us to understand a typical scenario the user might be going through.

(2) DEFINE

Redlines

To communicate these discoveries, it is necessary to provide annotations that clearly show areas for improvement.

User Journey Map

User Flow

Where We Started

Iterated User Flow

(3) DESIGN

UI Inspiration

Initial Prototyping Process

Desktop Low Fidelity Mockup

Desktop Mid Fidelity Mockup

Desktop High Fidelity Prototype

(4) TEST

Final Prototype Testing

After working through our second iteration of the desktop view, we conducted more user tests. We arrived at a conclusion that users are in fact able to quickly and efficiently navigate our requests.

Mobile Iterations

Homepage Hero

Throughout the design phase, a fellow cohort worked towards building out the mobile viewport. This process was seamless and collaborative because we used Figma. Based on user testing, we made some iterations to the mobile designs.

So what changed?

  • Removed button to click through multiple heroes
  • Applied consistent button style between mobile and desktop
  • Provided content to support the call to action.

Navigation

So what changed?

  • Replaced logo with a direct way to exit out of the navigation
  • Applied text style to Navigation elements
  • Added crucial call to action components that had high priority on the desktop version.

Mobile High Fidelity Prototype

The Mobile Hi-Fi is the part that took the most amount of time. We took the majority of our research and implemented it into the design. The mobile was built off of the desktop version for a seamless move from desktop to mobile.

CEO Interview

We talked with Vikki Shepp, who is the CEO of Orange County Girl Scouts. Talking to her was very eye-opening for us because we found someone who not only has a passion for the organization but a profound knowledge of what she is running on a personal level.

  • Vikki shared with us her thoughts on the current site. Her main focus on the site was the hero banner and the color scheme.
  • Her main thought process was the idea that the website is not meant for the Girls, but for the volunteers.