The Experience Foundations team recently updated our guidance on forms in our Experience Library.
Originally, this piece of work was about making sure we included all the components we knew our community needed. But as we got further into the research, we found our community needed guidance on aspects we hadn’t considered.
In the Co-op Customer Products team, we value having the autonomy to be flexible and divert from a plan when we need to. So, with the aim of meeting newly-discovered user needs, we pivoted our work.
A recap: the importance of familiarity in design
Co-op has many business areas and many products and services within them. In most, there’ll be at least one form that, for example, asks a customer for personal details to register for something, or asks for a customer’s payment details so they can buy something. Although our business areas are diverse, it’s important that all of them use a common design language to create familiarity. This means that interactions work in the same way in each service and each one feels like it belongs to Co-op. This helps us build trust with our users.
Starting with research
As always, we started with research. This involved one-to-one conversations with colleagues from a wide range of teams and disciplines to better understand their needs. The conversations helped shape our focus and we ended up with a list of form components that our community needed. Our goal was to design, build and release these components into the Experience Library.
New information = new direction
However, during the conversations, a new theme emerged around the structure and layout of forms.
Although our original research didn’t highlight this as an area of need, feedback from newer members of the community made it clear that this was important but there was ambiguity.
Some of the questions they asked included:
- What spacing should I use between field sets, labels and buttons?
- Is it better to use single or double columns for laying out forms?
- Where should I position buttons?
- How should I show optional or required fields?
We realised our community needed more than form components and guidance on when and how to use forms – it needed guidance on designing single or multi-page forms from the ground up.
Getting a deeper understanding of the problem
The outcome we were aiming for was for all design colleagues to be comfortable and confident setting up forms for the products and services they look after. So we needed to understand the practices that already existed, and also what change was needed.
Here are 4 things we did to deepen our understanding.
1. Carried out user research
We facilitated conversations with newer members of the design community. We asked questions like:
- When designing a form, what did you feel unsure about?
- What guidance did you expect to find in the Experience Library for designing a form?
- Is there anything else you feel would have helped you in designing a form?
These open questions helped us understand which areas needed clear guidance.
2. Reviewed Co-op forms
When we started the forms work, we reviewed forms across Co-op products and services. We went back to the analysis we did but this time we focused on layout and structure and therefore the usability rather than individual components.
This helped identify variations in form design across Co-op.
3. Analysed other design systems
We looked at the guidance other design systems had on form design. An important take-away was how some design systems used visuals to explain guidance.
4. Revisited best practice
We revisited forms specialists Caroline Jarrett and Adam Silver’s work on forms and considered how it applies to our form design at Co-op.
Designing the ‘Form design’ page
Content designers and interaction designers worked together to define the topics that our guidance should cover. We had some difficult conversations to help us understand different takes on the same topic and often challenged each other’s view. Referring back to the insights allowed the team to have those difficult conversations. We reflected on different perspectives and continually iterated on the content. Through this process we were able to define our stance on things like button positioning. Once we were aligned, we added detail and referenced the insights we’d found in the research.
We also found the need to visualise some of our guidance. For this, we defined a visual language that can be used on diagrams in the future.
We shared early versions of the page with people from the Design, Product and Engineering communities to review. We value different perspectives, and want others to contribute to our work. By designing in the open, our community sees our approach, which helps build trust. Showing them the depth of our process encourages buy-in and the early feedback in the reviews was positive.
A ‘people-first’ design system
Our new Form design page wouldn’t exist without the feedback from our community. We designed it for them, based on conversations we had with them. Delivering guidance that meets their needs shows that we’re listening, we’re collaborative and this builds trust with our colleagues. Our work is less about a page in a design system, and more about the people that use it. We’ll keep listening and iterate when we need to. Like the rest of the Experience Library, this page will evolve with our community’s needs.
Imran Afzal, Lead Designer
