Live. Love. Ride.

Ready for Impact.

Complete digital identity for Off the Chain, an indoor cycling studio and smoothie bar located in Washington, D.C. This site was built to motivate and inspire. CMS templating was generated for several sections including instructors, smoothies, blog and FAQ. The project also features a custom Google map.

Deliverables

Project Scope
UX Design + Audit
Competitive Analysis
Branding
Content Strategy
Design System
Social Media

As many as

300 different websites

could be integrated into the

new unified platform

As the

design lead

on the project's platform team, I am highly focused on

systems development and platform capabilities

to support front-end users, back-end users, and future users.

As the project has evolved, so has the team structure. Currently, there are three distinct teams. Two are focused on separate, distinct front-end user groups. The third--the Platform Team-- exists not only to support the user groups of the other two teams, but also as a framework for other web applications that are built on it.

Process

Define
Design
Develop
Refine

From the beginning, the client had a clear vision of how the desktop site should look.

To support the vision for the front end, extensive UX work was required including

research and audits

,

user flows

,

wireframes

and

prototyping

Colors

#ffffff
#b4b4b4
#777777
#333333
#cc00cc

Fonts

Raleway

abcdefghijklmnopqrstuvwxyz

abcdefghijklmnopqrstuvwxyz

1234567890!@#$%&*()?

Lato

abcdefghijklmnopqrstuvwxyz

abcdefghijklmnopqrstuvwxyz

1234567890!@#$%&*()?

Contact form directs inquiries to the client's inbox

Always up-to-date:

videos and biography section are updated regularly

Podcast section was added after the site was launched

The new section was designed to fit seamlessly with the existing site, while accommodating its unique graphic branding.

Identify and Analyze

Concepts, Problems and Enhancements

Agile tools such as Jira and Confluence help to organize and support

Sample Context of Use Analysis

Investigate and Communicate

User Engagement

Envision and Produce

High Level Visual Support

preliminary wireframes

Establish Prioritization

Determine User Impact

Identify Resources

At first, design files were generated and shared primarily via Sketch, inVision, and later Adobe® XD.

I conceived of and created a full-scale, interactive digital prototype.

Key Design Principles

  • Follow brand guidelines for visual design
  • Extend brand guidelines for digital design
  • Strong usage of typography and images
  • Employ layout and responsive design

During development, all teams rely heavily on the

digitized prototype

for front-end implementation

‹ ›
HTML, CSS, JavaScript
UI States + Error Handling
Responsiveness
Interactions
Dynamic UX
Motion UI Patterns

Final step:

Testing and Review

Design QA is done, often accompanied by markup visuals

sample design QA markups

CMS was an important part of the project scope

Each page is branded with its own color, and nav elements such as logo and CTA correspondingly change

#ea2b1f
#2bd6e2
#fcd558
#51f929

Custom Google map

A custom map was designed in keeping with the project's branding and design system

Off the Chain's Custom Google map

FAQ Accordions expand when clicked

Social links on instructor profiles

Café menu categorized in 3 sections

Collaboration with third-party software vendor

Zingfit

was important for

identity management

and

spot scheduling

Thorough

content auditing

and

user testing

were important steps in shaping an

enhanced user experience