Web Design

Software Development Life Cycle

AGENCy / Partner

1Password

TOOLS

Figma.
Adobe Illustrator.

PROJECT ROLES

Interactive Design
Design Direction
Visual Identity

Project overview

The 2023 1Password Software Development Life Cycle (SDLC) product launch is a solution that streamlines the management of credentials and infrastructure secrets at all stages of the development life cycle, from coding into production.

The goal of the launch and marketing initiative was for 1Password to become the credential and secrets manager designed for developers, as well as drive customer growth for the organization. The launch also provided the opportunity to promote existing users move over to the latest version, in order to access new features.

SDLC Landing Page Design

Discovery

Research into user growth across developer platforms like GitHub provided insight to the organization that all developers should use a credential manager such as 1Password in their workflows. Persona development and journey mapping was conducted into how a typical developer or DevOps team could utilise 1Password's development features at all life cycle stages, which in turn helped contribute to the storytelling aspect across web design, content outlines and motion graphics.

Working closely with Product Designers and Engineers, we were able to quickly understand nuances with the target audience which resulted in a unique design style being implemented for this user group and discovered a use case to include motion graphics as an effective method to display the complex technical aspects of the new features, in an engaging and straight forward approach.

SDLC User Persona DiscoverySDLC User Persona DiscoverySDLC User Persona DiscoverySDLC User Persona Discovery

Ideation and User Experience Design

Collaborating with Content Design, UX wireframing of the flow, structure and content outline of the web design was produced using a pre-defined Figma Component Library, enabling me to rapidly mock-up hi-fidelity wireframes, in line with 1Password’s branding and helping achieve design direction early on in the project.

I produced visual storyboards with guidance from engineers, for the motion design team to reference, in creating the animated demonstrations of the launch features that would feature throughout the web page and across social channels.

SDLC Authorize SSH connections
with biometrics motion storyboardSDLC Authorize SSH connections
with biometrics motion designSDLC Authorize SSH connections motion storyboardSDLC Authorize SSH connections motion storyboard

Visual Design

Initial feedback on the hi-fidelity mock-ups raised concerns about the use of 1Passwords typical light colour scheme for this specific audience. We discovered it didn’t fit with the persona and competitor research conducted and decided on a dedicated dark theme for the developer audience, but still retaining synergy with core branding. This design choice also directed the styling of the motion graphics elements, which were seamlessly integrated into the new colour scheme.

Typography and accent colours remained consistent with the core branding, while ensuring the dark colour pallette and existing colours passed accessibility testing, with a minimum AA rating pass rate.

SDLC Initial web design concepts

Project Outcomes and Learnings

The marketing launch and feature release received a positive response from the development community with an uptake in user sign ups as well as internally from key project and engineering stakeholders. The project also provided me with key insights into design process improvements when collaborating cross functionally across a large scale organization - mainly streamlining the approval process of accurate design assets, ahead of producing finalised design and motion assets. These learnings helped streamline production time on future multi-functional projects.

SDLC final web design

Thanks for viewing

Car Care of Kensington Responsive Design

Car Care Kensington

Web Design

edelkrone email automation series.

edelkrone Email Series

Email Design

One Trail Gear

One Trail Gear

Ecommerce Design