AccelOne Project

Dashboard

User Testing ∙ Visual Design

A1_Banner_New.jpg

Overview

about

I worked with a team of two other designers to create a new user experience design for AccelOne's Project Visibility Dashboard. AccelOne is a Kirkland-based custom software development company. My role within the team was conducting user interviews, usability testing and visual design.

Brief

Many companies who have outsourced software development have had a poor picture and experience from it. The reasons are many. Much of it stems from communication between the left and right hand - engineering of the app, and the business owners of the app or the non-technical stakeholders in the app's success. The state of KPI project transparency to non-tech stakeholders is not always apparent. We want to help fix that problem and make outsourcing software a good and transparent experience for those who own the outcome. 

Duration

Our team had 2.5 weeks to complete the project.

main challenges

The main challenge encountered during this project was determining the Minimum Viable Product and ensuring my team understood user's most important needs within the dashboard.

process

  • Business analysis (develop understanding of client through kick off meeting and in depth interview)
  • User research (1:1 client interviews)
  • Dashboard Heuristic Analysis 
  • Content Strategy
  • Scenario Development
  • Data Visualization & Testing
  • Visual Design 
  • Usability Testing
  • Iterations & Final Prototype

Final design development


Discovery

client interview

We compiled a detailed list of questions about the company, business goals, staff, and projects and sent this document to the Operations Manager at AccelOne. The responses gave us great insight into the company and their specific goals for this project as well as how that fit into larger company goals.

user research

The client gave us a list of contacts and users to reach out to for interviews regarding the dashboard experience. Sijia (PM) scheduled a total of four 1:1 interviews in the first week which I would be responsible for conducting. I worked with JJ (Researcher) to develop a list of interview questions. We sent the participants our questions and a link to the current dashboard so they would be able to prepare prior to the interview. Our participants ranged in age and seniority, but all had a high level of tech understanding and some experience with either AccelOne's dashboard or similar dashboards for outsourced software development. 

I conducted the interviews either over the phone or via Skype, and took detailed notes during the call. After each interview I went back through my notes and filled in any missing pieces, then I debriefed with my teammates. I compiled a spreadsheet with questions and answers for each individual which allowed me to easily compare responses and identify trends.

dashboard heuristics

As visual designer for our team, another component of my research was to conduct a heuristic analysis of the existing dashboard. I selected a heuristic analysis because it was important for us to understand common usability standards within the context of a dashboard. I used  Deniese Pierotti’s “Heuristic Evaluation - a System Checklist” and also researched dashboard specific heuristics. 

Annotated heuristic analysis of existing dashboard

Challenge

The current project visibility dashboard does not adequately provide the user with the most important information users want to see. The company does not currently have an understanding of it's users primary needs. The project visibility dashboard needs to exude transparency while focusing on user goals and displaying information in a simple, concise way. 


Approach

content strategy

My teammates worked on developing a persona, user flows, and conducted a competitive analysis. We compiled this research and had a whiteboard session where we prioritized the content and design strategy, which helped us to craft the MVP.

We would keep the current dashboard information and also add in new features, including project summary, a notification system, levels of access, and feature specific information.

dashboard layout analysis

Next we began considering layout and where information would live within the dashboard. A challenge we encountered was that we weren't able to conduct testing on the layout with current users, due to time constraints. Our classmates didn't have enough background knowledge of the dashboard and each individual piece of information. So, each of us within the team separately did a card sort exercise where we indicated how the content should be laid out. Once each of us had gone through this process we discussed our reasoning as a team. If we had more time and access to current users, we would conduct further testing on the layout - but for now that is a "next step."

Mid term review with client & DEveloper

We scheduled a mid term review with our client to review our progress thus far and provide our research findings. We were pleased to receive positive feedback and knew we were on the right track. We also set up a phone call with the lead developer with AccelOne, and discussed our plans so far with him. He gave us the green light to keep moving forward with the knowledge that our designs were implementable and realistic in terms of development.

