Humber Current Web App Redesign

Web Design • UX/UI Design
Quick Summary
From UX audit to user testing, I teamed up with my classmate to redesign the platform, addressing pain points to cater to both visitors and Humber graduating students, as well as
‍improving the web application’s overall functionality.
About Humber Current
Humber Current serves as a platform for graduating students from Humber College's Faculty of Media and Creative Arts to showcase their work.
Role
UX/UI Designer
Methods
User Flow, Wireframing,
Prototyping, Usability Testing
Tools
Figma, Miro
Timeframe
September to October 2023
Humber Current's Main Visual

The Problem

Only a limited number of students in the Faculty of Media & Creative Art actively contribute their work to the website. How can we show value of this website to the students in the Faculty of Media & Creative Art? How can we redesign Humber Current to create an appealing website with a seamless user experience?

The ultimate impact we are trying to have...

  • To make it easy for final-year design students to showcase their projects on the website, boosting their visibility to potential employers. We also want to enhance the website's visibility to connect more like-minded individuals with these talented students.
  • To design a page that loads quickly, looks more modern and appealing, incorporating clear contrasts, well-organized elements and effective hierarchy.

01

Research

UX Audit
Competitor Research

02

Define

User Persona
Web App Style

03

Ideate

User Flow
Sketch

04

Prototype & Test

Prototype
Usability Testing

Research

01 UX Audit
We conducted a UX audit on the website to assess and identify areas for improvement.
  • Usability and Navigation: The website is not easy to navigate. It contains a lot of unorganized information, which takes users lots of time to find what they want to access.
  • Visual Design: The visual hierarchy on each page lacks clarity and consistency. Buttons and icons vary in size and color, leading to inconsistency. There is insufficient white space on the webpage and the elements are positioned too closely together.
  • Performance: The website takes over 3 minutes to load the content. The homepage's slow loading speed can be frustrating for users and often results in high bounce rates.
Old screens of Humber Current
02 Competitor Research
George Brown College's School of Design - Yes!
Competitor analysis of George Brown
IDEA School of Design
Competitor analysis of IDEA School of Design

Define

01 Identifying the Target Audience
The app mainly has two groups of target audience.
The primary group of users are the current students within the Faculty of Media & Creative Art, students about to graduate and graduates who wish to showcase their work.
The secondary group of users includes potential recruiters and employers seeking to find new talent for their companies.
We created a user persona to better understand the needs and preferences of our target audience.
User persona of Sarah Morton
Pain Points
  • They don't have time to make industry connections while still at school.
  • They are concerned about how their portfolio can stand out among other design graduates.
Motivations
  • They are eager to showcase their work to a wider audience, potentially including prospective employers.
  • They are motivated to connect with fellow designers, peers and potential mentors within the design community.
02 Defining the Design Goal
We transformed pain points into opportunities and leveraged the strengths of our competitors to define our design goals.
  • Create a sign in/log in page that will allow students to easily create a profile and upload their work whenever they want
  • Create a portal where students can edit and personalize their page on the website
  • Add a search bar to the website for an improved user experience
  • Streamline the interface which allows users to achieve their objectives on the website more quickly
03 Defining the Web App Style
We were not bound to adhere strictly to Humber College's brand guidelines so we had the flexibility to tailor the design to better suit our specific needs and objectives. We opted for muted and natural colors to allow the students' work to stand out on the website.
Moodboard
Humber Current's Moodboard

Ideate

01 Designing the User Flow
The user flow diagram includes 2 user goals.
• Student's goal: As a student, Mary can create an account on Humber Current, login to the portal and upload her work.
• Vistor's goal: As a recruiter, the visitor can locate Mary's portfolio page and message her.
User flow of Humber Current
02 Sketches
These sketches helped us visualize and refine the ideas going into the prototyping phase.
Sketches of Humber Current

Prototype & Test

01 Wireframes
We then translated sketches into wireframes. Whenever we made any design decisions, we prioritized the users' voices observed during user research. It gave us confidence that we executed the user-centered approach across the whole design process.
Mid-Fidelity Prototype of Humber Current
02 Usability Testing
We conducted one round of usability testing with 5 users. The purpose was to validate our proposed design solutions, make adjustments based on user feedback, and measure how well our solutions cater to user needs.
Two of the users to be recent graduates
  • Task 1: Create an account on the website and upload work to your portfolio
  • Purpose of this task: To evaluate user experience of our website in the context of graduating students seeking to showcase their design work.
Three of the users to be potential recruiters
  • Task 2: Locate Mary's portfolio's Page (student of Bachelor of Digital Communications) and contact her
  • Purpose of this task: To evaluate the functionality and user experience of our website in the context of connecting graduating students with prospective recruiters
Usability Testing: Findings
The findings from the user testing helped guide the designs from wireframes to high fidelity prototype.
Task 1 User testing report for Humber Current WebsiteTask 2 User testing report for Humber Current Website

Final Deliverables

Homepage
User Flow of MukkoHumber Current's Revamped Homepage
Program Page
User Flow of MukkoHumber Current's Revamped Program Page
Portfolio Page
User Flow of MukkoHumber Current's Revamped Portfolio Page
Event Page
User Flow of MukkoHumber Current's Revamped Event Page
Sign-Up & Dashboard Page
User Flow of MukkoHumber Current's Revamped Sign-up & Dashboard Page
Try the Interactive Prototype (Desktop)Try the Interactive Prototype (Mobile)

Reflection

In this school project, I learnt that gathering input from our target audience is essential for creating a platform that truly meets their needs. By collecting insights from them, we were able to make informed design decisions that ensured our platform effectively addressed their specific requirements. Additionally, this project allowed me to enhance my understanding of design tools and techniques, especially in Figma.
What would I do this differently?
  • I would conduct additional usability testing and interviews with Humber College students to evaluate whether this website genuinely contributes to an increase in the number of students from the Faculty of Media & Creative Arts sharing their work.

Next project

The Digital Office

 →