The Student Success Application
A holistic approach to success
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.
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.
There were about five different color themes for mobile pages. Made the app feel disjointed.
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.
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.
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 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.
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 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.
.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.