lit college tour website redesign

Brief

LIT College Tours is a national non-profit mentor-based program that connects under served first generation college students to mentors, jobs, internships, and career development.

The project scope was to redesign the current website to increase event attendance, membership conversions, and reach national brand awareness.

Note: This was a pro bono project supervised under General Assembly instructors.

 

Team: Christine Le, May Lee, Jennifer Jinn, Felix Tsai

My Role: project manager, user research, user journey map, wireframing 

Tools: Sketch, Google App, Pen, Paper, Whiteboard, Marvel

Duration: 3 weeks

 
 

The Process

ux process.png
 

research


Heuristic Evaluation

 

We started our research with an inspection of the current website based on Jakob Nielsen's 10 general principles for interaction design. This gave us a better understanding of how the site operates and what problems to validate in further research. From our evaluation, we discovered the site needed touchpoint consistency,  information architecture redesign, and interactive features. 

Heuristic evaluation

 

Competitive & Comparative (C&C) Analysis

 

C&C Analysis

We also evaluated our competitors and compared their different features with our site to help us understand where we stand in reference to the competition and generate ideas. Though LIT shares information about their organization, there is no sign up process nor evidence of member success.

 

 

 

 

User Interviews

After our initial research we met with 10 target users: 1. college students (mentees) 2. working professionals (mentors) to conduct user interviews to learn personal experiences and opinions about the organization, the on boarding process, and website usage and experiences. This allows us to understand our user's pain points and needs. I created a user interview script to stay aligned with our goals.

After hearing my teacher talk about LIT, I joined for the career opportunities and guidance.
— Debbie, mentee
If it wasn’t for the people I’ve met, I wouldn’t be where I am now. I want to pay it forward.
— Andrew, mentor

Affinity Mapping

We took our data from user interviews and did an affinity map for each target user group. This allowed us to discover patterns of motivations, goals, and pain points.

Mentor Key Insights:

  • Became a mentor thru informal in person process; site has no sign up form

  • No evidence that program works

  • Meetings are scheduled informally; done in person, email, or phone

Mentee Key Insights:

  • Wants a mentor to connect them to a job, give advice, be supportive

  • Notified of events thru social media, email, or school

  • Site is outdated and needs more information

 

Persona

With these insights, we created a persona for each target user to focus on the most common motivations, goals, and frustrations. Because the organization's mission is to help students, Selena the mentee is our primary user we want to prioritize solving her issues. 

Mentee Primary Persona

Mentor Secondary Persona

User Journey Map

During the interview process, we gave the users the task scenario: Use the LIT College Tour website to sign up as a mentee. We observed their actions, remarks, and emotional state to create a user journey map. This visualization helps to identify specific points in Selena's experience that are painful. We learned that users were not able to complete the task due to lack of information and misleading calls to action. This left them feeling disappointed and skeptical about organization. 

Mentee Selena's User Journey Map

Card Sorting

User performing a card sort

User performing a card sort

We conducted 8 closed card sorting tests to determine how users would categorize the information or relabel the cards. This helped us ideate a new information architecture.

Insights:

  • The logo and home on the top navigation were redundant

  • '2018 Tour' was vague and confusing

  • Some of the social icons were unrecognizable

 

ideation


Problem Statement

Selena joins mentorship programs to get more networking opportunities because she wants to secure a job after college. However, Selena can’t find sufficient information on the LIT College Tour website to join and find a mentor. How might we help Selena to find the information she needs to make a decision?

Information Architecture 

From the card sort data we created a new site map, which serves as the blueprint of the website.

Changes made were:

  • Prioritized 'Join LIT' with pages for mentee/mentor

  • Renamed and condensed all pages under '2018 Tour' into 'Events'

  • Added 'Success Stories' below 'About'

  • Removed 'Donate' page because the only content is a link to Eventbrite

New Site Map

New Site Map

User Flow

From the task scenario data, we created a user flow to find out the specific points where users were having problems completing the task. On the current user flow we noticed users ended up not completing the task, leaving the website at various points. We wanted to redesign the user flow in a way that reduces negative outcomes and delivers the most effective manner possible focusing on completing the task. 

Current User Flow

Ideal User Flow

Feature Prioritization

After we completed the structure, it was now time to determine what features would make up the structure. We wrote out all the features currently on the website and additional features that would help solve current issues. Then we categorized each feature under must have, should have, could have, and won’t have. This also allows us to clearly visualize our focus and minimal viable product (MVP). We brainstormed many ideas, but our time constraint and project scope made us realize some features were not a priority at this time.

MoSCow Prioritization.png

Design Studio

IMG_0417.jpg

I led a design studio with our client to build trust and communication. We drew upon each others inspiration, creativity, and mentality to create sketches of the layout and content of each page. After discussion, we unified the best concepts that fit our goal and scope into a final paper prototype. 

 

Prototyping & Testing


Paper Prototype & Testing

We started with a low fidelity paper prototype because it is allows room to make changes without wasting time and cost. With our usability test plan, we were able to discover how intuitive our design is. I observed users completing different task scenarios, and took notes on their likes, dislikes and recommendations.

Testing Insights:

  • Register/Share buttons were not noticeable due to proximity

  • Users thought image banners on every page were excessive

  • Users wanted the option to see all event dates

  • Users did not expect 'News' be to a blog

User performing our usability test

User performing our usability test

Medium Fidelity Prototype & Testing

We took our usability test insights and iterated our process to create a more refined product. I took the following changes and digitized the wireframes in Sketch. Users were able to complete the task easily, but there were a few problems.

Testing Insights:

  • Twitter feed on homepage was obtrusive

  • The event calendar image was not noticeable

  • Users didn't know how to proceed after the confirmation page

Changes:

  • Rename News to Blog

  • Events page: Move 'Share' and 'Register' above Speakers; add event calendar

  • Remove image banners from Team, Sponsors, and Contact pages

  • Remove Donate page; replace with call to action button

Medium Fidelity Wireframes

Medium Fidelity Wireframes

High Fidelity Prototype & Testing

In this round we fleshed out our wireframes by adding our user interface (UI) and new style guide to create a full functioning product.

Testing Insights:

  • Users completed the tasks quickly under 1 minute

  • Users felt the site was credible, describing the site as "professional" and "trustworthy"

 

Changes:

  • Home page

    • Replaced Cities with event calendar

    • Moved Subscribe To Newsletter and Donate to footer

    • Moved Twitter feed and added Instagram feed

  • Events page

    • moved event calendar to top of page

  • Confirmation page

    • Added popular links to guide user

High Fidelity Wireframes

High Fidelity Wireframes

 

Launch


With our final test insights, we made a few minor adjustments to the UI and copy to make sure everything was up to industry standards and our goal was met. View and click thru the final prototype below.

laptop .png

Reflection

Throughout this project, we had to work with certain constraints: our client did not have a web developer, hosted his website on Wordpress, and had a low budget to execute the redesign. I had many ideas for this project, but I constantly had to ask myself if this fits within the scope. Documenting our scope, goals, and feature prioritization reminded me of our focus and kept me in track. In the end, I redesigned the information hierarchy and created an intuitive foundation for the client to build on.

Next Steps

  • A function to create an account with a login feature to build more credibility

  • Upload attachment to account feature for resumés and cover letters

  • Gallery with high quality photos for more evidence of the program