Community Running Website Redesign

UX Case Study

The website is outdated.
It has a lot of unorganized information and it does not show clearly the values of the organization.

(current version)

Community Running

Community Running is a running club that offers runners encouragement, coaching, practical advice, and plenty of fun while pursuing their goals.

Some of the members are experienced and fast runners while others are just starting to run. But all have something in common: they like to run and think that running has to be fun.

    Here is my take to Redesign Community Running (CR) website where I have documented my design process, my thinking and methods and how I came up with the final prototype of the website.

Note: This is a personal project that I took only for practicing redesigning a service.

Design Process

Why the website needs a redesign?

The website looks outdated.

It is not mobile friendly.

It has a lot more information than is necessary.

The brand values of the company were not clearly visible on the website.

What is Community Running?

It is a running club in the Boston metro area.
It offers coaches workouts every week all year around for all ages, experiences or abilities.
It is a USATF registered club.
It is for runners who run for fun, fitness and for a good cause.

How it works?

There is a fixed schedule twice a week- Mondays and Wednesdays with two different coaches.
Runners gather together at the right time and they start warming up, walking stretching, running.

Identifying Users

1) Non-members, interested in learning about the group (especially: what type of running group, where and when they meet, as well as how they can join).
2) Members (especially: interested in learning if a workout has been canceled and renewing/canceling their membership dues and/or email list subscription)
3) Board members (looking up some information on policies or using the website to post something)


Identifying problems in the current website

The website looks outdated in visual design.
The real brand value is not able to be visible on the site.
It has more information than necessary which makes it very overwhelming.
It is very confusing to find certain information.
Not able to figure out what action to perfom on the website-No colors/no buttons/ only links visible.
Low resulotion pictures

Problems in the current use cases

At first glance, the user is not able to:
Understand Community Running meaning/goal
Understand what it offers, how to get there
How to book or join a running group
How to cancel/renew the membership/or email list subscription
How to look up information on policies
How to post something
How the runners can interact with one another or with the coach.

Use Cases

User wants to:
Know what CR is and what does it do
What the purpose is and how to join
View terms and conditions
Connect with the community (via social media)
Events (photography from past-future)

Problem Statement

To redesign the website of Community Running that helps the target audience to understand its goal and purpose and how to join and become an active member.

Solutions-Things to have

These are content that would appear on the home screen that would solve all the problems analyzed from the current website:
Explaining what is Community Running- Values, goals
What CR does-About Us
How should I start- FAQs schedule/Join
Contact Us
Bottom Down section, with social media icons and relevant links

Information Architecture

I ran through making the Information Architecture of the Home Page of the website.


I started by making sketches on sheets to quickly have a flow of ideas. I made the final paper Wireframe as:

I then moved to create the Mid-Fidelity Wireframes :

Visual Aspects: Gathering the following assets by referring to the Mid-fidelity design


High fidelity Design

I designed the final UI of the website on the following screens.


Workout page