Figma File

Website

Introduction

In college, obtaining contact information with other classmates can be a hassle as students splinter off into separate group chats. There’s also a lack of a singular site that can serve as a consolidated study tool, forcing students to hop around different sites, which can become overwhelming.

Project Background

UTD Nexus is a website developed by ACM Development, and it originally started out as a student-led project for a competition within ACM Projects. I joined the team of originally 4-5 students after Nexus was conceived, and Nexus has been in development for around 3 years. I joined officially as the sole designer, but worked as a front end developer as well alongside other developers.

So What's Nexus?

Easy Grade Management via Grade Calculator

Consolidated Class Notes for Students via “Superdoc”

Quick Class Group Chat Creation via Class Scraping

Nexus is a web app created to give students an easy way to converse and study with their classmates without the hassle of obtaining contact information. It aims to make communication and studying easier for classmates by providing a consolidated platform for study tools.

Discovery

Since I joined the team after Nexus was conceived, that meant there was already a preexisting design, with multiple pages already done. However, after speaking with a few members of my team and a few of my peers, many expressed that the current design was lacking something. A common criticism that came up was that it looked too “same-y” or that it looked like a default template was being used.Original Nexus Screens

These brief talks led me to conclude that Nexus has an identity issue. When it’ll eventually release, it might not have the necessary hooks to actually let students be curious and use all of its features; they might use one or two, get disinterested, and never use it again.After being onboarded to the team, I spoke with my PM and was given free reign and encouraged to completely overhaul the existing design.Interview Quote Samples

Problem Statement

How might I redesign the current Nexus pages to carve a unique identity for it, keeping users’ interests piqued while exploring?

Design Process

Being given the prompt to completely overhaul an existing design will always be incredibly daunting; there’s an infinite number of possibilities you could head in and few that’ll effectively accomplish what you were aiming for.Many people, especially those in non-creative fields, struggle to articulate what they’re thinking of when it comes to designs. Considering everybody in my team were pure developers, it was a challenge to get their thoughts actualized into something tangible. I believe the best way to approach these situations is to sketch as many ideas as possible to get a pulse on what works and what doesn’t.Design Process: ConceptualizingWhile creating my sketches, I saw 2 general paths: stay within the guardrails of the current design or go completely off in another direction.

Here are two conceptual screens I designed that I believe stayed within the same realm of the current design philosophy of Nexus. What I was trying to accomplish was to create more interest in the background while keeping the general UI style the same. The direction I wanted to take Nexus here was to have a minimalist/abstract theme that pushes the original design’s modernistic design into something more intriguing than just a gradient.

The last concept I created was this screen; a much more radically different take on Nexus. What I wanted to accomplish with this design was to create a more casual, friendly, and bubbly tone with lots of playful illustrations. I took lots of inspiration from sites like Duolingo and Discord, as I believe sites like that keep a high retention rate among its users. I wanted to emulate their style of blocky, colorful, and vector-like illustrations as that’s what charms a lot of users into using the product and sticking with it.After presenting the conceptual screens to my team and org, I asked them which do they prefer in an in-house survey, and given 31 responses, an overwhelming majority of 81% (26 responses) preferred the radically different design.

31 Survey Responses - "Which Thematic Do You Prefer?".

Thematic 1

Thematic 2

26 (83.9%) - Design Thematic 1

5 (16.1%) - Design Thematic 2

Taking these responses, it was clear that the direction everybody wanted to go in was to have a much more lively and playful style that’ll set Nexus apart and more memorable.

Design Process: Grade CalculatorThe grade calculator does exactly what it says on the tin plus a little extra: it allows students to see a “what-if” of their class grade based on the grades they put in for different categories such as exams, homeworks, quizzes, etc. The main function of the grade calculator centers around adding categories and assignments within categories. The grade calculator depends on the user entering in the correct information.Looking at the current Grade Calculator page, a few standout flaws immediately jump out: one being that there’s no way to delete a category. And in the same vein, there’s no way to delete a specific assignment.

Original Grade Calculator Screen

I originally sought to fix these issues but as I designed the screen, I began to realize how bloated it was: when a new user enters the grade calculator page, they’re immediately overwhelmed by too many buttons, instructions, and input fields.

After trying to solve the problem of too much information bloating the screen, I opted in for a pop-up tutorial. However, for something that’s as information dense as the grade calculator, having a pop-up might not be very efficient. This is because users easily forget information when it’s just spoon fed to them, leading me to have to explore another option.

The final iteration of the grade calculator uses a step-by-step tutorial that highlights the corresponding feature the tutorial mentions. This helps users retain the information more by actively forcing their attention to the relevant feature.

Design Comparisons - Quickfire

The Superdoc feature allows every student in a course to contribute to a communal notes folder. There were multiple features I wanted to change, such as the Course selection being a folder system with a search bar instead of a dropdown, so users no longer have to strain their eyes looking for the correct course in a compact list.

The Discord servers originally were going to be listed separately, but that idea was scrapped for a much more streamlined option of grouping each class server into their respective schools.

These are just a sample of the actual number of pages I redesigned. I really recommend exploring the website for yourself to see all the subtle animations and illustrations I created to breathe some life into Nexus!

Reflection

With a team of amazing developers and a great support from our organization, we were able to ship a product I’m extremely proud of. I look back on the first stages of the redesign and am always shocked to see how much I’ve grown as a designer, as the Figma file is definitely not up to the standards I hold nowAnd that’s one of the biggest problems I have with how I handled this project; I wish I had learned more about design systems before I dove into working on Nexus. I treated it more as an illustration sheet rather than an actual system that other team members will use. Granted, I was responsible for coding the pages I designed, so it didn’t really matter how messy the Figma file was as long as I knew what I wanted from it. However, this is not the case out in professional projects, and I’m glad I’ve dedicated the time to learning how design systems work in Figma.P.S. If you’re the future designer for Nexus, Good Luck and I’m sorry for the mess of a Figma file...