Dynamic Dashboard

Providing users the right information at the right time.

At my prior internship, I collaborated with three colleagues - two software developers and one UX designer - to design and prototype the redesign of a vehicle-related application. The project was pitched to the executive members of my company, and there is currently discussion regarding the project's implementation into the existing app. 

 

Opportunity

 

Upon starting the internship, our team was confronted with a problem that we would spend the next ten weeks trying to solve: how do we increase user engagement within The App (name replaced for confidentiality)? Currently, The App's users only use it when an issue arises with their vehicle. Besides this occasional situation, The App remains unused. Thus, our team was tasked to find a way to attract users to The App at a daily to weekly rate rather than its current weekly to monthly rate. 

Other full-time employees in the internal design team proposed increasing personalization to solve the engagement problem. Since our team (comprised of four interns including myself) had little to no prior experience with the product, we figured this was a good place to start.

 

User Research

Our first step was to research The App and its users in order to make informed choices. We looked into The App holistically, figuring out what it is, what it offers and who its users are. Afterwards, we researched the users themselves and analyzed what they thought about The App. A week of individual research passed, and we reconvened to discuss what we had learned. By the end of the first week, we discovered areas of improvement for The App

 

Ideation

Once we equipped ourselves with knowledge regarding the product we're redesigning and the users whom we are designing for, we hosted a design sprint to brainstorm ideas. Each member wrote down their ideas for possible solutions on sticky notes, and we grouped the ideas afterwards. By the end of our session, we had 30 feasible ideas that we could present to our mentors for feedback.

We ultimately went with a two-fold solution. One of which was this "dynamic dashboard" concept where users are able to get relevant information at the relevant time. Although similar to a social media feed, our aim was to enhance the vehicle/user interaction rather than a user/user interaction. Through this solution, users can get preemptive warnings about their vehicle health, track their driving habits, and generally be proactive with their vehicle rather than reactive.

With the help of one of our project leads, we created a Lean UX Canvas to help flush out our two ideas. This method allowed us to solidify on our ideas, think about what concrete problems we’re trying to solve, and what business outcomes we’re expecting to produce.

 

Concept Research

Before we began the implementing a dynamic dashboard that would give live information to the user, we first organized the content across the entire app. This allowed us to focus on what only belonged on the “feed”/the dynamic dashboard element. From this point forward, our team split in two. The two developers began setting up the development environment for the project while myself and our other UI/UX designer conducted the concept research and wireframing. Mentions of "we" will mean myself and my designer colleague. 

As per the research of the UX team, we decided to move towards a bottom navigation layout rather than the current hamburger menu. In order to decide how to reorganize the content of the App app, multiple tests were ran to create the most intuitive layout of the app. One of which was a card sort which asked the users to take a list of features - both existing and some newer ones that we were proposing - and sort them into a limited number of categories. 

The result was shown visually in a similarity matrix, which showed us how strongly one feature connected to another. After analyzing the results, we found 6 initial groupings for all of The App's old and new features. 

 

Design Validation

After the concept research stage, I proceeded to create the low-fidelity wireframes (which I could not acquire due to confidentiality) while my designer colleague continued to analyze our results and prepare for next rounds of user testing. Once the wireframes were complete, we took our first attempt at a bottom navigation bar and conducted two rounds of user testing to validate it.

The first was a TreeJack test (~50 tests), which asks users to perform a task using our proposed structure. Users navigate through a branched list to find the location where they would perform said task. The results showed which features were intuitively placed and which ones required more adjustments.  

The second test was a Chalkmark test(~50 tests), which specifically records the first "mark" a user makes when asked to complete a task. In other words, we tested where users clicked first on our navigation bar. The results allowed us to see the effect of the balance between using icons or words to help the user navigate the app. In the end, we concluded that both were necessary. 

I would like to note that during this stage of the project, my designer colleague took the lead in the user testing while I took the lead in the interface design. We worked simultaneously with me helping my colleague analyze the user testing data and my colleague giving me feedback for the interface designs. 

 
Card_Engine

Card_Speed

Card_Auto_Health

New Post Generic - Final

Profile Generic Final

Solution

Once we had the user feedback, we were prepared to make the final designs. Due to the unavailability of one member on our team, I ended up taking on a front-end development role to lessen the burden on the development side. As such, I passed down the interface design role to my designer colleague, who ended up polishing the initial wireframes that I created. Meanwhile, I worked to implement the designs that we currently had - making modifications along the way as new design changes occurred. 

By the end of our project, we had a functional Android prototype and high fidelity wireframe designs - including information "cards" to populate our dynamic dashboard. Due to confidentiality, I could only acquire a few samples of the designs that we created, but please feel free to click on the images above to see additional detail!

Interested in the other half of this personalization project? Check out this link to see the personality quiz concept!

New Post Generic - Final