Introduction
These guidelines cover the templates, components and patterns Phoenix is built from, and how to use them to design new flows: which template fits a given page, how to lay content out consistently, how journeys are structured, and how we handle things like navigation, alerts, cards and lists along the way. They also cover how teams work together while building on Phoenix, since more than one team now designs and builds within it.
The guidelines don't cover OVO's logged out, marketing facing website. That's a separate part of the wider OVO site, built and maintained differently to Phoenix.
Key links
Ways of working
As more teams get involved in building Phoenix, we want to keep things consistent while making it easy for everyone to collaborate along the way.
Here's how that works in practice:
- Teams work on flows using the Phoenix templates and guidelines shared here.
- Along the way, consult with Amelia, Eleri and Luke. Ad hoc calls are a good way to talk things through and get feedback in real time, rather than waiting until a flow feels finished.
- Sign off happens with James.
- Once a flow is agreed, Amelia, Eleri and Luke build it into the Phoenix Claude Design prototype. This has been key to working well with engineers.
- The prototype and the flows become the source of truth for engineers to build from. A flow is ready when it's reflected in the prototype, since that's what keeps design and engineering joined up.
- QA across teams is still being worked out, but the joined up way design and engineering worked on the original Phoenix build worked well, so we'll look to bring some of that approach here too.