Olmsted Linear Park Alliance

Revitalization of the OLPA website, a historical family park in the heart of Druid Hills.

Timeline
Georgia Tech Studio Design Project
Jan 2021 - May 2021 (4 months)

Tools
Design: Figma, Illustrator
Research: Miro, Qualtrics

My Tasks
Lead UX Designer: Wireframing,  Prototyping, Visual Design
UX Researcher: Competitive Analysis, Site Mapping, Springboarding, Storyboarding

Project Background

OLPA, or the Olmsted Linear Park Alliance, is a private-public partnership/park founded around 25 years ago by the city of Atlanta, Georgia. Spanning six segments, the park is a gemstone of Atlanta and represents nature, elegance, and beauty. 

In my industry project studio course at Georgia Tech, we were paired with various Georgia Tech-affiliated industry partners, and my partner and I were given the task of working with the board of OLPA to revitalize the digital presence of the park. 

How Is Immediate Success Defined? 

Increase in site visitors

Use of website while at park

Easily editable website

How Is Long Term Success Defined? 

High-fidelity mockups with design rationale

Intuitive navigation & information architecture

Handoff documentation

Problem Statement

?

How might we redesign the Olmsted Linear Park Alliance (OLPA) website to attract more visitors, donors, and overall supporters of this local Atlanta community park?

To combat this problem, my partner and I conducted research on the pain points of OLPA's current digital presence and ultimately designed a more visually aesthetic, usable, and useful OLPA website. 
 

Jan

Exploration

Feb

Competitive Analysis
Springboarding

March

April

Visual Design
High-Fi Prototype

May

Usability Testing
Design Changes

Research

First, we endeavored upon an in-depth exploration of our problem space and user context. This involved understanding the context of our problem at hand and following up with a competitive analysis and springboarding activity with design thinkers and OLPA board members. 

Understanding Context

Competitive Analysis

Springboarding

Understanding the Context

In order to redesign the OLPA website, we began our process by trying to get a feel for the problem space and coming up with contextual questions we wanted to answer in our subsequent research. 

Major Questions

How is the current site structured? 

What are some common themes of existing park websites? 

What are the main pain points for site visitors? 

What tasks need to be completed by users? 

Site Mapping

Following this, we created a site map of the current OLPA website. This would allow us to visualize the organization of the website and identify the goals and purposes of the current page.  
 

We also did a competitive analysis to gain an understanding of what makes up a successful park website in terms of site structure, branding, functionality and content. We completed this research by parsing through existing park websites and analyzing various components of each site, including visual design, information architecture, and necessary park content. 

The Process

Moving forward we did a springboarding activity to try to get more insights into the pain points we wanted to focus on addressing for the new website. The task headline was the following: 
 

Design ways to make the Olmsted Linear Park Alliance website more fun, engaging, and informative.

The activity was conducted over Microsoft Teams with a combination of OLPA  board members and expert design thinkers.  After giving participants five minutes to look through the current website, we prompted them to address the task headline by making statements in the form of "I wish..." and "How to..." 

So as to fully synthesize the user data we had gathered from our springboarding sessions, my partner and I endeavored upon using Miro to build an affinity diagram. 
 

Pain Points

We found three main points in the current OLPA website. 
 

Lack of Information

Missing Community Involvement

Website Look & Feel

There is not enough visitor  information on the current OLPA website. 
 

There is not enough emphasis on community involvement, resulting in a lack of visitors and donors.
 

The website does not provide a fun, intuitive, and inviting setting for site visitors. 

Ideation

Our ideation process consisted of figuring out the functionalities, organization, and style of our future website. This would involve breaking down tasks that users wanted to complete and ideating upon solutions. 

Jobs To Be Done

Storyboarding

Park Look & Feel

Site Mapping

The first step in our ideation process was completing what is called a Jobs to Be Done--this was a way for us to figure out the core functionalities and features that we would need to implement.



On the side of the website, the two jobs to be done were "Finding ways to support OLPA" and "Having a well-organized and intuitive website." 

Web Functionalities

User Tasks

It was also necessary to complete a Jobs to Be Done relative to what users of the website would want to accomplish and how best they could accomplish these tasks on the website. The two tasks within this realm were "Visiting the park," "Volunteering at the park," and "Donating to the park." 

Based on our Jobs To Be Done and the two realms of our ideation process (web functionalities and user tasks), we crafted two storyboards. 

Learning About the Park

Supporting the Park

A vital part of our ideation phase was coming up with a new look and feel to the website, primarily involving selecting a new color palette and typography style. Using our previously completed competitive analysis, we ideated upon several color palettes and font pairings that were fun and inviting but still maintained the historical and professional aesthetic required by a park website. 

Colors

Typography

The final stage of our ideation process was creating an updated site map with the new functionalities and user flow we had decided upon.  

Design

We began our design phase by wireframing new mocks of the entire website. In order to gain feedback on our wireframes as well as various style guides options, we conducted a virtual feedback session with the OLPA board members. After finalizing our screens, style guide, and visual components, we moved on with the final high-fidelity prototype. 

The final stage of our ideation process was creating an updated site map with the new functionalities and user flow we had decided upon.  

Following our finalized wireframes and four versions of the stylized home page, we conducted a virtual feedback session with OLPA board members to gain feedback on the mockups. After introducing participants to each screen, we disseminated a Qualtrics link where we asked for feedback on each mocked up screen. We also asked participants to rank their most desired Home page style. 

Feedback Analysis

So as to synthesize the user feedback we had gathered from our feedback sessions, we laid out all of our wireframed screens on Miro and consolidated our findings per screen.  We would use this feedback while producing our high-fidelity prototype. Using Qualtrics rankings, we decided upon the most ideal style guisde as well. Version #4 was chosen

Finalized Style Guide

Logos

Colors

High-Fidelity Screens

Below are some of the most important labeled screens of the OLPA website. Three aspects were emphasized while designing the high-fidelity screens:

Modernized & Fun Appearance

Optimized Information Architecture

Engaging Visuals