Background 🎬

Sofvie and Med-I-Well, two companies, collaborated to develop a B2B web-based app for managing health. The app's primary purpose is to offer a form on its front end for users or administrators to input health report data, which is then processed using Python programming to compute scores and produce a web-based tablet and PDF version of the report card, which can be downloaded. Furthermore, the app includes various accesses for individual users, the Med-I-Well administrator, and companies with dashboard access. This project was a part of the Springboard Industry challenges. It was a collaboration of a team of Springboard students alongside a team of developers and two managers utilizing the agile design process. It was completed in a limited time frame of four weeks.

Role 📌

For this project, I was the design lead of my springboard team and responsible for researching, designing, and coordinating between different stakeholders. As the design team, we identified and established the information architecture that could be valuable for connecting with skilled professionals and executing a collaborative project for both the front-end and back-end aspects. I led this project as a UI and UX designer by conducting the key user flows and wireframes, then building a mid-fidelity and a high-fidelity prototype to test, with a solid design system.

Problems🔍

This service has been developed with a Python-based Flask micro-framework. However, it can only generate the health data and the report from the backend without any screens and interaction for users. The report card was created in Microsoft Excel. It was difficult to read and access and was not visually appealing.

Within a very tight timeframe, our primary challenge was to redesign the report card and comprehend the services and challenges from the viewpoint of employees, administration, and companies.

Our objective was to streamline the feature list and determine which features needed prioritization, enabling us to concentrate on the most crucial tasks that benefit customers and stakeholders.

Moreover, we aimed to construct a sustainable design system that Sofvie could employ to iterate the service in the future with an approach of accessibility and sustainability.

Define📐

First, we needed to understand the project as a whole and how the pieces we designed would apply to the larger picture. The employee must register with their personal information and build their profile with their health information during onboarding. The admin and company were able to have access to a variety of different information regarding different employees and their health reports, different companies, and worksites. In contrast, the employees were only allowed access to their personal dashboards and health reports. These included the employee’s personal information, health assessment grades, a breakdown of the grading, and graphs to accompany the assessments.

Defining the detailed visual assets the client required in the dashboard of different access was also essential. To begin designing the app, I ensured that we covered all of the visual elements and started to divide them based on different teamwork. To reduce resistance during the design process, I ensured every stakeholder's concerns and input understood the product and aligned with our goal.

Design and Iteration🚀

The original health report card

This project was challenging because it required analyzing and organizing a large amount of data from its report card in a way that was simple and easy to understand. The dashboard was meant to be an overview of the report card, where employees could view their results at a glance, as well as access their previous reports. We aim to realize those data with a readable and accessible approach for employees and companies. After cooperating with different teams, we designed four identical charts that can be applied to various contexts. Those charts are also implemented in the user's dashboard and report form.

We understand that this service is mainly used on a tablet, to provide an easy-to-use application, I used a 2-section structure of the product because it would be easier for development, but I wanted to make sure it was scalable enough to host the changes and new information we had in the database and provide enough space for information presentation for users.

The whole design project was much larger than the topics I could cover. The product's architecture grew substantially as more features and authorities were added to the whole experience. The team compiled a design system that we used to keep the dashboards and related elements cohesive. The colors were based on the client’s logo, as was requested by the client. The design system was developed with a contribution to usability and sustainability standards.

Solutions and Features🔩

The employee site will offer user account features, including registration, login, and record access with a unique ID number. The user's login credentials will be stored securely in a hash file using the HMAC algorithm. The application will include a user questionnaire, and users can view their previous entries and performance statistics. Users can also email themselves a copy of their report or download it in various formats such as PDF or Excel.

The app will provide a set of features for company (client) accounts, allowing them to view and manage the reports of their users. The companies will have the ability to view individual user reports, download them in various formats, and filter them by name, score, or other criteria. In addition, the app will provide companies with a dashboard to view key performance indicators (KPIs) that are relevant to their business. This will give them a high-level overview of the performance of their users and help them make data-driven decisions. The company will also have the capability to email reports to users, providing them with an easy and efficient way to share the reports with their team or other stakeholders.

Outcomes and Reflections🪄

The high-fidelity prototype shows positive results, with users finding the service to be user-friendly and easy to use. Participants were able to complete essential user flows such as user login and registry, accessing reports and history, monitoring recent activities, managing sites and companies, and uploading new assessments with ease, as expected. The design system is clear and sustainable, making it suitable for future development.

Collaborating with other teams throughout the project allowed me to fully explore the UI and UX design process, from ideation to completion. Through the creation and design of this project, I gained valuable insight into user behavior and how to translate existing information into a user-friendly design language.

Sofvie Design System