This story is a continuation of the enterprise dashboard vision showing a deep dive into designing the dashboard Workspace Card View.
Validating our Vision.
Now that we had our dashboard vision done and presented to the Org and SurveyMonkey execs we got approval and resources from management to go ahead and execute this Vision.
we knew we needed to put it in the hands of our customers.
So, I and Katrina another researcher facilitated an evaluation session.
The goal of this research session was to assess user feedback to the initial vision type and to gather additional information about expectations and behaviors on the dashboard to help us release the first version of our dashboard.
Summary of our findings.
Overall, users reacted positively to the new design.
But we came back with these major findings:
Promote at-a-glance information
Having more information available creates tradeoffs
Efficiency can be supported with increased consistency
Facilitate actions (rather than directing action)
Promote at-a-glance information.
Here we found out that users are highly task-oriented and value being able to quickly access information to facilitate action. Such as Edit, monitor, & analyze a survey.
Typical information-driven tasks users brought up included:
Knowing when to close surveys
Resolving outstanding issues on draft surveys
Having more information available creates tradeoff
We found out that there is a learning curve where users work to adjust, to the volume of text and information on the page and that the First impressions from users are often of overcrowding.
Consistency can support additional user efficiency
Efficiency can be supported with increased consistency.
The number of unique and competing elements on the page required time & effort for users to process, which could feel odd for users trying to achieve a handful of repeated tasks.
With the recommendation - that - Keeping more elements of the design consistent - can increase user efficiency by:
Creating predictability for finding and using information
Reducing required reading to process and make decisions based on available information
Facilitate actions rather than directing action
A recommended action that does not align with a user’s typical workflow draws attention
Some of the recommended actions we had also were not what users typically did.
So Providing consistent, easy access to the most common action options allows users to complete tasks quickly & easily.
These were all really big feedback we got from our customers and we were left with these main questions?
How might we balance presenting high volumes of unique information without creating the experience of crowding and information overload?
How might we surface contextual information needed for users to determine the next actions and or reconsider what recommended actions are most appropriate?
Stepping back to redesign the card framework
Firstly to solve this problem of information overload. I had to go back and redesign the frame of the card. Focusing on one key thing:
What information matters to the user the most? This was to help me understand the hierarchy of elements on the cards.
Understanding what we were trying to surface to our customers?
What is important to the person viewing the interface?
And - How much information do we actually need?
From all these I was able to group the cards into 3 elements
Card details: The Status & Information Details of a project
a user wants to identify the survey name, the day the project was modified, the Current status of the project, and who they are collaborating with
After Understanding what project it is users would want to be aware of contextual information needed to facilitate decision-making, Such as response, survey score & comments.
For the MVP which I was designing for we only focused on responses and Survey Scores. Here I worked with Justine, our design intern to uncover all possible permutations and Edge Cases.
Once a user is done they needed support to take the next action on contextual information they were aware of.
Scaling the cards to support all other SurveyMonkey Business User Types
Now that I was done with a framework for a survey project I needed to make sure it also did scale for our customers in other businesses that used this dashboard too.
So I facilitated a quick design workshop with 2 designers from the market research team & 1 designer from the Use Case team to brainstorm on ways we could bring a market research projects into a card so as to meet all our goals.
This was a very successful workshop. We were able to make sure that the framework I created was able to scale for MRX and use case user types.
The Visual & UI Phase
Now that I had the framework of the cards hashed out, It was time for the Visual and UI phase.
In this phase, it was not just about picking colors that I liked or icons that looked cool, which I did sometimes in the vision but here being intentional with visual elements.
So it would elevate the hierarchy structure of the card. To create easy Scannability for our users
How would these cards look individually?
The first question I had to ask myself was:
How would these cards look individually?
Does the most important information stand out to a user?
What do I want the user’s eye to be drawn to first?
Are certain elements competing too much?
With these questions, the most important information was the title of the card & the contextual information on the card. From our research, we found out that Users want to easily identify a survey and know what has changed in their project.
This means those elements had to take prominence in the card design.
I provided more efficiency by going back to the basic typographical hierarchy.
Created more contrast in font-weight, provided more space between elements With the outcome of improving efficiency by increasing the speed of scalability.
How are we solving for user accessibility?
The second question I had was how accessible were these cards to our users?
Were the color choices intentional? And also accessible?
In designing for web I had to make sure that text needed to have enough contrast from the background color so as to pass a 4.5:1 ratio. which I used a color contrast checker to double-check I also had to strip down how we use colors, using colors to call out only unique health components.
Making the health more prominent and survey status informational.
Using just 2 colors: green for success, while red for failure or something wrong on a project. So Users can quickly be aware of what has changed in a project and what they need to take action on first.
Designing for localization and Long Project Titles
I also looked at how many lines of text we were going to allow before truncating. This was to create efficiency in localizing content for users with different languages.
I had to work with the Business Intelligence team to figure out the average number of characters in a survey title.
I also looked at past data which showed that our users wanted to see the first few words and the last words of a survey to identify projects easily.
So I decided instead of putting ellipses at the end of the title, we should put them at the middle. So users can easily understand what project this is from seeing the first part of a project title and the last part of a project title. I also added a hover over project title state so users could easily see the full project title.
How do these cards look displayed beside each other?
From our evaluation, we knew that we had to solve for overcrowding by
Keeping elements of the design consistent to increase user efficiency
This will help a user in:
Creating predictability for finding and using information
Reducing required reading to process and make decisions based on available information.
From our evaluation, we knew that we had to solve for overcrowding by
Keeping elements of the design consistent to increase user efficiency
This will help a user in:
Creating predictability for finding and using information
Reducing required reading to process and make decisions based on available information.
So I made sure I removed the progress bar and used only text to create consistency also made sure that the hierarchy was the same for all survey statuses. Simply showing the card detail, contextual information, and recommended actions. This was to create predictability for our users to easily find information and be aware of the latest information.
Recommended actions
For recommended actions, I tried to minimize the impact of how we were pushing recommendations to our users by having less emphasis on the button but still having the recommendation present. If the next action recommendation was wrong, we try to make our users feel like they have other options to facilitate action and this was done with the addition of a split button.
Card Interactions
Partnering with design systems and engineering on how might we introduce a new interaction and pattern to the design system. Designing for various states from the default to the hover state, and also designing for a focus, multi-select and error state.
Scaling the Card view to a List view
Once the card designs were done I had to make sure it also scaled for a list view.
With the intention of a list-view allowing more items to be displayed on the screen at a time. For the list view we are going to built this in the second phase of our rollout.
“Design is an iterative process. One idea often builds on another”
-Mark Parker, Executive Chairman, Nike
It's been 6 months working on cards and I have gotten a lot of feedback from customers and also feedback from stakeholders & partners.
This is an image showing were I started and the series of iterations the card design went through for the past 6 months till we got to where we are right now.
And there is a quote I love by mark parker the executive chairman of Nike which is Design is an iterative process. One idea often builds on another.
So far this project has be a success we have started building these cards and it should be out by the end of this quarter Which we plan on will learning from.
Using intentional design to create meaningful differentiation
I hope I have been able to show you, how to use intentional design to create meaningful differentiation. Staying close to our design principles of efficiency, awareness, collaboration, and support also being inclusive of the numerous cross-functional partners I had to work with.
This is the biggest project I have worked on and I have grown so much doing new things and learning from people.
I am confident of the outcomes because we took the right steps so far.