Visual Identity
Web Design
Prototyping
Custom illustrations
Development on WIX
Computer Science Education Week
2021
Overview
Computer Science Education Week is an annual activity to elevate computer science education at all levels, and advocate for equity in the field.
The old site was not easy to navigate due to the amount of content and repetitive information. CSEdWeek is a community-led effort, thus the visual part was not a priority, and the design was a bit outdated.
Wireframe
Primarily, our task was to rebuild the site structure to a more logical one. While working on a site map we added News, Events, and Search sections to the home page.
After wireframe testing, we removed the unnecessary filtering of resources from one of the inner pages.
Five pillars section
It was essential for the client to keep five pillars: Teach, Inspire, Advocate, Involve, and Celebrate. Each one has its own call-to-actions and inner page. I tried out different solutions to show pillars on home page. One of them was a drop-down list.
In the process of testing we came to the most convenient variant — the accordion, where you can see all five sections, different in color. To access each section, you just hover — no extra clicks.
Design concepts
Based on the visual research, I created several design concepts. Inside our team we chose two to present to the client. One — with a side menu and vivid color scheme, another — with a bit different layout and more subtle colors.
To better organize the content, I suggested using grids and color blocks.
Basically the 2nd version was chosen, but color scheme has become brighter and closer to the 1st concept.
Visual Identity & components
After several iterations, we chose the color scheme and font styles together with the client. To make the design more appealing we stopped on bright, playful colors, and added animation to basic shapes and to the logo on the home screen.
As the client was known before by the abbreviation “CSEdWeek” we decided to keep it in their logo.
Illustrations
I created custom illustrations for inner pages.
Final design
Advocate is a typical inner page. To maintain visual continuity headers on inner pages have similar layout.
The accordion section was a bit tweaked for mobile view.
On About page, I picked a couple of significant statements and made them bigger and sticky on the scroll.
To make it easier to digest big scopes of information, I played with sticky sections, divided the content into smaller blocks, used color differentiation, etc.
On Computer Science Hero page, I stuck the photo of a hero, so while reading you constantly see the person’s image.
Some pages, like this Event page, are linked to the database, so it’s easy to update the content.
Mobile version
While working on a Mobile version, we tried to make the layout suitable for the smaller screen but still keep it playful, engaging, and fully functional.
Outcome
After building the site in WIX editor, desktop, tablet and mobile versions, several rounds of QA, we were happy to launch the live site as planned before the CSEdWeek start in December 2021.
Credits
Michael Mishan
Content, project manager
Olena Martynova
Web designer and WIX developer
Ayal Rosenberg
Technical designer