Home Dashboard Widget Designs
The home dashboard of AccuLynx’s mobile app is where users land immediately after opening the app. This page should give the user a glimpse into what the app provides and offer quick actions that allow the user to access the most frequently used features.
The Challenge
My challenge as a designer for this project was to understand the most common features used in the app, and create simple widgets for those features to summarize their key information. The widgets provide users with quick actions and digestable summaries that allow them to easily navigate the application.
Project Objective
My objective for this project was to determine how to quickly display some of our most used features. These widgets needed to balance simplicity and utility to provide a valuable summary of information at a glance. The widgets also needed to provide the user a way to access the full feature to view more information.
Design Process
Learning and Understanding the Feature
This project was different from others I had worked on because we already had specific requests for widgets from the business. This project was a rare case where most of the user research was done by the stakeholders before I arrived. The business informed us that we needed to design five different widgets to display on our homepage. These widgets would include: Company Announcements, Drafts in Progress, Job Pipeline, Calendar, and Task Manager.
Rapid Sketching
The sketches for this project were critical because they allowed me to explore a variety of design ideas. I created numerous sketches, prioritizing different elements of the features. In my sketches, I created two to three different versions of each widget, which I then used to make some mid-fi designs to visualize how the widgets would work on the app’s dashboard.
Mid-Fi Designs
My sketches were relatively simple and easy to design, so I mocked up several mid-fi designs in order to present my ideas in color and with some context. Once I was satisfied with the designs, I created a presentation describing my widget research process and the pros and cons of each design to present to our head of product. Download My Widget Presentation
Final Designs and Decisions
After getting approval from the product managers, the next step was to finalize the designs and deliver them to the developers. I enjoyed putting my creativity on display, given that we created this design specifically for mobile rather than adapting it from the web. Plus, the page would be viewed by all users after opening the app, so it would have high visibility.
Company Announcements Widget
The Company Announcements is a widget that is meant to capture users’ attention immediately when opening the application. The widget displays the first two lines of a message that the admin wants their entire crew to see. The user is presented with the option to either dismiss the message (the message can be viewed again in settings after dismissal), or they can tap to view the entire message if it is longer than two lines.
Upload Progress Widget
The Upload Progress widget is a temporary widget that will appear on the screen if the user has selected multiple photos to be uploaded to the app. This widget will display all the photos that are being uploaded, and will inform the user if there has been an error in the upload and allow them to try it again. I included intuitive graphics in the design to indicate when a photo was either uploading or if it failed to upload due to an error.
Job Pipeline Widget
The Job Pipeline widget displays the number of jobs that are currently in each phase of the job process. By tapping one of the letter graphics on the screen, the user can quickly filter their job search to a specific phase. The widget displays the sum of all job balances in each phase, as well as the total number of jobs. This gives users a quick overview of all the jobs that are currently active.
Calendar Widget
The Calendar widget shows users their top five upcoming events. Once the top event occurs, the widget updates by replacing the ongoing event with a new upcoming event, if available. The widget includes a few quick actions that allow the user to add a new event and view the entire calendar. The calendar also organizes the events into three categories: Labor Order, Material Order, and Appointments.
Task Manager Widget
The Task Manager widget works similarly to the Calendar widget by displaying the top five upcoming tasks based on their due date. This widget includes swipe actions for each task to allow users to quickly organize the tasks into either completed or dismissed categories. The widget also allows the user to quickly add a new task or view the entire list of tasks that are associated with the user’s account.
Conclusion
The home dashboard is the landing page all users see when they open the app. The dashboard now has five widgets that provide brief summaries of vital information and allow users to perform several key actions to navigate the app more efficiently. Overall, the widget designs were a success with our customers and we are now getting requests for other features in the app to be “widgetized.”