The Dimensional Design Process — The Second Dimension
As we transition from Dimension One to Dimension Two, we want to carry on segmenting the steps throughout this process while maintaining the balance of UX and UI. In Dimension One, we established our foundation and if you remember our house analogy, it’s now time to create a virtual tour of our home. Think of things like what will the colors of the cabinets, walls, and backsplashes be? What kind of furniture do we want in each room? Let’s get into it.
Step 1: Branding Guide and Visual Strategy
If you use Pinterest, think of a mood board. After we have finalized our structure in Dimension One, our next step is to establish the branding guide. A branding guide or brand standards is essentially a set of rules that explain how your brand works and enables you to ensure it is always consistently presented to the world.
Typically, a product owner’s preference can be difficult to gauge so a mood board is a great exercise you can complete to establish a foundation of what they like or don’t like and how you can apply those insights to the product.
Questionnaire 1 — Design Kickoff Questionnaire
Questionnaire 2 — Values Worksheet
Upon the completion of this process you should find yourself with a clean logo, selection of typography (fonts), and a core color palette with a hex code representing each variation of the color you chose specifically for your brand.
Step 1A: Visual Variations
A common mistake is rolling out the entire visual strategy and not providing variations upfront. No one ever wants to redo 100 screens just to change the primary color, so this sub-step helps us align expectations around the determined color palette and execute what is truly needed.
To avoid rework, we always provide three variations of the branding to be approved for web and/or mobile prior to rolling out.
Step 2: Visual Rollout
Upon final approval, we rollout the visual strategy and complete the high-fidelity mockups of the product. This process is pretty straight forward but the attention to detail, consistency, and uniformity of the aesthetics throughout the product is critical.
Upon completing the rollout, we typically complete a walkthrough to review each design and ensure its presenting the elements in the most effective way while maintaining all branding guide lines.
Step 3: Prototype
Now it comes time to address the UX. By creating a full functioning static prototype, we’re able to replicate the expected user experience and vet out any areas we feel are flawed. You can use tools such as Adobe XD, Invision or Marvel to complete your prototype.
When it comes to the prototype, it’s all about establishing the assumed best flow and utilizing the prototype to complete a series of initial A/B testing. This is to vet those assumptions and avoid this rework from becoming a part of the development cycle.
Conducting tests for the on-boarding process and presentation of the core functionality is always critical. For example, with Shadow Driver, we wanted to ensure a driver could be invited, sign up and complete the initial on boarding process in under 5 minutes. This took some trial and error.
With this initial A/B testing (even with static data), we were able to address several screens that could be optimized to prevent duplicating information or causing confusion to the user. For example, we assumed users would prefer entering personal details, then insurance and driver documents, then vehicle information. But after conducting our tests, we found that personal, vehicle information, then insurance and driver documents lead to a more optimized approach.
In conclusion, the Second Dimension is the final step of design where collaboration between design and development begins to take place. By digging into the UX as much as possible and establishing a clear way to breakdown the assets, you can improve your communication with the development team dramatically. This leads us to The Third Dimension.
