OVERVIEW

This is a conceptual piece for Immunization Summary App. This app provides data visualizing of national immunization systems.

Problem statement

The application suffers from inconsistent IA and navigation.  This is problematic because it prevents the user access to and easy understanding of the data; the core value of the app.

Goal 

Redesign the app for a tablet with easier and delightful navigation that enable users to learn about global health data. Optimize its functionality and add new features to help meet business and user needs, design to be used on the field.

Current tablet app

Final prototype

The final prototype provides users an app to focus on a tablet format. Where they can easily access and learn more about global health data. Which allows them to create their own graph.

Approach

Our team: Kamila Product Manager / Michael Researcher / Ale (me) Interaction designer.

The first challenge was to discover the core value and the main user of the app. The app is designed as a complex tool, so the value of being mobile is not clear at all. After a lot of team sessions, research from Michael (user research), and an overview from the current design, we decide to redesign the app focusing on enabling the user to visualize health data in a simple way, that could be also interactive. Having as the two main outputs; viewing country profiles and making graphs with global health data.

Through multiple group sessions, whiteboard workshops and iterations we crafted the baseline of the app that included business goals and design with research.

Data visualization is extremely interesting, especially nowadays where humanity makes more data than we can possibly imagine, but we do make it understandable in an easy and accessible way to everyone. This project provides us the opportunity to learn, search and design different ways to approach data visualization.

Achieved the goals

With research findings provide by Michael, I start sketching and prototyping in early stages to define simple navigation, that helps users to access and understand global health information, with the possibility to export and share Assets like graphs.

Persona

Michael, defining 2 personas and set a scenario for the main one. So I started designing for Dr. Alexis Beatty a Field Epidemiologist at the World Health Organization in her mid-30s. Devoted to improving population health on a global level, who travels to different cities to teach common people about Health.

Steps: design

Design process

I started doing research of other apps for data visualization, and iOS tablet guideline for the wireframes design. Many apps make concrete graphs with concise use of colors, which make them more learnable and appealing. 

With this information, I develop a color palette related to the health industry and grays Tech industry. And started sketching.

Basically, the app sitemap has two main branches of information so I design one user flow focusing on our proto - persona and a scenario provided by Michael.

USER FLOW  & SCENARIO for DR. Alexa Alexis Beatty

I develop a user flow which focuses on the primary persona, Dr. Alexa. for understanding the golden path she needs. Then a develop wireframes for the main screens, for which we asked for feedback and iterate, being able to test the design at its early stages and create a first for a paper prototype-based. So I jump to develop the screen in between.

Before, there were several pages to access the country profile. In the new design,  the content and the IA in a way that allows users to access easily, to all the information, by loading one screen, design with tabs that contains all the information as; main country information, health publications, number and years of disease cases, among others. 

Also, I defined the different input fields like a prescriptive search box, for searching countries, in addition to the country list and choose from a tappable map.

We knew the users wanted an interactive graph so the could customize the data visualization: I started by sketching a body section which contains the graph and a sidebar where you modify the inputs. To evolve the concept I researched different solutions for conventions, designed a paper prototype with a text box, prescriptive search and radio buttons depending on the information required, for user testing validation. Also, I design a bigger call to action button so it was clear how to view new lines.

The most challenging and interesting finding during the iteration process was in country profile and new graph as we could expect because they were the most complex screens.

COUNTRY PROFILE screen

Showing data, using headers and providing clear interactive features options and input controls were the main things to solve.

For the first sketch of the screen, the idea of tabs needs to be resized and need to solve country search. So for the next wireframe text was resized, which allow viewing the real space for body content. The header was added, and we add a prescriptive search input field, to make it easier for users.

Users can select a country by :

• Input control

• Go to list of countries

• Go to the map

So if you choose a map, you are going to land on a touchable map to select the country of interest. As this app is intended to help people learn, we provide an interactive way to learn more about countries without knowing the name of them. The information will be provided by the same layout of tabs.

For this section, you can click on the icon and you can go directly to the graph screen, but in user testing, we get to found that people click also in the name maybe because the icon was too small. Also, I add the color orange to make it pop-up and using in the button and interactive features.

NEW GRAPH screen

For the new graph screen, our main iterations were about the sidebar, and making clear the interactive features.

I define the 2 mainframes; the body content was the graph and a sidebar with the information needed. We decide the content should by organize by  Where, Who, What, When, and I sketch different input controls. 

For the first wireframe, I get to resizes the content using ios styles. I add the name of de graph and for the right sidebar, I research for effective input controls, selecting prescriptive search for where inputs, dropdown for who, radio button and dropdown for what and text bow for a year. I also add a clear call to action button.

For this screen, I also add the color orange for the button, and a share icon, as users want to import the graph they've created. I also change de add country as we realized with user testing that people would add one line at a time. Finally, we correct the visuals for the swipe of the sidebar because user thought it was a scroll.

With users testing findings I add headers and change the colors of the active information on the input controls. We also discover the need for new features so we decide to add a bubble text on the dots of the line where you can see basic information and a link to publications if there is one. Finally, I add a link to the country name in the legend, so users can see it's profile.

After the prototype, I also design the first approach to UI, including the color palette, the last feedback of the user testing especially in the simplification of the legend, which you can delete lines of the graph and go to country profile.

Conclusion

Our results

Michael conducts several quantitive user testing which demonstrates that we improve the usability of the app. Helping people understand the value of them and learn about health data.

System Usability Scale (SUS)

• ORIGINAL testing results: Average: 25.6% / Grade: F “I feel like you have to try to be this bad.”

• REDESIGN testing results: Average: 68.6% / Grade: C “Doing ok, but could improve.”

Next steps FOR THE APP 

1. Conduct research with more primary users

2. Develop wireframes for additional flows to test existing features

3. Test and validate additional new features taking into account; Analytics, Risk estimates and Further stratification of indicators.

Most important things I learned

• I believe we had a great challenge to solve, and is really important to set business and users goals first to start in the correct direction, even though you change it after while your research proves.

• I realized that have an organized agenda with clear task and objectives is critical to divide work and responsibilities so you manage to have good teamwork.

• I realized choosing the correct box selection is the core of designing user's interaction. This issue also is also validated through the users so it’s really important to test it. And that this only thing is science on there own.

• I would like to have more time to search for more ways to show data. As it is a lot of hard information if you are able to show it in the correct way it could actually become really empathic to people.

"The most surprising found is how by the correct input controls and interactive features users can navigate the app in a fluid way."