Ux-Ui and Web Design
VCC Learning Centre
User Personas, User Flow, Site Map, High-Fidelity Mockups for website redesign
Studio Nuvo Team
Team Leader: Alina Demidova
Team Members: Emilie St. Pierre, Taylor Krulicki, Pahul Singh, Knowledge Majoni, Andrew Balce
Vancouver Community College has a Learning Centre that provides a large number of services, including tutoring, workshops, help for ESL students and numerous resources.
The Learning Centre website was created a while ago. The website contradicts the latest VCC brand guidelines, looks too busy and needs redesign to help the students quickly book appointments and find the right information.
1. Find out and analyze the main pain points of the current website users by means of survey.
2. Create a design of a user-oriented website for the Learning Centre.
3. Introduce a clear hierarchy with a visible call-to action: an invitation to make an appointment with the Learning Centre.
My role in the project: team leader, analysis and ideation, creating and conducting the survey along with Emilie St. Pierre, participation in all stages of design, planning and preparing the user flow.
My team has started with research and analyzing statistical information received from the Learning Centre website. The analytical information has revealed that only 12.5% of new visitors returned to the site in 2019. The bounce rate among new visitors was 75.16% (vs. 67.88% among returning visitors), which was alarming.
A series of user journeys conducted by the team revealed the main pain points, including wordiness of the website and the lack of hierarchy. The most popular characteristic was “confusing”.
Problem Definition and Needs
The survey results have shown that a greater part of respondents use the Learning Centre as a quiet place to study, in addition to tutoring, printing services and computers. Over 40% of our respondents were ESL students.
The survey results have indicated that ESL students were not the only group using the Learning Centre and experiencing difficulties. This means that in addition to a visible call to action asked by the client, the design should be clean and meet the needs of both types of main users (ESL students and English native speakers). The landing page should clearly list all popular services and let any user quickly find the right information.
The team has created two user personas for the primary and the secondary category of our main users.
The Primary Persona is an ESL student looking for tutoring. Based on the survey results, this is the main category of users who found the website “wordy” and “confusing”.
The Secondary Persona is an English native speaker looking for additional resources provided by the Learning Centre.
- Defining key features: I identified the key features and functionalities required to support the users’ goals and objectives, as identified in the Problem Definition.
- Creating the user flow diagram: Using flowchart and wireframe tools, I created visual representations of the steps users would take to accomplish their main goal: quickly making an appointment with the Learning Centre.
- Testing and iterating: I tested the user flow with a group of target users to identify any pain points or areas for improvement. Based on the feedback, I made revisions and continued testing until the flow was optimized for the user’s needs.
- Finalizing and implementation: I finalized the user flow diagrams incorporating the changes made during testing, and worked with the design teams to implement them into the wireframes.
Maria DaRosa is an ESL student who takes a Hospitality course at VCC. She is struggling with English and needs to book her first appointment with a tutor who would help her make a written task for homework.
The Site Map shows the main categories of pages covering the most important services offered by the Learning Centre.
The areas highlighted with a dotted line indicate the pages accessible to tutors or requiring a user password.
Style Guide and Corporate Colours
The Style Guide created by the team is based on the current design system used by Vancouver Community College.
A link to the Prototype: https://xd.adobe.com/view/3bbb7d21-249d-4638-7e2c-41bf12514f2a-4d8a/