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
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
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
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
Investigate and Communicate
User Engagement
Envision and Produce
High Level Visual Support
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
Final step:
Testing and Review
Design QA is done, often accompanied by markup visuals
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
Custom Google map
A custom map was designed in keeping with the project's branding and design system
FAQ Accordions expand when clicked
Social links on instructor profiles
Café menu categorized in 3 sections
Thorough
content auditing
and
user testing
were important steps in shaping an
enhanced user experience