Website Redesign

Improving the user experience 

for Bike Austin members

Bike Austin is a non-profit organization who's goal is to grow bike transportation in Austin in order to improve the communities' quality of life. The problem is that their website is very difficult to navigate and the important things they want to share with the public are getting lost in a maze of pages and a convoluted information hierarchy. 

We met with Bike Austins' stakeholders and  members to find out what they wanted to see on the website and what was most important for them to have easy access to on the Bike Austin website.

Home Page in Computer.png

Working with a team of 4 to design this project, my roles included;

  • Designing the Hi-fi Home Page and Board of Directors pages

  • Conducting User Interviews

  • Synthesizing Data into a User Persona

  • Sketching Wireframes

  • Conducting A/B User Testing

  • Designing the Style Guide

  • Coordinating Meetings with Stakeholders.

Understanding the Problem

Now Lets Take a Look at Their Current Website

We reviewed their website and red lined all the issues that we felt were potential problems. There were quite a few issues, but some of the main issues that we thought were a priority to improve included:

  • Multiple navigation options make it difficult to find what you are looking for.
    • Menu options with different names, take you to the same page.
    • Some menu options seem like they should take you to a particular subject, but they don't.
Screen Shot 2019-09-18 at 9.52.44 AM.png
  • Information Hierarchy Needs to be improved

    • A lot of duplication of information on different pages /Some information seems out of place.

    • Fonts are all similar in size, it's hard to pull out key information at a glance.

Screen Shot 2019-09-17 at 8.41.23 PM.png

The Stakeholder's Needs

Copy of Final Presentation- Bike Austin.

Next we interviewed the stake holders to find out what they wanted to see improved on the Bike Austin website. 

The top 4 most important improvements to the website that they wanted to see included:
  1. Update the Navigation and improve the information hierarchy

  2. Make sure the Education page is easy to find and easy to follow

  3. Add events to the home page so members can get involved

  4. Enable users to easily donate or learn ways to volunteer

The User's Feedback

Copy of Final Presentation- Bike Austin.

Interviewing cyclist and sending out a survey to current Bike Austin members gave us the following insights:

  • 50% of respondents felt that they don't really know the bike laws and regulations well.

  • 6 out of 7 people surveyed felt that the layout of the Bike Austin website could be improved.

Screen Shot 2020-03-26 at 4.15.16 PM.png
Screen Shot 2020-03-26 at 4.13.02 PM.png
Screen Shot 2020-03-26 at 4.15.31 PM.png
Screen Shot 2020-03-26 at 4.15.42 PM.png

"There used to be pages that had rides and descriptions, which I found very useful. I would love to see these front and center again."

"It can be hard to find event information."

"Menus could be more accessible and easy to navigate deeper."

Checking out the Friendly Competition

I did a sweep of some not-for-profit organization websites to see what they are doing well and what we could do better. Below is a snapshot of our findings.

Competitive Analysis.jpg

Analyzing the Data

Using Miro, we organized all of the feedback we gathered into an Affinity Diagram. 

BA Affinity.jpg
BA Affinity.jpg
BA Affinity.jpg

Again, we saw the same 4 issues with the site that needed to be resolved:

  1. The navigation is difficult to follow

  2. Educational information is something users want to see and use

  3. Social Events are important to see and find easily on the site

  4. Donating and volunteering needs to be easily available to the user

Next we developed a User Persona based on the user interviews and the survey.

Meet Our User

Schwinn McGears

Enjoys riding bike with her kids

Tells friends and family about Bike Austin

Mom of 2 young children

Wants to promote bike safety, health and a Green lifestyle

Rides her bike when she goes on errands

Female, 38 yrs

Next We Empathized


  • "I wish there were more safe bike lanes in Austin."

  • "Riding a bike is a great way to get exercise and reduce your carbon footprint."

  • "I want my children to learn how easy it is to ride their bicycles around town."


  • Rides her bicycle to the farmer's market.

  • Takes her children on fun rides.

  • Partakes in Bike Austin's events.

Schwinn's Pains Include:

  • Isn't always sure where to go to find Bike Austin's event information.

  • Frustrated when trying a new bike route. Wishes that there were better maps to follow.


  • The information on the Bike Austin Website is good, but difficult to follow and find.

  • Advocating for safer bike routes is very important.

  • Austin could become a major bike friendly city.


  • Frustrated when there isn't a safe bike path.

  • Excited that Bike Austin is trying to make a difference.

  • More cyclists is good for Austin's pollution reduction.

Schwinn's Gains Are:

  • Safety: Excited when cyclists and drivers are well informed about cycling laws and safety.

  • Family time: Wants her children to feel excited about riding their bikes.

Making it All Make Sense

One of the main issues we uncovered that needed to be improved, was the Navigation. The information on the website was hidden in 3 separate Nav bars, making it difficult for users to find what they were searching for. 

Users reported that looking for Bike Austin events was challenging for them to find. "It can be hard to find event information." Which is also a main issue the Stake holder's brought up.

To fix this issue, we did some Open & Closed Card Sorting. Below is how we finalized on how to structure the Navigation, in 1 main Nav bar.


Going with the Flow

In order to start our designs, we had to develop the user flows. We wanted to make sure that the user could easily find all the information that they were looking for, in a stream lined flow.

