Jan 2015   -   Feb 2018

Ubergrad

Services

  • Ideation
  • User Experience
  • User Interface
  • Detailed Style Guide

Introduction

Ubergrad is a networking platform that connects students, universities, and companies involved in overseas education. Expert advisors answer questions and guide students through the process of studying abroad. It’s divided into two sections, one for the students and the second one for the universities.

My journey with Ubergrad began in late 2014 with the University Section and after the successful collaboration; I was given the responsibility to handle the entire project.

University Section - 2014

The University Section allows universities to interact with potential students. Each university on Ubergrad can add information about their campus, create new courses, view, and bookmark students’ profiles, start campaigns and contact students directly.

The
Challenge

The Challenge

For this section, the client had predefined user flows, but the user experience for the entire section was very poor. It was just giving the idea about the contents. The whole section consisted of complicated forms, tables, and graphs.

The task for me was to redefine the User Experience and develop a Design Language that was: aesthetically pleasing, and covered all the complex components of the site and was easily scalable for all devices, i.e. desktop, mobiles, and tablets. Another difficult factor that I had to keep in mind was that the app had to be designed in such a way that different universities could rebrand it according to their logo and color scheme.

Some of the wire-frames provided by the client
Wirefarmes from the client

Kick off

After brainstorming with the co-founder, and equipped with all the necessary information. I started working on the dashboard, the first page where university managers land.



Although the given wireframes had all the features and contents laid out, it was as if they were scattered, and placed randomly.

The first job was to rearrange all the contents, improving the on-screen user experience, all with visual balance and usability in mind.

I then moved onto defining the Visual Language, I carefully picked the colors, keeping the target audience in mind, I had to make sure the colors were neither too distracting nor too dull for the users, and work well with the complicated graphs, charts, and tables.

Newly explored design with improved user experience
Dashboard design

White cards with a slightly darker background and appropriate negative space were used for better visual distinction between the sections.

Dashboard design

A couple of more screens to show all the building blocks in action.

Forms and tables were carefully rethought and designed to be easily adaptable on the both; desktop and mobile screens.

Dashboard designs For Different Screens

Student Section - 2016

The Student Section allows students to learn all about studying abroad along with some other perks. It also allows students to get help from consultants, find universities that match with their profile and preferences, connect with other students and get university recommendations through Ubergrad’s specially designed algorithm.

The
Challenge

The Challenge

User Experience

For this section, the client had neither predefined user flows nor the user experience ready, so we had to build this section from scratch. The first challenge was to come up with easier user flows and more intuitive user experience; while keeping all the functionalities and user needs in mind.

I had numerous brainstorming sessions with the founders to understand the functionalities of this section better. For this section, we shipped a total of three versions, learning something valuable from the previous version each time and improving the user experience for the newer version.


User Interface

At this point, the University Section was already 1.5 years old and although the client was happy with the previous Design Language; I proposed to redefine the entire section's Design Language to something more up to date, elegant and lightweight.

I kicked off with the Dashboard. It's a place where students get a glimpse of their scores, the universities they applied to, their preferences and also information regarding certain vendors.

Some of the wire-frames provided by the client

I kicked off with the Dashboard. It's a place where students get a glimpse of their scores, the universities they applied to, their preferences and also information regarding certain vendors.

A brand new Visual Language was introduced that was up to date and light weight. To bring the distinction between the contents, I used a slightly darker background and white cards on it with appropriate negative space among them. I also carefully crafted a brand new icon set to match well with the newly explored visual language.

Student Dashboard Design

Ubergrad has an algorithm that gives students university recommendations based on the information provided by students. However, to get recommendations, students had to complete their profiles and set their preferences on the app.



In the initial version, it wasn’t a prerequisite for the students to complete their profiles which brought forth a problem. The students were leaving their information forms unfilled. So to tackle this problem, in the second version we introduced a wizard for students who were signing in for the first time.

Below is the failed version of the Student Profile. Students were leaving their information forms unfilled. There was a lot back & forth between pages to view the completed profile.

User flows were redefined to improve the user experience. Adding a wizard meant getting important (student) information at the beginning, resulting in students getting university recommendations from Ubergrad.

Student Profile Userflow

We designed a wizard to get needed information in first hand. This way, the student has to add information at the very beginning, which ultimately improves their experience because they’ll be getting university recommendations from Ubergrad.

Profile Summary

The students land on this page when they’ve taken or skipped the wizard after sign up. If the wizard was skipped, the cards would be empty, and the user has to fill out their information by clicking the “Add” button. If the wizard was taken then, that information is displayed on the cards, with the options to edit, delete or add more details.

This page had two main challenges. First, the design had to make somehow students fill out the necessary information in the beginning so that they could get Ubergrad’s university recommendations.



The second challenge presented, if the students did not fill out their information at the beginning, then the User Experience had to be intuitive enough to let the students add their information easily, anytime and without any hassle. As you can see below, both these problems were solved through design.

Student Profile summary

Recommendations

The students can see all their university recommendations on this page. They can even request to get new recommendations if they’ve updated the information on their profile or edited their preferences.

The challenge for this page was to fit all the extensive data in lists, without overcrowding it or compromising the readability. I worked on many versions for this to get to the right one, which is displayed below.

Student Recommendations

I created a detailed style guide as I progressed with the design to ensure the consistency all across the board.

Style Guide

Marketing Section - 2017

These are the public pages that the student can see even before logging in. They have all sorts of information about Ubergrad. I designed these at the very end, and by this time, I had the advantage of knowing the product inside out – which helped me a great deal while I was figuring out the right UX for these pages.

The
Challenge

The Challenge

We brought in a talented illustrator Budi Harto Tarnim onboard, who collaborated with us to come up with the right color camp, beautiful illustrations, and meaningful iconography.


The landing pages were more colorful than the rest of the design, which was a conscious decision made to capture the user’s interest. Each color was picked very carefully, making sure that the content was still easy on the eyes. Take a look at these pages below.

Main Landing Page

Each page is given a distinctive soft color, hoping that it would help users understand which area they are at. Also, icons and illustrations were designed in colors respective to pages.

University Page
Community Page

Although there were many complicated forms, charts, and data tables, all of the designs were done with responsiveness in mind, this is why, with the slight UX adjustments and changes, I was easily able to pull responsive version off.

Yconference
Yconference
Yconference
Yconference

Great attention to detail and patience along with excellent design skills makes me highly recommend Zulal. We worked on Ubergrad system which had a lot of complicated dashboards and lots of data points.

Zulal was able to make it very user friendly while maintaining an awesome visual appeal. My clients are loving it. Highly recommended.