- Company: Truth Collective
- Project: Deliver a personalized, relationship-based planning experience for students and doctors of optometry as an assessment quiz built for the Web.
- Final Results: Prototype Large, Prototype Small
- Duties: Wireframing, Prototyping, UX
- Tooling: Sketch, Atomic
About Truth Collective
With an agency model built for ambitious clients, strategies that defy inertia, ideas that rattle entire categories, and above all; a belief in the unrivaled power of human feeling. We're Truth Collective. We're addicted to emotion.
The intention was to deliver a self-guided, personalized, relationship-based planning experience presented as a web assessment quiz that adapts to various screen sizes in order to inspire and fulfill career aspirations. This tool was also expected to serve as an entry point for planning via personalized content, and stir curiosity for a potential modality. The end result would be integrated into a "well" section of the clients home page while keeping the user stationary, and resisting the call for a page refresh and new URL produced.
Indentifying Building Blocks
Through the use of a supplied project brief containing criteria for success, content, and general functionality, we started by identifying user flow with content as the guide. This content document expressed each portion of the quiz that included questions, suggested input methods, and results of user entered data.
Using Atomic Design philosophies, we began with white board sketches to visually identify neccesities & building blocks of the interface. This process helped to catalog patterns in isolation thereby minimizing the interface to only the essential pieces. Creating the foundation in this fashion also helps developers build for portability, maintainability, modularity, and impacting the capability to iterate efficiently within a succinct code base.
It was equally important to understand not only how each portion of the interface is presented on large screens, but the ability to adapt within smaller contexts as well. By combining both thought processes, the interface could easily transfer between each with ease therby providing the user with the best experience and control.
Wireframing & Prototyping
Creating wireframes to outline user flow was prepared in Sketch without the inclusion of visual aesthetics; some would also call this the "gray box technique." Each series of questions were examined carefully to assist in identifying an advantageous method for displaying information. The ability to create symbols in Sketch was certainly an ally throughout the process in order to provide efficiency in regards to iterations and feedback.
Maintaining wireframes in their most simplistic form avoided discussions revolving around aesthetics as not to hinder the core goals; creating a fluid, and sensible experience for the user. This method aided the group in determining input methods for each series of questions based on ease of use, adaptability across a variety of screens, and alleviating discussions revolving around favorite colors, or font face for example.
A prototype depicting interactions & flow was created with Atomic to guide and educate visually how a user traverses, and interacts during the quiz experience. Discussions such as how users return to particular points of quiz, select answers, and accesses each input method within different screen contexts were carefully reviewed. This helped to maintain a sensible process towards the final results screen. Placement was also discussed to help honor the flow of users traversing through each point of the experience. Since Atomic works quite well with Sketch it allowed for quick syncing between multiple artboards, and designs allowing new content to be pushed rapidly with ease.
While not all portions of this project presented an array of challenges, there were certainly a few that had to be addressed. We started by examining the benefits and drawbacks of multiple choice vs. select menu inputs.
The screenshots displayed above are variations of input options considered. While multiple choice is completely acceptable, it also presents a problem for smaller screens, and requires more cognitive overhead for the user to scroll though results where screen real-estate is precious. Ultimately, we opted for a select menu making it easier on the user to select a choice while eliminating unneccesary scrolling. This decision supplied simplicity for developers coding as well by not requiring the switch from a select menu to multiple choice on larger screens; its a one size fits all solution.
Results screens required critical thinking and consideration regarding layout and context variations. It was imperative to consider different approaches for displaying information that still remained beneficial with readability, but also made sense from an information hierarchy perspective. For the results with information stacked we decided smaller contexts would have the ability to swipe, or click to the next result saving screen real estate, and avoiding the user from scrolling.
The multi-column approach allowed for easy scanning of the data from left to right, but in smaller contexts the information would be displayed as a single column. In this case we decided to hyper link to the CTAs just under the first result giving users the option to automatically scroll to CTAs efficiently and intuitively. This also avoided CTAs from becoming lost and forgotten by keeping the user focused.
The final deliverable was presented as an interactive prototype along with a completed Sketch file containing easy to arrange, well named layers, and symbols for designers to reference. A smaller preview of Motion was used as an example along side the prototypes, however deadlines hindered further investigations. You can also view additional samples posted on Dribbble such as Quiz Results Wireframe, Quiz Range Slider, Compare Paths Modal, and Results View Secondary