Overview & Purpose
Our mission from the start was to build a simple quiz (web application) that any couple could use to determine if their relationship would last two or more years. From a design perspective, that was what we were working with, so that entailed figuring out how users would input their information (a user input form) in order for the app to predict against the trained model. Step 1 was to create a design proposal document that outlined our overview and purpose, before populating it with design-related tasks, resources, and assets. We established three takeaways as success criteria that would inform our design decisions: a final score, the reason codes behind the prediction and a description that answers, “How similar am I to other people who have taken this survey?”
Identify design processes
The next step was to establish our processes and deliverables. Having identified concrete objectives up front helped us stay focused on our design goals. The development method we used throughout our operation was the steel thread approach, which mapped the original design proposal through requirements, wireframes, prototypes, and testing, while maintaining consistency throughout. This approach helped us avoid unnecessary design cycles by giving us a sequential list of dependencies to adhere to and deadlines to meet. It’s worth noting that -- like many organizational processes -- the planning and development stages here are not always a purely linear process.
After the initial planning, I wanted to first find similar examples of products, contents, images, ideas, keywords and other quizzes that focused on the same subject matter. It is important to evaluate comparable content when developing a new application for two reasons: First, this is an opportunity to jumpstart the creative process by identifying approaches and best practices that were already successful. Second, this helped us set expectations for the final product by accepting viable solutions and dismissing approaches that would not work with our assumptions.
Several obvious publications came to mind when we thought about social media, relationships, and quizzes - the Buzzfeeds and Cosmos of the world. These were examples I felt were most successful for several similar reasons: they were brief, offered consistent and relevant feedback and answers, and delivered on a clearly developed and well-communicated objective.
The first significant challenge we faced when designing this application came up when we were trying to identify who would be using it. We defined three distinct potential user types across a wide spectrum: the data science enthusiast, the avid Facebooker and the tech-savvy (ish) Grandparent. Understanding these personas was a big step in matching user expectations with users’ needs. Each group brings with them a unique set of individual curiosities, but also limitations; these limitations often directly contradicted the interests of the other groups we wanted to reach. This meant we were willing to compromise edgy aesthetics and exhaustive, scientific evidence for legibility and clarity.
Define the experience
Tangible and intangible components combine to invoke intentional responses in user experiences. Our initial brainstorming conjured a set of abstractions: fun, a little tongue-in-cheek but still serious and informative. These are the types of intangible ideas we wanted users to feel when they interacted with the app.
With the original study as a framework for content, we set our sights on our primary goal: to create broad awareness of DataRobot and the applied science of machine learning, exposing DataRobot to new markets and audiences. The content (questions) needed to be simple, yet engaging. A user needs to perceive value in the questions we are asking in order to appreciate - and more importantly, trust - the results of the prediction.
Since the primary design objective is to promote machine learning through social media awareness, we assume a majority of users will be interacting with the app via mobile devices. We decided a linear set of steps would build to a more dramatic result, in the form of the final score reveal. We proposed a simple user flow: a user will enter the site, enter information about themselves and their relationship, submit their answers and receive a grade or score of their relationship status, health, and future.
The flow was an essential benchmark that allowed us to evaluate the steps a user would need to take to complete the quiz. Our team used the flow charts to imagine a simple interaction pattern that would allow users to swipe between questions, leading up to a big reveal at the end.
Many consider wireframing to be the fun and artistic portion of the design cycle. It can be fun, but often the artist’s experience manifests through the ability to create, evaluate and calibrate. The ability to appropriately dismiss early concepts can save many iterative cycles and avoid lots of frustration down the road.
Since the DataRobot Labs initiative is new, we did not have basic templates, common patterns or even a style guide in place. With respect to design, this required a ground-up investigation to find an appropriate visual presentation that speaks well with a wide variety of users. Colors, typography, imagery, hierarchy, layout, and copy all had to be imagined, created, tested, and prepared for development. Most importantly, user interactions and a proven set of heuristics had to be chosen - specifically, buttons, form-fields and pagination that afford the user consistent and constant feedback had to be validated and optimized for the diverse group of personas we identified in earlier stages of our design process.
Because Labs is a brand new initiative for DataRobot - and because I’m a new employee here too! - every internal process had to be carefully considered from scratch and developed. This included communication, planning, research, design, and actual development itself. It was a long process, but certainly an exhilarating one at every step, and I’m proud of the ultimate design that we achieved with the DataRobot Labs Relationship app. Check it out and let us know what you think!
- Introduction and Background to Relationships by DataRobot
- Preparing the Data for Relationships by DataRobot
- Building the Models for Relationships by DataRobot