LIT College Tour Case Study

Website Redesign

Pro Bono Contract 

What is LIT College Tour?

LIT College Tour is...

Leadership, Innovation, and Transformation.
LIT College Tour's mission is to cultivate the future of their mentees by creating strong mentor mentee relationships. We believe that by cultivating the student's minds they will benefit from a fruitful future.

Goals and Scope

My team and I first wanted to set what the goals and scope of the project was. These include:

• Raising membership conversion rates
• Prioritizing member sign up
• Prioritizing social media feed

Our project scope is to provide a full website redesign with high fidelity deliverables within our sprint period.

Timeline

Three Week Sprint: January 22nd, 2018 - February 12th, 2018

Process

1. Research: Where Do We Start? 

We wanted to conduct some user research to give us insight as to what needs improvement. We conducted a series of market research including:

• Competitive and Comparative Analysis
• Nielsen's Usability Problems Heuristic Evaluation

What we identified as areas of concern:

• "Home" button on main navigation is not consistent with their content
• Lack of information heirarchy
• Unclear Call-To-Action buttons
• Lack of Sign-Up forms
• No way of joining the mentor/mentee program
• Lack of credibility and proof of program's success

Users' Pain Points

We then conducted user interviews which were sorted into an affinity map. The main pain points that users' had with the website included: 

• Not enough information about program
• No credibility or proof of program's success
• Not enough information on event

"I don't really understand how to sign up to become a mentee?" - User

2. Synthesize: Let's Take a Look at Our Findings

By looking at our affinity map we can group the users' pain points into different subjects. What we were able to find allows us to create personas that encapsulate the users' motives, goals and frustrations.

Meet Selena and Darnell

During our project briefing and our user research phase we identified who our primary and secondary users were. The primary users comprised of mentees and potential mentees while secondary comprised of mentors. 

Mentee Persona

Customer Journey Map

Next we wanted to visualize what our users' emotions would be as they went through the website. We created a customer journey map for Selena to view just this.

User Flow vs Redesign User Flow

We also wanted to visualize the current user flow. We created a visual map for the current user flow which we analyzed and found out our users were often:

• Bottlenecked
• Leaving the website without finishing their task of signing up
• Users ended up at "Contact Us" for majority of the flows

This prompted us to create what we felt was an ideal user flow based off of our user research. We crafted this with these key factors in mind:

• Keeping the paths simple for users
• Helping our users find actions quickly
• Limiting the bottlenecking of users

3. Ideate: How Can We Help the Users?

Site Map

It's important that we get the basic structure of the website refined. We did so by creating a site map based off of our synthesized data. This will help us define the hierarchy of how the website will flow.

Feature Prioritization (MVP)

Before we really dig into ideation and solutions for our users we wanted to figure out what features are necessary for a successful website. We adopted and used the MoSCoW method of feature prioritization to decide what was needed.

Design Studio

We sat down with the client in our first of many design studio sessions in order to all be on the same page. This builds trust between us and the client as we are able to draw upon each others inspiration, creativity, and mentality.

It is also here that our first iteration of the product is created. We create low fidelity prototypes that represent our research findings and goals up until this point.

4. Testing: Does it Work?

Now that we have created the first iteration of the product we want to see if the basic version is intuitive or not. We conducted a number of tests to see if our first design was intuitive. What we discovered:

• Users had trouble finding register buttons on Events page
• Users thought image banners in About page were excessive
• Users wanted the option to see all event dates

5. Iterate: What Can Be Improved?

Moving forward from Low to Medium Fidelity, we continued to prioritize the mentor and mentee functions as well as success stories to promote credibility. These changes were all driven by our users' responses.

Medium Fidelity Testing

We also took this opportunity to update the brand and style guide. We updated the secondary colors to be complimentary to the primary colors for two reasons:

• To further reinforce the primary brand colors
• To help the website flow better

Another major change we made included updating the font from Myriad Pro to Avenir. The new font we chose is a sans serif font which is read easier on web clients. 

Medium to High Fidelity

Moving forward with our iteration we developed high fidelity wire frames. The high fidelity prototype reflects all the user input gathered in our medium fidelity testing.

Side by Side Comparison

Prototype

By turning our high fidelity wireframes into a prototype we can conduct one last round of testing.

Check it Out!

6. Takeaways: What Have We Learned?

The key takeaways was of our redesign is:

• 100% of our users felt the final prototype was easy to use
• 100% of our users felt the final prototype was intuitive
• Personable and Credible

Key Performance Indicators

Key Performance Indicators (KPIs) of our redesign are:

• The time it takes to register as a mentee or mentor
• Completion rate of website forms
• Intuitive information hierarchy 

What's Next?

Back to Top