Olmsted Linear Park Alliance
Revitalization of the OLPA website, a historical family park in the heart of Druid Hills.
91374.png

Details

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? 

1

Increase in site visitors

2

Use of website while at park

3

Easily editable website

How Is Long Term Success Defined? 

1

High-fidelity mockups with design rationale

2

Intuitive navigation & information architecture

3

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?

Solution

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. 
 

Timeline

Jan
Exploration
Project Goals
Problem Space
Feb
Research
Competitive Analysis
Springboarding
March
Ideation
Storyboarding
Wireframing
April
Prototyping
Visual Design
High-Fi Prototype
May
Evaluation
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. 

Methods

research.png
Understanding Context
Competitive Analysis
Springboarding
website.png
hands-up.png

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

1

How is the current site structured? 

2

What are some common themes of existing park websites? 

3

What are the main pain points for site visitors? 

4

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.  
 
Screen Shot 2022-02-10 at 4.04.16 PM.png

1

Competitive Analysis

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. 
OLPA - Competitive Analysis (1).jpg

Springboarding

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..." 
Group 1.png

1

Findings & Insights

2

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
 

OLPA - Spring Boarding  (1).jpg

Pain Points

We found three main points in the current OLPA website. 
 

information.png

Lack of Information

community.png

Missing Community Involvement

eye.png

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. 

job-search.png
storyboard.png
text-formatting.png

Jobs To Be Done

Storyboarding

Park Look & Feel

site-map.png

Site Mapping

Jobs To Be Done

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

Screen Shot 2022-02-18 at 3.00.17 PM.png

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." 

Screen Shot 2022-02-18 at 3.00.10 PM.png

Storyboarding

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

image.png

Supporting the Park

Screen Shot 2022-02-18 at 2.45.31 PM.png

"Look & Feel"

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

Screen Shot 2022-02-18 at 2.52.52 PM.png

Typography

Screen Shot 2022-02-18 at 2.51.37 PM.png

Updated Site Map

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

OLPA - Updated Site Map (1).jpg

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. 

Wireframing

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

TALKSLOT

Group 73 (2).png
Group 75.png

Feedback Session

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. 

Screen Shot 2022-02-18 at 3.26.46 PM.png
Scheduling

Feedback Analysis

OLPA - Wireframe & Style Feedback (1).jpg

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

Screen Shot 2022-02-18 at 3.32.56 PM.png

Colors

Screen Shot 2022-02-18 at 3.34.29 PM.png
Screen Shot 2022-02-18 at 3.34.29 PM.png

Typography

Screen Shot 2022-02-21 at 3.24.21 PM.png
Screen Shot 2022-02-21 at 3.22.50 PM.png
Screen Shot 2022-02-21 at 3.25.34 PM.png
Screen Shot 2022-02-21 at 3.25.51 PM.png

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:

modern-house.png

Modernized & Fun Appearance

information-desk.png

Optimized Information Architecture

infographic.png

Engaging Visuals

Group 77.png
Group 78 (1).png
Group 78 (1).png

Key Takeaways 

         Design Process

The design process isn't linear; it is a cycle of research, design, and iteration. 

         Industry Work

It is vital to frequently and closely work with stakeholders and industry partners throughout the entire design cycle. 

         Design Rationale

Providing rationale for each design decision is a must, especially while balancing needs between users and stakeholders.