UX Case Study: Dashboard Design for a Foreign Embassy
Project Objective
Prototype a way for the embassy staff to conduct mission-critical activities and help them understand sentiment analysis with key stakeholders.
Context
My company was approached by an embassy that wanted to shift from a system that was still paper-based into a organization utilizing cutting-edge technologies as it related to analytics and project management. They had heard about some of the products we offer in regards to portal software and sentiment analysis (a natural language processing technique to opinion and sentiment on a given topic), and wanted to see a Proof of Concept that would help them make a decision on whether to go ahead with our solutions.
Role
I was the lead UX Designer for this role and was given the responsibility of creating a visual dashboard that would illustrate our offerings accurately and give them a clear understanding and vision of the work we were intending to do. Assisting me through the research and design iterations was a Business Analyst, a Project Manager, and a Technical Solutions Expert. The final product I designed, using Sketch and Invision, was a full dashboard prototype to display 12+ screens, including functionality for calendars, mail, news channels and sources, and project management activities.
Process
Our team’s process for this engagement was as follows:
Research
Approach
It is still unfortunately quite common for technical professionals to start from the solution and then work backwards to see how the solution can work for the problem presented. When that method is followed, the offering become the proverbial hammer that can fix every issue it encounters. Most importantly, it forgets the user. I made it clear from the beginning that we were going to focus on the user first and then see what elements from our solution could be incorporated into the final design. If needed, I shared, our development team could work on new apps if they didn’t exist in our offering mix. For this engagement, we utilized the following modes of research:
User Interviews & Client Research
We got started on developing personas for the embassy staff, particularly for the ambassador and the managers who would be the main users of the dashboard. We did this through interviewing the staff in addition to researching details about the country, its culture, history, geography and language. I found remarkable points during this research, notably including that the country shied away from certain topics and news outlets, to the point that conversation with them will cease if the topics are brought up. We noted to be considerate about this in our design, as well as cataloging terminologies and mental models that differed from the traditional American ones our team was accustomed to. This included vernacular that was unique to their culture, and we found the client to later appreciate our incorporation of these nuances in the design prototype.
User Empathy Mapping
Using this information, we then created user empathy maps to help in consolidating our research and focusing our analysis. The following empathy map is modeled after one of the senior staff we interviewed. The grouping helped us to understand both the mindset and the actions of the user, which set us up well to address their pain points in our prototype.
Product Research & Competitive Analysis
To make sure our design was not just a fanciful, pie-in-the-sky idea, we met with product managers and subject matter experts (SMEs) that had extensive knowledge and expertise with the products we were pitching as part of the dashboard. During these sessions, I first reviewed their documentation and standard demos and asked to what level the products could be customized. Some products were limited in how much personalization could occur, but for others, they told us the products offered flexibility and that they also had available developers that could help us with a truly unique solution. These technical sessions were helpful to see what we could and could not customize as part of our prototype.
We also conducted competitor analysis through a SWOT (strengths, weaknesses, opportunities, and threats) framework that assisted us in gaining a proper level of context and foresight into what our value proposition should be focused on, and in determining what we should devote more time to research further. The analysis was also used to document standard ways that dashboards and widgets are used to help with analysis and project management, which we added to our design system and style guide.
Ideate & Prototype
Whiteboarding
As we wrapped up our initial research to better understand our users and to familiarize ourselves with the products we were pitching, we began ideation and whiteboarding sessions with the client. During the meetings, the team and our client were all standing at a whiteboard drawing out a vision of how the product could look like. In addition to the visual elements, we focused on the objectives of each section so that we weren’t signing up for a specific interface before we fully understood the users’ requirements.
The output of the whiteboarding sessions led to the following diagram — redrawn from our whiteboard pictures — in addition to further refinement of our research artifacts.
Low-Fidelity Sketching
Now that we had a solid concept to follow, I began the low-fidelity prototypes. This process helped us to identify affordances and signifiers that would be associated with each segment of the dashboard. For example, it’s easy to say that there is a request for a social media widget. But the low-fidelity prototyping helps us ask the following questions:
- Which mediums from social media are most important to include?
- In what order should they be prioritized?
- What metadata does the user want to see for each social media?
- Should there be search functionality? If so, what are the parameters and outputs behind the searching?
These discussions took place for each segment and helped us to draw up low-fidelity sketches in conjunction with our client. The following is a sample of one of our sketches that illustrates some of the details we were capturing for each section.
High-Fidelity Prototyping
As we got closer to our final presentation, I began prototyping at a higher fidelity that would have the dashboard appear as a seamless part of the organization. Now, while we use filler text and representative models in many high-fidelity prototypes, that is more the case with existing clients. For us to win this work with a potential partner, it was essential that we paid attention to every detail.
To this effect, I personalized every aspect for the client by displaying matching branding and typography, and demonstrating multilingual capabilities. I also made sure the dashboard news feeds were customized for our users, and that our company’s cognitive social media analytics and single sign-on features were integrated as part of the design.
When it came to the sentiment analysis, social media, and news being shown in the prototype, I recognized that this was not the time to show or portray negative feedback to a probable client, so I paid attention to that detail as well. And it came in handy: when I showed the sentiment analysis for congressman — essentially marking them as green and red based on their sentiment — the client actually mentioned, “Huh, interesting, none of the congressmen in red are real congressmen!” and began chuckling in an appreciative manner. That was a proud moment for me.
Walkthrough of Dashboard Prototype
The following video provides a walkthrough of the prototype. You can also use this link to see an interactive view of the prototype. Following the video, I will also provide details on some of the screens.
Dashboard Main Page
As requested by the client, the dashboard provides a quick window into every function available on the dashboard. Whereas other dashboards may just be informational on the main page, requiring a user to expand a view to conduct actions, our client asked us to allow most of their actions to take place without them needing to go to another screen. So in our prototype, a user is able to approve requests, accept calendar invites, search through social media, and more — all on the same screen.
The design was also made in a grid-like format following standard dashboard designs to signify to the user that they are able to move the widgets around. This basically makes the dashboard not only unique to our client, but to each user that uses the dashboard in the organization as well.
User Flow for Approval Requests
The flow for these screens were significant to the client because they wanted a way to process and organize all of the paper documents that they were digitizing. This view allows an embassy staff member to see if they want to accept or deny requests — presumably for the simpler requests — on the initial dashboard, or if they want to click on a request and read through the status updates to see who made the request, when the request was made, what files are attached, and if others have approved or reviewed this request as well.
User Flow for Meeting Details
This view, modeled after our company’s mail and calendar system, allows a user to see meetings for the next few hours and to either quickly decline the meeting(s), or to view more details. The customization made for this flow in regards to the client is that they wanted the system to have VIPs — such as congressional leaders — with links to a profile that includes their sentiments to the embassy and other important information.
User Flow for National & Local Sentiments
The sentiment analysis provided by our product was one of the major selling points that our client was very interested in. Both the national and local sentiment widgets utilize machine learning and natural language processing to quickly collate real-time opinions and sentiment towards any topic. The use cases we were presenting as part of this dashboard was to show sentiment towards the embassy and country. The national sentiment shows sentiment from politicians in each state in addition to social media opinions from each respective region. The local sentiment view provides information on political leaders, their voting records, their social media mentions of the country, network analysis showing ways the country and political leader are connected online, as well as other pertinent information.
Winning the Work
My role in this engagement extended to conducting the final presentation to the client as well. My presentation covered the user flows, answering questions about design and functionality, and providing a timeline for implementation. By the end of the presentation, our client was impressed and said that this product looked very real, that they were excited by it, and couldn’t wait to begin.
Sufficient to say, we won the bid.
Conclusion
This engagement was an opportunity to demonstrate the value of user-centered design that is built upon research, ideation, and prototyping. From the research conducted through client research, user empathy mapping, competitive analysis, as well as ideation though whiteboarding, low-fidelity sketching, and high-fidelity prototyping, my team and I were able to put together a solution that was embraced by the client. For future engagements, I plan to work on furthering my analysis of the research conducted, particularly as it relates to user models. I also plan to conduct more testing and refining the product further based upon the test results.
