import { Meta } from '@storybook/addon-docs';
import { Box } from '../components';

<Meta title="Foundation/Design Principles" />

# Experience Design Principles

<Box childGap={{ base: 'lg', tablet: 'xl', desktop: '2xl'}}>

<Box as="section">

A major factor in evaluating the success of a design organization is the quality of it's output. But what is quality design? While “high quality” engineering can be measured with performance metrics such as uptime, test coverage, and response times, high quality design for the most part is understood through subjective measures rooted in personal preference and taste.

Of course, design solutions can have quantitative performance measures like conversion rates or task completions, but they aren't enough to establish quality before something is chosen for implementation.

To overcome this “I know it when I see it” style of evaluation, the UX team has taken steps to establish a set of principles for ourselves. These principles act as a standard for us to evaluate the quality of our work, replacing subjectivity and gate-keeping, with a shared understanding of what our digital experiences should achieve for our users. Each principle guides us in design decisions; from content and layout to micro-interactions and motion. They help us remain focused on the things that matter for our customers, are differentiating for Palmetto, and result in experiences that help connect people to clean energy .

Like all of our work, we will iterate these principles as our team and company evolve. We welcome any suggestions or feedback.

  </Box>

<Box as="section">

## Purposeful

<Box fontWeight="bold" color="grey-500">
  Intentional, Efficient, Focused, Deliberate, Productive, Minimal, Clear, Simple
</Box>

Our experiences help people achieve their goals quickly, accurately, and with less effort. We want to enable people to see, understand, and act with confidence.

- Consider the whole journey
- Optimize for the most important tasks, while anticipating next steps
- Unnecessary complexity is hidden, but access to advanced features is available if needed

</Box>

<Box as="section">

## Cohesive

<Box fontWeight="bold" color="grey-500">
  Harmonious, Supportive, Honest
</Box>

We instill confidence and strengthen trust by using familiar patterns. We support a diverse audience on a variety of devices, so our experiences are purpose-built, yet maintain a collective visual and behavioral cohesiveness. They adapt to each audience's context, rather than being consistent for consistency's sake.

- Use familiar patterns to make our experiences more intuitive and instill confidence
- Be transparent about what a feature can and can not do
- Safe and positive actions are frictionless; consequential actions are clearly explained
- Avoid reinventing the wheel, rely on familiar conventions when introducing new tasks

</Box>

<Box as="section">

## Human

<Box fontWeight="bold" color="grey-500">
  Approachable, Plain-Spoken, Guiding, Confidence-Inspiring
</Box>

Energy is complicated. Our experiences bring focus to help our audiences know what matters now. We make the complex simple and build empathy with our users by understanding their state of mind to guide them in achieving their goals.

- Help the audience understand what to expect, and demonstrates progress
- People know where they are, where they can go, what happens next, and how they can get back
- Feedback is given to acknowledge actions and results are shown to keep the audience informed
- Weave encouragement and inspiration into the experience, as motivation to proceed or learn more about clean energy

</Box>

<Box as="section">

## Crafted

<Box fontWeight="bold" color="grey-500">
  Beautiful, Elegant, Delightful
</Box>

Our experiences are differentiated by their combination of thoughtful details and small touches. We combine the power of enterprise tools with the simplicity of modern consumer products.

- Celebrate unique milestones and create ownable interactions and visual expressions
- Project our [voice and tone](?path=/story/content-voice-and-tone--page) into the experience
- Always delight people with how effective our experience is, but dial the flair up or down depending on the user's context

</Box>

</Box>
