COLORCODE.io

UX | UI | Visual Design  

Redesign of ColorCode.io, a free online code school.

MY ROLE

Working on a brand that is heavily focused on its YouTube and Instagram audience is very exciting! I'm working closely with the founder and software engineer, Sina Jazayeri, to establish a more defined user experience and interactive online code school. ColorCode.io has over 1,000 YouTube subscribers and is emerging more and more as an accessible code school for people around the world via three minute video tutorials. While the site is currently live, my role on the project has just begun in late 2017 to define a better user experience through architectural and visual enhancements. I look forward to improving the user experience site wide using smarter design tools, rapid prototyping, and learning from user insights as new subscribers join every day. 

DESIGN PHASE 2

Working in SKETCH to design artboards for desktop, tablet and mobiles sizes that follow material design guidelines when responding to different screen sizes. The screens below example a new homepage, account login flow, and profile details page. These designs were used as a proof of concept with the client to show the importance, and ease, for using a grid system with defined columns and components.

DESIGNING WITH A GRID SYSTEM

Using a 12-column, 8-px grid and working closely alongside the client ensures our artboard dimensions are setup in a way so that design handover is streamlined and transferable for the developer. 

Design Exploration

Homepage.png

NEXT STEPS

  • Define the user journey for creating/signing into an account and what that customized dashboard looks like
  • Assign text styles across the site for a cohesive look and feel and vertical rhythm
  • Analyze Google Analytics to design alternative pages with a content hierarchy defined by user behaviors and insights
  • Establish user goals for the homepage, user account login experience from Google or Facebook, account dashboard design, etc
  • Create a style guide and design system to easily repurpose assets and UI elements within SKETCH
  • User test and conduct surveys through Instagram Polls

In collaboration with:

  • Founder & Software Engineer, Sina Jazayeri
  • Software Engineer, Khaled Mohammed