top of page

The Student Success Application

A holistic approach to success

CompStudentSuccess.png

Project Details

Project Role: UI Designer

I was hired by Student Success to develop a Style Guide for their organization. Their mission is to support students in achieving success through comprehensive assessments that provide personalized plans and actionable tips. Following their initial launch, they noticed a lack of desired conversions to paid subscriptions. As a result, they requested a complete overhaul of their style, including brand colors, sizing, and fonts.

All Assessments.png

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. 

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.

There was no established style format for large 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

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

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. 

The New Look

​

The Color Palette

I aimed to start with the color palette, choosing either green or blue. These colors symbolize tranquility, and it was essential for the site to convey a stress-free and inviting atmosphere.

Color Palette.png
Color Grid.png

Imagery

I collaborated with a colleague to provide the new cartoon graphics for the website. She designed the images while I established the parameters for the Style Guide. Although we planned to update the larger visuals for the site, we chose to retain some of the older smaller square graphics for the assessment descriptions due to the high volume required 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 recommended that the team create at least two versions of the logo: one for light backgrounds and for dark backgrounds. Additionally, I proposed a third version with more defined wording to ensure users can read a smaller logo. Lastly, I emphasized the need for a consistent padding size around the logo, as there were instances on the site where other elements were overlapping 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 previous icons had accessibility challenges. The distinction between the clicked and unclicked states was a subtle color change that might not be noticeable to all users. I created more distinct icon options for the sidebar and mobile interface.

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.

© 2021 Lilianna Pedroni

bottom of page