How to write a UX concept page — A practical example
The speed and success of your project rely heavily on effective UX documentation. Boring, you say? Pish posh! A properly documented design is a design challenge in itself. Each time you face the challenges of documenting your design, you will become a better designer — you can be sure of it.
A concept page is a document that you use to explain your design in detail to your team, and to yourself. A concept page must be tailored to its audience:
- Producers / Product managers need the concept page in order to understand the business impact the concept can have on the product, and also to break it down into stories for the engineering team
- Engineers need the concept page in order to understand what the user flow should be like, and which information should be shown at which stage.
- Artists (if your company has UI designers) need the concept page to understand what the layout should be like and how to reconcile your concept with their design system
- You, yourself, need the concept page to document the design in detail so that you can see if your design solves the problem before you, and if you have covered corner cases. It also has a learning mechanism:
You use your UX documentation to inform decisions for future projects. It is your best source of information on what was done right so you can replicate that, helping you improve your design process in the long run. (konceptapp.com)
The concept page should be usable and understandable for everyone in your company, because it will be the go-to piece of reference to evaluate and build your design.
The concept page gets a lot of traffic by a lot of different people. It must therefore be easy for your team to read and navigate the document. It must also always be up-to-date.
Let’s break it down:
Why are we doing this?
It’s important for anyone to always know why the concept page exists.
- In simple words, describe the problem your design solves and why its important for the users you are trying to reach.
- Show your market research findings and your competitor benchmarking. What is your concept based on?
- Explain what kind of impact your designs will have on the product, preferrably through measurable KPI’s. This should also incorporate any potential risks you see with your design, and also how you could mitigate those as much as possible.
A decision log
No matter how well you prepare and present your initial design to the team, it can never address all possible issues that arise during production.
In fact, the questions that come up while building a design will help to strengthen your concept and make it better.
The Decision Log is a great place to keep track of all questions, answers and decisions that come up as the project evolves.
Initially, the production team will use your wireframes and design notes to understand the design. However, fairly soon, the Decision Log becomes vital to track important changes and clarifications to the concept.
Important: if the decision log has an entry that changes your wireframe or design notes, you need to reflect that in the actual wireframe and design notes further down on the page too, otherwise your decision log will be more up to date than your actual concept.
The decision log should have the date of the decision, and the names of those involved.
Wireframes
As a UX designer, wireframes and prototypes are some of the most effective deliverables to explain a design, and therefore serve as a center point for your concept page
Design notes
Design notes give supplementary information to the wireframes. These notes can specify:
- Specific behavior and layouts tied to certain user states / conditions.
- Animations
- Other aspects that are important, but that you might not be able to show in a wireframe or even in a clickable prototype, if you have one.
Place them under the wireframes for your audience to easily connect the two.
Content / Copytext
If you have a dedicated text-creation team for your product, the concept page is a good place to have your colleagues directly write the content. They’ll need editing rights.
This makes things easy for the production team, as the copytext part of the concept page is directly below the wireframes they refer to.
Configuration
Your engineers can add to the concept page by defining any configuration they want to implement to your designs.
Tracking
Product Analysts might also want to use this space to define the different tracking calls they would want to attach, to better understand how users interact with the design.
Links
As part of your research for your design, you may also want to include any of the following:
- Competitor benchmarks
- User Experience Research you or your team has conducted on your designs
- Market research
- Heuristic evaluations that apply to your concept
This creates a repository of information that you and your team can refer to during production if doubts, questions or concerns arise. Competitor benchmarking also works well to communicate what the design should look and feel like in the end.
In summary
UX Designers communicate their design in both oral and written ways.
A concept page is a great supplement to your verbal communication. It’s an up-do-date, written document that works as a reference point to anyone in the company for understanding the specifics and motivations of your design.
It’s meticulous work to keep it up-to date. The payoff, however, is that everyone concerned with your designs — including yourself — will have an easy-to-use reference point for your concepts.
A concept page helps your team avoid misunderstandings and misconceptions about the design, it helps set expectations, and it creates transparency for everyone involved in building your product.
Thanks for reading!
