Back

CMU CS Academy Splash

Spring 2020, the UX Design Team at CMU CS Academy started working on redesigning the color system and style of the website. Because of the low contrast of the previous colors, the site needed a new set of colors with high contrast and distinct hues to assist students and teachers with visual impairments. Further, the interface did not have a cohesive voice or style. We set out to better unify the website’s experience and design how we would expose new users to our company’s unique personality.The first interface we began designing to reinvent the color system and the style was the splash page and other related sign up/login interfaces. To see the live website and design visit: https://academy.cs.cmu.edu/splash

Tools + Skills

Figma, Illustration

Duration

Splash: 10 weeks, February - April 2020

Login: 3 weeks, April 2020

Team

Splash: Monica Chang, Se Eun Park, V Shiau

Login: Monica Chang

Team Role

Curate and assemble (visual and written) content, content flow, layout design

Goal

Revise existing docs page to be more readable and design mobile docs experience

Process

Research, ideate, design, iterate, polish

Read More

Overview of all section styles and layout styles for desktop

Select section of screens from splash page including the above the fold, a section about the curricula, platform features for students and teachers, how the course content works, example student projects, and program values.

Overview of login and password flow for desktop

Selection of steps for the sign up and login process including account creation, password validation, and forgot your password experience.

Illustrations for splash page and related pages

Process

We started by brainstorming the content we wanted to include on the splash page. We considered what kinds of information our users, specifically teachers, school administrators, and students, wanted to see and know once they visited the site. We also reviewed the old splash page to better understand what information we were currently offering and the gaps in that information. After talking to the project manager to get her input and vision of the splash page content, we narrowed it down to six broad content categories: basic information, hooks that “make a statement”, humanizing CS Academy, showing credibility, explaining the logistics of using our product, and how our platform is engaging and creative. We decided that some of these content categories needed more space on the splash than others. For example, “showing credibility” came a lot through being affiliated with Carnegie Mellon University, so we did not need to focus on it as much.

With general content categories brainstormed, we worked on possible flows to help organize the content.

Splash page content and content flows ideation

After settling on a content stucture, we began to visualize what individual pieces of the page would look like. We paid close attention to content and wording during these iterations. Next, we roughly assembled these individual pieces into the order of our flow plan. From there, we were prepared to begin to add color and more deliberate styling to the page to better reflect the CMU CS Academy voice.

Before stylizing, we put together a list of words that helped us all understand our company: playful, professional, inclusive, engaging, confident

Style iterations for the splash page

After style, we worked on finalizing colors. We had experimented with color before formally working on the splash page so we had some sort of direction to go in. We were also drawn towards purple or blue as a main color since they had been the main colors used on the site in the past. To compare colors, we added them to the stylized splash page layouts. We intentionally decided to work on colors last so we could compare them in the context of the page’s content.

Selection or color palette exploration

To finish up the splash page we made various icons and illustrations to match our new colors and style. These gave the page a friendlier feel which we thought fit well with the playfulness of CS Academy. After finishing up the splash page, we began to build out styled components for other related pages, such as the login and sign up pages. To make the login and sign up experience more integrated with the newly styalized and colored splash page, we decided to make them modals. We also applied our new color scheme to the various buttons and input boxes. Finally, we updated the tabbing strucutre for the different account types and made the account descriptions more readable.

Illustration Process

I began illustrating for CS Academy during the fall 2019 semester. Every year, the design team comes up with a few new sticker and shirt designs to bring to conferences and give to staff. These were the first CS Academy illustrations to be used in our "swag".

During the spring 2020 semester, we decided to add illustrations to our splash page to add some excitement. We applied similar key words (playful, inclusive, engaging) to the illustrations which we had used to inspire the splash page.

I experimented with style to get a better sense of what fit the company best. The team decided on hand drawn illustrations because they felt more natural and "playful".

From there, I began to experiment more with the composition of each illustration as well as the colors used. We had developed a color system for the website by this point and we were working on developing a smaller, more limited color scheme for the illustrations. Through many iterations, we settled on a certain style and color system for all illustrations.

© 2021 Janet Peng. All Rights Reserved. Designed with Webflow.