The Student Success Application
A holistic approach to success
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.
Challenge
The company's colors and page layouts were inconsistent, lacking a unified grid system, featuring diverse imagery styles, and using a rainbow logo without a defined color palette. This created a confusing user experience, leaving visitors unsure of their actions and without a lasting impression of the site. My objective was to ensure that the company’s purpose and attributes were clearly reflected in the new design, establishing a more cohesive and impactful web presence.
Company Research
After a couple of calls with the CEO we identified the core values that best described the company:
"Empowering, stress-free, welcoming and purposeful"
These key attributes guided my design decisions and provided a foundation for creating the new visual identity.
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.
Different style CTA buttons, confusing for user.
Non-accessible text, too difficult to read. Does not pass WCAG standards
Logo too small, difficult to read.
There was no established style format for large blocks of text.
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.
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.
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.
The Logo
The original logo design the company created had issues with accessibility.
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.
Typography
.png)
.png)
Personality
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.
.png)
.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.
.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.
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.