About - User Flow

All information About Bike Austin is nested under this drop down menu.

Screen Shot 2019-09-21 at 2.02.01 PM.png

Resources / Education - User Flow

The resources flow includes all bike information related to laws, safety, tutorials and bike routes.

Screen Shot 2019-09-21 at 2.02.01 PM.png

Events - User Flow

The events flow lets you see all the event related materials under one menu.

Screen Shot 2019-09-21 at 2.02.01 PM.png

Get Involved - User Flow

It's important to drive traffic for users to donate and/or get involved. This user flow allows the user to donate easily and sign up to volunteer.

Screen Shot 2019-09-21 at 2.02.01 PM.png

Prioritizing the Data

We then created a MoSCow to prioritize what improvements and changes we were going to make on the Bike Austin re-design.


  • Events on Home pg

  • Dynamic Images

  • Funnel to join

  • Navigation

  • Advocacy

  • Education


  • Engage

  • Update Footer

  • How to 101 Videos

  • Videos

  • Delight

  • Images of B.O.D.


  • Events

  • What We Do

  • Accessibility

  • Newsletter

  • Bike Routes

  • Weekly Calendar

  • Mobile First

  • Social Media

  • FAQs


  • Blogs

  • Google Analytics

  • News

  • New Style 

  • Animation



Time to Start Sketching

Next each person in the group sketched a different page of the website. I was assigned to sketch the home page and the about pages.

The home page is where we started using the new Navigation. During development of the re-design, we felt that users would benefit from a static menu on the upper left side, every time they went to a different page. That way, they were always aware of where they were within the site at all times.

Designing & Testing

Starting the Design

Once we created our hand sketched wire frames, we then each sketched up pages for the Lo-fi prototype. We used XD to collaborate and design on the same file, which allowed us to keep the same look throughout the prototype. 

Users were able to accomplish the following tasks that we asked them to:

  1.  How would find an event and its details on the Bike Austin website?

  2.  Where would you go to find the contact information of one of the Board of   Directors?

  3.  How would you find out about bike laws in Austin?

Some User Feedback during testing included:

“For me the layout is really nice [...] It feels comfortable.” 

“The site was really easy to navigate."


A/B Testing

Once we created our hand sketched wire frames, we then each sketched up pages for the Lo-fi prototype. We used XD to collaborate and design on the same file, which allowed us to keep the same look throughout the prototype. 

In addition, we conducted A/B testing on the Lo-fi prototype with users to get their thoughts on the initial stages of the design.

Screen Shot 2019-10-03 at 6.34.17 PM.png

While designing our Lo-fi prototype, we came across an opportunity to make the navigation even more understandable for the user. We felt that having a static menu on the upper left corner on each page, made it easier for users to figure out where they are on the site. 

Version A: With Side Menu

Version B: Without Side Menu


100% of users tested preferred Version A, with the side menu. 

"Its helpful to me, even if I don't click on it."

"Its already telling me what's on the page without having to scroll down."

"Everything is easily accessible."

Testing & Analysis

The Style Guide

Once we tested our Lo-fi prototype and found out that the version with the side menu was what users preferred, it was time to design the Hi-fi prototype. I created a Style Guide based on Bike Austin's pre-existing style guide in order to keep their branding and aesthetic consistent with the their brand.

In order to do this, I utilized the same palette, fonts, logos, icons and imagery.

I designed the buttons and forms to have rounded corners, to draw the users' eye to them.

Artboard – 2.png

Accessibility Testing

I also tested the main color combos for color Accessibility, to make sure that every user can easily read all of the content.

Screen Shot 2020-04-14 at 1.16.24 PM.png
Screen Shot 2020-04-14 at 2.43.58 PM.png

Going Hi-fi

From there, we used XD and worked together to create the Hi-Fi prototype of Bike Austin's website.

We made sure that the site was responsive, so we designed a mobile version first. 

Mobile with phone frame.png
Mobile with phone frame.png
Mobile with phone frame.png
Mobile with phone frame.png
Updated Home Page.jpg

Home Page Improvements

Below are callouts of the updates we made to the Home Page, based on user feedback and the Stakeholders' needs.

  1. Simplified Navigation

  2. Educational now grouped into "Resources" also has a Biking 101 video on the home page.

  3. Social Events are right under the Hero image, so they are easy to find.

  4. Donating and volunteering CTA buttons are easily accessible

One easy to follow Navigation Bar

Call to Action to donate

1 HOMEPAGE – 8.jpg

Getting Involved

on home pg

Advocacy Easily Accessible

Events on home page


on the

home pg

Secondary Page Improvements

On the secondary pages, we added a static menu on the upper left hand side of the page. This feature was appreciated by 100% of the users we tested.

We also created a consistent look to all the secondary pages, with a hero image at the top and its corresponding text.

Calling out location

24 LAWS – 1.png



Static Nav

Calling out



What We Learned

undraw_public_discussion_btnw (1).png

A few of the lessons we learned while re-designing Bike Austin's website included:

  • Having multiple menus and ways to navigate a website can be confusing

  • Sometimes, less is more

  • Knowing the User's priorities when visiting a website is important when designing

  • Explaining a decision to a stake holder with data is very helpful

Closing Thoughts