I began this interactive form design project with the idea that users interacting with the form would likely vary across a range of different user types, so the design needed to be very organized, simple and provide clear hierarchical guidelines. I first worked to achieve these goals through consistent color choices, typography, and organized grouping of similar content.
Regarding the desktop form version, I chose to keep all elements within one presentation because this offered the user the easiest way to understand and engage without confusion. This was achievable by employing responsive enabling, whereas the user makes a selection (yes or no in this example) and is then presented with additional steps to complete. This method also offers users a better experience regardless of their selection.
The mobile layout followed a similar layout and design principles style as the desktop version. It also relied on the responsive enabling to enhance the user experience when making selections—however, the mobile format needed to be adjusted to accommodate the vertical spacing of the specifications. I separated the form into three individual screens with similar or relevant information. The elements were increased in size to accommodate the user’s mobile device and make it easier for the user to read and engage. Because of this change, I used sequence mapping to help the user better navigate between the screen and provide an understanding of where they are in the overall process. This UX pattern allows the user to feel more in control of the journey through the form.
Through organized layout, design principles, and the use of UX patterns, the desktop and mobile layouts successfully fulfill the goal of providing a simple, convenient, and understandable user experience that a majority of users would be able to complete regardless of how they choose to engage.
Desktop Wireframe
Mobile Wireframes
Back to Top