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.
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.