ActiveState

A redesign of the Canadian open-source company's website, user platform, and brand guidelines.

Client

ActiveState

Role

UI Designer
Branding

Year

2020

The project overview

ActiveState is a Canadian based software company that offers development tools for various programming languages. In 2020, I was commissioned to redesign and refine the branding and interface of the ActiveState brand and website.

The current Active State site was requiring a redesign in order to improve the typography, illustrations, and strengthen the overall brand and identification of Active State as a company.

Goals

1. Enhance usability and strengthen the Active State brand through the visual design of the consumer facing site and the Active State platform.

2. Create an easily accessible and sharable style guide for internal purposes and cross team collaboration.

Considerations

  • The ActiveState site and platform is primarily accessed by an existing audience of developers and tech-related professional users.
  • The original design had many inconsistencies  across pages—making for a disconnected user experience.
  • There were some established brand guidelines that the company requested to remain the same, such as colors and the logo—so I worked within these parameters.
  • Although primarily a user interface update, there was leniency from the UX Director for suggested improvements to the user experience.

Solutions

An heuristic evaluation of the original site and platform designs offered insight into some existing user issues and areas of improvement. I primarily focused on creating visual consistency across the ActiveState site and between the site and the ActiveState user platform. Iconography and illustrations were also updated to be uniform in design. Typography and button styles were branded and streamlined across the site.

In terms of the user experience, the navigation was updated from the previous drop down styling to a 'mega-menu' in order to accommodate and provide an immediate overview of all the necessary Active State content.

Brand Guidelines

Brand guidelines were provided in the form of a designed google document in order to provide easy access and sharing across various teams.

Platform Logos
For visual consistency, the platform icons were made grey scale.

Illustrations
Illustrations were branded to be variations of the ActiveState blue.

Iconography
Icons for 'downloading' were made to be the blue link brand color.

Website Redesign

The redesign of the website included the ActiveState landing page site and the ActiveState platform.


UX components

For development, I provided the state changes for buttons and all interactive elements on the site.



Learnings and next steps

  • The ActiveState team and UX Director have begun to implement the designs.
  • The brand guidelines are used between the design and marketing teams in order to maintain cohesion.

 

Next Project  →

Using Format