BACKGROUND

About

ALLHealth is a smart health device management application that is mainly used to connect the company's medical device devices such as body fat scales and oximeters sold on Amazon to monitor the user's health. At the time I took over, the App was already completed and running in its initial version.

Goals

1. The data charts need to be optimized;
2. The original data cards’ color was boring, now need to add more than 20 new data, and the color should be richer;
3. The data card on the home page needs to add new data description, to highlight the personalization of each data.

My Role

Interaction design, User interface design

SOLUTION

This optimization is mainly for the visual and micro-interaction of data charts. This part is a very important core function in the whole App, but the team members are not satisfied with the current effect. In addition, there is a need to add some new features. Therefore, I need to design in the following 3 aspects.

1. Optimize the presentation and interaction of individual data

Based on actual experience and user feedback, there are a lot of problems with this part:

1. The data curve will be flat when there is little change in the data over time.
2. The data vertical axis (data values) is not very reasonable, need to determine the unit of cut based on specific situation.
3. The horizontal axis (time) needs to be redesigned, at present, if the time span is large, it needs to be dragged horizontally to view.
4. The current data curve is a hard line graph which is not pleasing.
5. It is not possible to view any single day data or historical data in detail.
6. it is not possible to switch to view other data in a page;

Redesign the logic of data charts in relation to time

The difficulty in this part was the need to juggle over 20 types of data and also to accommodate different time intervals. Whether the user chooses a time interval of 1 day or 100 days, the measurement data is displayed with more pronounced highs and lows.

In the new version, I made new interaction rules for the display of curves:

1. The chart is simplified to four horizontal lines, and the curve is fixed to show only the area within the two central horizontal lines, which represents a dynamically changing interval of values.
2. The intervals of the two horizontal lines depend on the user-selected maximum and minimum values of weight for that time period. The upper horizontal line represents the maximum value and the lower horizontal line represents the minimum value.
3. The maximum, minimum, first and last measurements in the time zone are displayed on the curve by default.
4. In the charts, only the time points for which data were recorded are shown. These time points are equally divided into horizontal areas.
5. When there are more than 8 data time points over a period, only the highest and lowest points are shown, the others appear when the user manually swipes horizontally or clicks on them.
6. The horizontal axis displays up to 2 dates: the first recorded day and the last recorded day in the selected time interval.
7. If measurements are taken multiple times a day, then the data for that day in the chart is taken from the last measurement.

This solution perfectly solved the problem of uncertain data and time interval, and also provided interaction solutions for different extreme situations. The solution successfully passed the review of the development team and the product manager.

Optimize chart styles and add click behavior

The original curve graph looks a bit stiff, and clicking on each data point has no effect, so it is not easy to view the data of a specific measurement point. In the new design, the chart style has been optimized and the time selection function has been highlighted. In addition, the effect of clicking on the curve is added, after clicking on the curve, the detailed information of the data point will be displayed on the top of the curve. Meanwhile, when the finger slides left and right on the curve graph, it can also switch to display different data points.

Add measurement details and historical data list

In the original design it was not possible to view the details of each measurement, nor was it possible to view historical data. Both of these features have been added to the new design. There are two specific user flows:

1. Click on a data point in the graph --> go to the history list --> click on a measurement to see the details.
2. Click on the "History" icon on the graph page --> go to the history list --> click on a measurement to see the details.

2. Adjust data card colors and styles

In the previous home page, the color scheme of the data card was simple, a regular blue color and a red color for non-regular display. However, the business needs to add more than 20 kinds of data, if the original color scheme is still used, it will be particularly monotonous. In addition, in the original data card, the charts were line charts, and the interaction logic was not clear.

Creating a data color scheme

Since data is the core information of this App, I matched different colors for different types of data to make it easier to categorize and visually richer. Normal and abnormal states are directly represented by red text.

Adjust the card graph

The logic of the curves here follows the logic of the data charts, i.e., a fixed interval is set in the vertical direction, and the specific value of the interval changes dynamically. Horizontally, it is fixed to show the last 7 measurement points, regardless of the actual time span.

Also the curve style is changed to Soft Vertex and a gradient fill is added below.

3. Add data description

This is a new feature, which is that some important data requires descriptions.

In terms of interaction, I've added icon prompts in the top right corner of each card, which can be clicked to bring up an explanatory pop-up layer. The purpose of using the pop-up layer is not to make this feature too heavy. Visually, according to the color scheme of the data, I designed different themes of minimalist illustrations for each data to enrich the visual feeling of the pop-up layer.

SUMMARY

Challenge

The challenging part of this design was the presentation and interaction of the data graphs. Because the feedback from the company's operation and sales is quite general, and the display of the chart needs to take into account different situations, so it took me some time to experience and refine the requirements. In the end, the solution was unanimously approved by the development team, product and operation.

Highlights

1. The design solution was well received by the team：The solutions for these 3 requirements were ultimately well received by all departments of the company, especially the design of the curve display and the visual design of the data illustration;
2. Efficient work：The entire project was given 2 weeks to complete. Although it took longer on the first requirement, the later visual design part was completed more efficiently, and all designs were finalized in 8 days。