Experience
Revamp of uNivUS

UIUX │ branding │ design systems

Background

Designing for college student

uNivUS is an App that aims to bring student closer and provide easy access to services within the National University of Singapore (NUS) campus. The App provides essential features for campus life like  timetable, bus timings, digital ID, canteen crowd level and more.

Over the span of 4 months , I collaborated with Aefy from NUS Information Technology to revamp the user interface and App branding. The goal of the revamp was to improve the user experience of the App and reflect a stronger student identity. The App revamp was launched in June 2021, since then, it has evolved into an essential App that most NUS students use on a daily basis.

TEAM

Jieying (Designer)
Aefy Raib (Project Manager)

ROLE

Interface Design
Branding
Design Systems
App Architecture
User Research

outcome

Refreshed App architecture and user experience

Standardised design system and branding

TIMELINE

Jan - May 2021

Challenge

Extending the role of the college App

uNivUS was built for temperature declaration purpose during the 2019 COVID outbreak. Since then, it's UI has not changed much and several functions are no longer relevant. Student feedback on the App experience was unsatisfactory.

While making improvements to the existing experience, the team also wish to extend uNivUS's role by incorporating several new features to better serve the students.

Key problems

To better approach the project, we analyse the existing user journey to identify some key problems.

We did an app walk through to identify frustrations that we encounter when using the key features. Key problems identified also took student feedbacks on the App experience into consideration.

See key problems ↓

001

Unclear Content Hierarchy

Elements on the page are not presented based on the frequency of use.

Example

Feature sections on the homepage are of the same level of emphasis. There is a low contrast between

Can we restructure the content hierarchy of the homepage based on user goals?

002

Undefined User Journey

Confusing App architecture leads to inconstancy in user journey. Function of certain feature are not intuitive due to disconnection in content between pages.

Example

The Favourites feature is under homepage, but the entry point to edit it's content is through the Discover footer. Footer navigation changes within pages.

Can we design a better site architecture that are scalable for future iterations?

How might we design a delightful, consistent user experience?

003

Design Does Not Speak to The User

Unfamiliar design elements lead to confusion. Information are not presented in the most easily understood way.

Example

Crowd insight for venues are visualised in a table format which is uncommon as compared to other platform's chart representation. E.g Google's visit data.

How might we optimise information design for our target audience? 

004

Inconsistent Elements

Lack of design system and branding result in inconsistent design language across the App.

Example

Feature under the App follows a different set of colour scheme. Buttons and components are different on most pages.

How might we design a scalable design system to ease the development process?

How might we construct a positive App perception through the use of branding? 

Student Feedbacks on Existing APP Experience

design GOAL

All-in-one campus
App for NUS students

How can the App fulfil the needs of students across all levels?

How might we design a delightful, consistent user experience?

How might we build positive App perception through branding? 
process

We conducted focus group discussions & gathered survey responses to understand our target user

To better understand our target audience, we spoke to 3 groups of student volunteers and gathered 100 survey responses. From the responses, We defined 3 user archetypes, and mapped them to their respective jobs-to-be-done.

See user archetypes↓

We identified several on demand features and took them into consideration

Using the user archetypes as a reference, we were able to pinpoint potential features to fulfil the user goal. The identified features matches with the suggestions from the survey.

Feature like calendar, find my lesson venue and campus notification are on higher demand based on the frequency that was suggested by the students. The identified features serve as a reference for future App development.

See response on desired features↓
Aligning with stakeholders

Communicating with respective departments on design system & branding

Since sections within the App were developed by different departments, majority of the work in establishing a design system and branding lies in communicating design concepts to the department in charge.

roadmap

We worked with the engineers and publicity team to craft the product development roadmap

The revamp was set to launch in July before the start of a new semester to meet the expected rise in demand of campus services. A roadmap were structured based on the priority and helped to keep us on track.

Prototyping

Lots of prototyping and user testing of new user journey

A new App architecture were planned out based on the product road map. Scalability of the App architecture was the main concern to accommodate the upcoming features .

outcome

A brand new uNivUS experience for every NUS student

The revamped user experience launched was piloted in June 2020. The revamp featured a new journey for existing core features and with launch of new features like calendar, lesson venue, campus bus timing, resources & notification centre.

See App overview ↓

001

Onboarding on new interface

With a couple of new features, onboarding flow were added before App login to guide students through the changes.

002

Personalised homepage based on usage needs

Personalised user profile and digital ID are now available upon login. User can also customise homepage sections sequence to suit their usage habit.

003

Bus Timing

Addition of bus timing widget showing the bus arrival timing of nearest bus stop based on location.

004

Lesson & Exam Dates Overview

Lesson and exam dates are automatically sync to the App upon login. Avoid missing any lessons by turning on the reminder notification.

005

Resources Library

A collection of essential information for every student. Access information on procedures like hostel registration, orientation camp registration, scholarship opportunities and career opportunities and more under this feature.

design system

Standardised design system & branding

The scalable design system was created to save time, reduces technical debt over time. It solves the problem of inconsistent components and user experience. The system consists of main components and defined typography styles. The design system is never final. It evolves as we go along.


outcome feedback

We received positive student sentiments but there is still room for improvement

The pilot version was tested within 300 students for 1 week before the going live. Result from the follow up survey shows that majority of the students are satisfied over their experience with the app revamp. However not all new features are well received, we learn the experience and take them into consideration for future update launches.
learning

Communication is key when managing multiple stakeholders

The revamp involved multiple stakeholders from different service departments to comply to the new design system. For example, course details under resources require all faculty to provide course information in the same format for consistency purpose. Hence, we had a lot of alignment discussions going on in the background, such as re-defining the course page components.

The revamp of branding has to be align with the branding of NUS as an educational institution. Many discussions were also held to align brand guidelines. Active communication ensure that we gathered expectations for all parties and helped us to to find a middle ground in our design.
next step

Continue to deliver user friendly experience

The team will keep up with product roadmap and constantly monitor user feedback after each version to make improvements to the user experience.

This has been my contribution the uNivUS App

Thank you for reading through! Hope you enjoyed learning about my design process :)

More Case Studies

You may find these case studies interesting too ↓

BackgroundChallengeProcessOutcomeReflection