Uniconnect: Responsive Website UX Case Study

My Role:

This project was part of my Google UX course. So I have worked throughout the design thinking process.

Responsibilities:

Conducting research interviews & usability tests, generating insights, iterating on feedback, developing user personas, wireframing, prototyping & branding.

Project Duration:

1 Month

Users Interviewed:

3 people were interviewed for preliminary research to develop personas & understanding needs & 5 persons were involved with usability testing for feedback.

The Brief

The Brief was to develop a solution, a tool, or a method to help college applicants and simplify their way into College.

About Product

Uniconnect is a responsive web app that helps new college applicants simplify & streamline their college application process and connects them with the existing cohort of universities & programs they are applying to for a small consultation fee.

Understanding the Problem

To understand user needs and frustrations, I conducted an online survey with over 30 participants. The objective was to understand what users value most when applying to colleges and what influences their college decisions, and to uncover the most common frustrations & challenges involved in the college application process.

Survey findings

“Sugarcoated reviews,” the participants said, was the most common frustration when making a college decision.

Based on the survey results I created Affinity Maps to find out common themes and patterns to generate insights into the real user problems.

Affinity Maps to uncover different problems

Based on the Affinity Map, I decided that my design solution will only focus on the Top Three pain points

What I Understood about the Users & their problems

So based on this small online research and after interviewing 3 participants in person, 1 male and 2 Females respectively, who were applying to different university courses in India, I went ahead to develop User Personas.

User Personas

Competitive Audit

I also checked with other websites that have slightly different product offerings but serve a similar user base i.e college applicants. Some of these websites help applicants compare more than 2 colleges based on different parameters and have a few similar functionalities

Starting the Design

Based on my understanding of the users and their needs and frustrations, I decided that my solution would focus on the three key problem areas mentioned above. I decided to design a responsive website over a native phone application since most of the users (college applicants) will only use the app for a relatively short period of time.

To start the ideation phase, I list down priority functions the website should provide and started developing the information architecture of how pages were going to be linked and be a part of the overall system.

For this project, I have focused on designing the applicant’s side of the interface

Responsive Design

Based on the information architecture, I went ahead with trying different paper wireframes and after a lot of back and forth, came up with my first low-fidelity version of the product for testing. Down below you can see the mobile-first version scaled up to the desktop version of the website.

Similarly, I created low fidelity prototype for the desktop version

Branding

Before moving to high-fidelity designs, I had to come up with a design system, with the main brand identity, typography, and color palette to go along with it. For the logo, I decided to go with a pictorial mark with the initials UC in it and typography that goes along with it.

Usability Testing

After the first versions of my low-fidelity web app, I decided to test with at least five users to gain feedback, insights & to find opportunities for improvement. Participants were asked to follow a set of task prompts and figure out how to go about doing core functions in the main user flow. Feedback was collected in this form & here were some of the Insights generated as a result

Test Insights

Insights collected were prioritized based on their impact on performing core tasks in the main user flow.

Key Insights from Feedback:

Insights related to Navigation & Prototype

  • ‘Ask a student button’ in the hamburger menue of the mobile version felt hidden and harder to navigate
  • The “add application” button wasn’t understood due to missing copy underneath the icon
  • Interactive elements like CTA’s could be bigger & have better emphasis. Pages in the hamburger menue could be accompanied by icons.
Instagram poll to validate whether users really need what the product is offering

Insights related to the Product

  • Instead of paying for every individual student consultation, participants wished that they could have a one off amount to consult with a certain set number of students & alumini
  • When asked if participants would like to pay a small fee in exchange of conveniently connecting with existing cohort at universities, 58% responded with a ‘why not’ & 42% denied saying they wouldn’t like to pay
  • Most of the people who voted ‘yes’ said that they would like to validate their college decisions by talking to students & get better insights into the college, they believed that talking to students would be a helpful resource.

The Final Product

Based on the Insights generated and after a few rounds of Iterations, I came up with the final version of the web app for Desktop and mobile. The design was entering its final stage, and the low-fi wireframes were being replaced by final design assets. You can check out the final prototypes here

👉 Check out the prototype here

Final Thoughts

Making a responsive web app for desktop and mobile was definitely a challenging, arduous task, right from the research to multiple rounds of interviews and iterations, but it was all a learning curve. The main objective was to definitely solve a user problem and put them first. If engineered I hope it can help college applicants navigate their difficult journey into college.

Thank you!

Let’s connect at vaishnavividwans@gmail.com

Have feedback? Get in touch.

Leave a Comment

Your email address will not be published. Required fields are marked *