Zee360 by Zeewise offers web-based dashboards and drill-down reports to enable franchise owners to compare financial and operational performance against other locations, peer groups or regions or national averages.
In September of 2020 Zeewise, the parent company that owns Zee360, approached us about redesigning a current software solution that they felt failed to meet their internal design standards. They told us that the UI looked outdated and the UX often felt too complex and counterintuitive.
At its core, Zee360 is a financial reporting tool. A powerful web app, Zee360 integrates with a user's accounting software (e.g. QuickBooks, Xero, Freshbooks), and collects meaningful data to create comparisons and predictions. The problem, however, was that users weren't maximizing the app's potential because it was simply too difficult to navigate. Zee360's capabilities are endless, but communicating those capabilities to a user proved strenuous because using those capabilities proved strenuous.
So the task was to revamp Zee360 with a focus on clean and simple UI, with intuitive UX that was easy to use and communicated its value to the user upon first use. As you can see in the next picture, the functionality existed (it's an incredible tool), but the design definitely left room for improvement. The necessity for white-label capabilities constituted a major design constraint. Zee360 is sold to franchise-model corporations, meaning that the UI needs to be light enough that any corporation can fill it out with their own unique brand colors. logos, and identity. For that reason, you'll notice varying color schemes in the redesigned screenshots that appear later on in this write-up, because we wanted to emphasize the product's light weight and versatility.
For this project, we utilized user interviews, Figma, and Invision. We're currently in the process of implementing the redesign with Vue.js.
We began this redesign the same way we always begin: interviews. We interviewed employees whose job is to support Zee360 users, we interviewed top-level decision makers, and we interviewed users.
Interviewing this project's decision makers provided me with such useful information as brand identity, project goals, and top-level problems that my designs needed to solve. We like to begin with these types of discussions because they help us frame our own goals for a project. By clearly defining our goals, problems, and brand identity, we create a set of criteria by which we judge my designs. We frequently check back in with these criteria, asking ourselves, "Does this design contribute to our goal? What problems does it solve? Does it adhere to the identity we created early on?"
The Zee360 Tech Support provided further information about the most common sticking points users encounter. By analyzing the most common support tickets, we determined a set of priorities for the redesign. Tech Support constitute an often underutilized resource in redesigns of this scale. They know exactly what problems users encounter on a daily basis and usually have great ideas about how to solve those problems. If we're looking for a smooth and intuitive UX, then we need to preempt the most common issues users endure.
Interviewing actual Zee360 users ensured a user-centric design. Users provided input on which aspects of the app they used most frequently and which aspects of the app were most frustrating. Placing user input at the forefront of this redesign would prove instrumental to turning out a smooth and intuitive product.
Ultimately we decided that we needed an organization structure that provided top-level data upon login, with the opportunity for users to dive deeper into whatever information they needed in the moment. For example, some users are more interested in viewing comparison metrics. These users might ask, "How do my branch's sales match up with the branch in the neighboring district?" Other users might be more interested in reading specific instructions for improving their performance by viewing financial predictions that our tool can make. So we settled on the above dashboard design, based on the concept of Selective Disclosure. Users who need only the most basic information can get what they need on their dashboard, while a more experienced user might want to view comparisons or breakdowns. The more experienced user can obtain the data they want by selecting one of those options from the dashboard.
Through our user research, we discovered that several users spend most of their work day away from their computer. For these users, we developed a mobile version of Zee360, which allows users to view meaningful data on the go, albeit with a few limitations. The sophisticated parameter selection tool remains, but the comparison tool is somewhat limited on mobile.
This project is incomplete, as we're still working on implementing the new design solutions. However, in some initial user testing, it seems as though my redesign meets the goals we defined for ourselves. Users enjoy the new, clean and simple UI. Initial feedback indicates that the UX exceeds our standards for smooth and intuitive.
Sound like a service your product could use?
Reach out (it's easy)
