lit college tour website redesign
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
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.
Competitive & Comparative (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.
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.
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
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.
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.
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.
The logo and home on the top navigation were redundant
'2018 Tour' was vague and confusing
Some of the social icons were unrecognizable
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?
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
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.
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.
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.
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
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.
Twitter feed on homepage was obtrusive
The event calendar image was not noticeable
Users didn't know how to proceed after the confirmation page
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
Users completed the tasks quickly under 1 minute
Users felt the site was credible, describing the site as "professional" and "trustworthy"
Replaced Cities with event calendar
Moved Subscribe To Newsletter and Donate to footer
Moved Twitter feed and added Instagram feed
moved event calendar to top of page
Added popular links to guide user
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.
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.
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