Naomi and I started the design process of the dashboard by sitting down for a call on Zoom and sketching out wireframes on paper. We set a 15-minute time limit for sketching and presented our work to each other afterward. Sharing our work helped us pinpoint similarities in our ideas and discuss what components would be essential for our dashboard design.
Aside from the product requirements we were given, we wanted to include:
The Dashboard Design Process
Sketches
- Modules to display & group data in an organized way
- A side navigation bar for convenient access between pages
- A filter option for users to choose different time periods that they would like to view
Dashboard Sketches
Low-Fidelity Wireframes
Naomi and I worked together and created our first wireframe of the dashboard. We discovered that this wireframe was a great visual to pinpoint any specific areas that could be a concern in the user’s journey.
💡Our Ideas
- Implement tooltips throughout the dashboard to teach users about modules
- Create a dynamic calendar for users to have more freedom of the timeframe they would like to view
- Add in a profile section on the dashboard that imitates a Twitter profile, which will also keep users informed about their current profile numbers and adjust to the specific timeframe
Hi-Fi Wireframes -> User Testing -> Iterations
After receiving a confirmed list from our Product Manager of what data to display on the dashboard, we began iterating the wireframe and transforming them into high-fidelity to present to our stakeholders for user testing.
Naomi and I set up Zoom calls with founders from various NPOs to have them test out our product.
Naomi and I set up Zoom calls with founders from various NPOs to have them test out our product.
Overall, the user testing sessions were a great way for us to gain an outsider perspective on whether our designs were truly addressing our target user’s concerns. One of the biggest insights we learned when testing the dashboard was that users were confused about the importance of some of the modules and wished that the product showed them a plan with how to improve specific statistics. However, due to technical limitations, we were unable to produce account-specific recommendations based on the user’s dashboard.
To get around this obstacle, we realized that we needed to put more attention to the way the content was worded and displayed. We decided that our next step was to focus on breaking down information as specific as possible to make data more accessible and easy to understand.
To get around this obstacle, we realized that we needed to put more attention to the way the content was worded and displayed. We decided that our next step was to focus on breaking down information as specific as possible to make data more accessible and easy to understand.
Final Dashboard Designs
1. View Progress for Accounts and Tweets
We decided the best way to make data more accessible without overcomplicating the backend engineering is by splitting and grouping the information into specific sections. This allows users to track their account progress and look more in-depth into their content. Additionally, users can click on a tweet to view more information. The goal is for the data visualizations to imitate a repetition to encourage users to see a pattern throughout their progress.
2. Learn and Receive Guidance from Tooltips
One concern brought up by our stakeholders was that they were unfamiliar with social media marketing terminology. At first, we thought of looking for alternative words to simplify the titles of modules. However, Naomi and I thought it would be important for users to get familiar with popular marketing terms. By adding tooltips, users can access the data’s definitions and purpose to slowly learn and ease them into the world of social media marketing!