persona & scenario development

JJ created a persona based on the user research and analysis I conducted. His name is Rob, he is a project manager for a tech company in his mid 30's. The scenario developed for Rob is that he is working with our client on a software development project. He has received a notification that a particular feature within the project is going over it's allotted schedule. Rob logs on to the dashboard to further explore the issue, and based on the information given he decides to submit a change order request to remove this particular feature from the project because he has determined it is out of scope and using up too many resources. 

The persona and scenario development helped to keep us on track as a team and prioritize the features added to the dashboard. The scenario also allowed us to show a particular flow a user might take, rather than just demonstrating a more static dashboard when delivering the prototype.


Design

sketching

JJ began working on sketches for the layout of the dashboard. Meanwhile, I sketched out wireframes of a tutorial element we wanted to include to show how the dashboard would work. Our idea, based on competitive analysis, was to utilize a modular drag and drop model. Unfortunately, this is not an element we were able to incorporate to our prototype due to time constraints, but we used the tutorial as a way to demonstrate how this could work.

Data visualization & graphic elements

Next, I focused on the data visualization aspect of the dashboard. We would be representing graphs and status updates for various project features and I needed to research the best way to do this.

visual design a/b testing

I narrowed down ideas and conducted A/B testing with classmates, asking them to vote on the graphic they felt best represent each metric. 

wireframes

As our primary interaction designer, JJ designed the initial wireframes. Meanwhile, I also sketched out the various frames that I knew I would need to work on specifically in terms of visual design.

style guide development

visual design & mockup

I started looking at how I would incorporate the visual design into the wireframes. I used print outs to cut and paste different objects and analyze how the layout would work. 

User testing results 

I conducted three users tests based on our initial prototype. I then synthesized the results through this affinity diagram (above). In order to avoid scope creep, I went back to the MVP and prioritized the changes to be made.

Primary changes were to make the alert box more noticeable, add further clarity to the "Project Overview" module, and incorporate a "feature" burn down that the user would be able to toggle into in the burn chart module.

Final Mockup

Sign in screen (Left) and Project Selection screen (Right)

Main dashboard screen with side module navigation closed (Left) and with navigation open (right)

Dashboard screens as each module is added to view

Module Tutorial

This tutorial shows how the dashboard modules can be dragged and dropped into place. The user can select which modules they wish to view and rearrange the view based on their preferences. The Project Overview and Burndown chart are kept as default modules because research showed users most commonly wanted to view the high level overview, but wanted options to go more in depth.

Module Features: Up close


Next Steps & Reflections

As a team, it was great to receive positive reviews from our client based on our deliverables. As next steps, I would like the opportunity to do further testing to look at the effectiveness of our "drag and drop" method, as well as the final layout of the dashboard. I would also build out other permission levels of the dashboard. We focused on the "Project Manager" view, but there would also be a separate view for administrators and potentially for financial stakeholders with different information. 

Upon reflecting on this project, I learned a few valuable lessons:

  1. Scope creep is real! It's easy to go down the rabbit hole of trying to accomplish all possible ideas. However, we had a very limited time frame for this project (2.5 weeks) and had to constantly prioritize both as a team and also with our clients.
  2. Finally, understanding content and context of a project is vital. Because we were dealing with relatively technical information in this dashboard, I had to do a lot of research and ask a lot of questions to make sure I fully understood the purpose of each piece of content.
  3. As visual designer, I went through multiple iterations of final mockups. The screens on this case study are the most up to date, based on continued feedback and critique. It was helpful to continue getting feedback even after the project was complete and continue iterating on the final designs. 
My team with our client. From Left: Dave Landis (UX Mentor), Sijia Li, Myself, JJ Zhao, Scott Craig (CEO)

My team with our client. From Left: Dave Landis (UX Mentor), Sijia Li, Myself, JJ Zhao, Scott Craig (CEO)