SCRATCH WEBSITE REDESIGN
A playful redesign for the Scratch platforms.
YEAR
2023
CATEGORY
Web Design
UI
TOOLS
Figma
POSITION
Designer
RESPONSIBILITIES
Creative Direction Support
UI Support
DESIGN DIRECTION
Becky Still
SENIOR DESIGNER
Will Halcomb
CLIENT
Scratch
This work was done while on co-op at Radish Lab on their Design team.
Scratch is a platform that allows young people to create and share interactive stories, games, and animations using block-based coding. Radish Lab was tasked with integrating the Scratch, Scratch Foundation, and Scratch Jr. platforms and redesigning their website to reflect the brand's playful nature while maintaining its informative, educational aim.
Before & after Radish's redesign.
ACCESSIBILITY AUDIT
My first task for this project was conducting an accessibility audit. I gathered colors and typography from the Scratch, Scratch Jr., and Scratch Foundation sites to ensure color contrast accessibility and AA compliance.
DESIGN RESEARCH
Based on prior client meetings, we prepared three creative concepts for the Scratch team. We landed on 'Imaginative Expression,' which features layered photography, illustrations, and pops of color to engage users.
Concept #1
Concept #2
Concept #3 – Final Choice
CREATIVE DIRECTION
A unique aspect of this project was merging Scratch's three platforms: Scratch, Scratch Jr., and Scratch Foundation. While all under the same domain, each platform needed to stand out due to their differing audiences. Radish proposed allocating distinct colors and assets to match each platform's brand and audience, while maintaining a cohesive overall brand identity.
With this in mind, we developed two unique directions under the 'Imaginative Expression' concept: one with color blocking and one with softer tinted backgrounds. The Scratch team chose the tinted backgrounds but incorporated some color block elements from the other direction.
Direction with color blocking
Direction with softer, tinted backgrounds
Final Creative Direction
UI SUPPORT
Although my co-op ended before the team finished the UI, I assisted during the first few weeks of the process. I helped create and apply the style sheet from the finalized creative direction. I supported the senior designer by attending design checkpoint meetings and performing various tasks such as brainstorming nav bar interactions and making design edits to modules.
Final UI wireframes for Scratch
Final UI wireframes for Scratch Foundation
Final UI wireframes for Scratch Jr