Ux-Ui and Web Design

VCC Learning Centre

Client

Vancouver Community College
The Learning Centre

Deliverables

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

PROBLEM

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.

CHALLENGE

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.

Before

Vancouver Community College Learning Centre web design Alina Demidova

After

Vancouver Community College Learning Centre web design Alina Demidova

Process

Discover

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.

User Personas

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.

Primary Persona

user persona for web design, UX-UI design

Secondary Persona

user persona for web design, UX-UI design

User Flow

When creating the user flow, I followed the process below:
  1. Defining key features: I identified the key features and functionalities required to support the users’ goals and objectives, as identified in the Problem Definition.
  2. 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.
  3. 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.
  4. 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.
The resulting user flow effectively communicates the user’s journey and helps ensure that the site meets the needs and goals of the target audience.

Legend
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.

User Flow for UX-UI Design for the VCC Learning Centre

Site Map

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.

sitemap, web design, UX-UI design

Style Guide and Corporate Colours

The Style Guide created by the team is based on the current design system used by Vancouver Community College.

UX-UI Design for the VCC Learning Centre
UX-UI Design for the VCC Learning Centre
UX-UI Design for the VCC Learning Centre
UX-UI Design for the VCC Learning Centre
UX-UI Design for the VCC Learning Centre
UX-UI Design for the VCC Learning Centre
UX-UI Design for the VCC Learning Centre
UX-UI Design for the VCC Learning Centre

Prototype

A link to the Prototype: https://xd.adobe.com/view/3bbb7d21-249d-4638-7e2c-41bf12514f2a-4d8a/

Vancouver Community College Learning Centre web design Alina Demidova
Vancouver Community College Learning Centre web design Alina Demidova