top of page

The Student Success Application

A holistic approach to success

CompStudentSuccess.png

Project Details

Project Role: UI Designer

I was brought on by Student Success to create a Style Guide for their company. The company aims to help students succeed by having them take detailed assessments that give the student personalized plans and practical tips to help them achieve their goals. They launched their website in March of 2020, however, they were not getting the conversion to paid subscriptions that they wanted. They asked for a complete style change from brand colors to sizing and fonts. 

All Assessments.png

Challenge

The company colors and page layouts were a bit incoheasive. No grid, different styles of imagery, and their brand logo was a rainbow, so no clear color palette. The result left users feeling jumbled, unsure what to do on screen with no lasting impression of the site. I wanted to make sure that the company's purpose and attributes shined through in the new design and create a web presence with a more targeted focus. 

Company Research

 After a couple of calls with the CEO we hashed out the top words that best described them.

"Empowering, stress-free, welcoming and purposeful"

These words would dictate my design decisions and gave myself a starting off point for the new look. 

Reviewing the materials

Next I needed to look over the site and mobile application that they already had in place. I wanted to see what was working and what needed modification. 

Screen Shot 2020-12-07 at 3.08.55 PM.png

Different style CTA buttons, confusing for user.

Non-accessible text, too difficult to read. Does not pass WCAG standards

Screen Shot 2020-12-07 at 3.09.28 PM.png

Logo too small, difficult to read.

No style format for big blocks of text.

Screen Shot 2020-12-07 at 3.09.16 PM.png

No grid for an evenly spaced layout, also no headers.

Mobile Application

The mobile application had not launched yet and was mostly still in wireframes. However there were a few high fidelity pages completed.

Screen Shot 2021-01-03 at 11.30.07 AM.pn
Home-day.png

Clicked state difficult to differenciate between unclicked state. 

Different color CTA button

I liked this design with different flowing tones and wanted to incorporate it into the new style. 

There were about five different color themes for mobile pages. Made the app feel disjointed.

The New Look

The Color Palette

The first section I wanted to tackle was the color palette. I wanted either a green or blue palette because those colors represent tranquillity and it was important that the site felt stress free and welcoming.

Color Palette.png
Color Grid.png

Imagery

I paired up with another employee to deliver the new cartoon graphics for the site. She created the images and I set up the parameters for the Style Guide. The larger imagery would all change for the site, however, we decided to keep some of the old smaller square graphics for the assessment descriptions since there were so many needed for each specific assessment. 

Imagery.png

The Logo

The original logo design the company created had issues with accessibility. 

GROWTH.png

Words too difficult to read and losing detail in the outer rainbow. 

I suggested that the team make a minimum of two versions, one they could use for light backgrounds and one for dark.  I also suggested a third where the wording was more defined so users could read a smaller version of the logo. Finally, the logo needed a set padding size, because there were times on the site where other elements were obstructing it.  

Logo.png

Typography

Text (Website).png
Text (mobile).png

Personality

Principles.png

The Layout

Page layouts are crucial in creating a cohesive feel throughout the site. Users recognize patterns and the more a site feels familiar the more relaxed people will feel using it. I delivered the modified layouts but the examples include the old versions of the screens until they update.   

Grid (Website).png
Grid (mobile).png

Components

The old icons had some issues with accessibility. The difference between click and unclicked states was a minor color change that wouldn't be recognizable to all users. I designed clearer icon options for their sidebar and mobile iconography. 

Iconography.png
UI Elements (website).png

 Design in Action

The feedback from the company was exceedingly positive. They agreed that the new look gave a more refined feel and made the objectives more clear on each page. The branding reflects their company attitudes and is more memorable to its users.  They were also thrilled to have a space to refer back to for future iterations as they continue to build out their mobile application and update their website. 

Homepage.png

Takeaways

I learned a lot from this project and enjoyed collaborating with other designers to create this style guide. I had to be flexible and very time conscious to complete everything smoothly. Overall, I'm really pleased with how it turned out and look forward to another project that includes a total UI overhaul. At this time, I don't have any metrics on the new design since the company is still implementing these changes. I can say I've been told from the few users who have been shown, the company goals are much clearer and more defined.

bottom of page