Case study: Redesigning a health app in under 3 days
A user-interface redesign sprint under 3 days for Helpilepsy, a digital assistant app for treating and managing epilepsy
For the purpose of giving some context and insights on Helpilepsy: it’s a digital assistant made by a Belgian company Epione, that aims to help the treatment of epilepsy, by combining two platforms: a mobile app for the patients suffering from epilepsy and a desktop web dashboard for the physicians treating their epilepsy patients. This sprint consisted in redesigning under 3 days one main feature of their mobile app — the “Diary” section.
In order to start any user interface redesign, I always like to dive deep on the functionality of the software, trying every feature, button and checking every screen in order to be well versed on its core features and main flows. The purpose of this redesign challenge was to focus my attention on the “Diary” section, but a full analysis on the other sections of the app was also needed, in order to properly see how the “Diary” fits within the global scope of the product and how it’s related to the other features.
An overview on the app
Home
The first available tab is the “Home” tab, where the user gets an overview on the statistics from his seizures, plus some information on the notifications that the app sent to him, compelling the user to take action on them. The information under “My seizures” is a cumulative result of the data on seizures reported by the user. This can be done quickly, by using the the “Add” button present on the top right corner and then by using the Seizure option.
Treatments
Skipping for now the “Diary” section, another tab available is the “Treatments”, where the user needs to add his current treatment/medication the he is taking. This is helpful in order to create a series of notifications or reminders, for the medications being taken by the user. There is also the possibility to consult past medications that he took or even future medication, that might be later tested on his ongoing treatment.
Also on the right top corner, we have another “Add” button, which on this context takes us to another screen “Add medication”, where the user can add a new medication, or another dose of any medication he is already undertaking.
Settings
The next tab that follows treatments is the “Settings” menu, with the obvious options that the user can configure on the platform.
These options range from editing the profile, adding on his account the neurologist that follows his treatment, configuring which notifications he should get from his medication reminders to even allowing the user adding an “NightWatch”, a device that monitors seizures and heart-rate. Lastly in this section we get a Support section with a few extra information on Helpilepsy and its legal terms.
Diary
Finally we have the “Diary” tab, which for the purpose of this redesign challenge, will be looked in deeper detail.
As for a first analysis on this tab, we can say that it’s a list of elements chronologically ordered and grouped by day, which in turn are grouped per weekly intervals. Basically, we can say that this section is a sort of a calendar, that contains daily information relevant to patient about his epilepsy condition.
The elements/information, available to be added on each day, are the following categories: “Daily Mood”, “Sleep Quality”, “Medication Intakes”, “Side Effects”, “Notes/Events”, “Seizures”, “Appointments” and lastly “NightWatch Recordings”. Each category is color coded, with it’s own hue tone (except the “Daily Mood” and “Sleep Quality” that share the same blue tone) and inside the block of each category, we find displayed their most relevant information, either by text or icons.
Upon touching on any of these blocks, we are presented with an extra screen or modal that serves the purpose of editing any info or options, plus giving a deeper view on the details relevant to its category.
The same way we see an “Add” button on both “Home” and “Treatments” sections, here is also present one, again on the top right corner, that has the same functionality as the one on first tab “Home”.
In the “Add an Event” modal we can choose between 6 different options: “Seizure”, “Appointment”, “Side Effect”, “Treatment”, “Reminder” and “Note/Event”, each leading to another screen with a form to fill-in all the relevant data.
The last bit of functionality present on the “Diary” tab, is the possibility to filter the displayed blocks per category. This functionality helps the user to focus in one category of data, making it possible to see more days, where the filtered event ocurred, under the same section of the screen.
The Redesign Process
After having a good grasp on the app’s main functionalities, in order to proceed with the redesign, the next step needed was pointing out why this section exists and which key features it needs to have. After this, I could begin to analyze the pros and cons that exist with the current solution. And as last step, a new solution was proposed, keeping the key features intact, but aiming to bring clarity, better UI consistency and ease of use to its main functionalities.
Why is the “Diary” section needed?
To properly answer this question, further research on patients with epilepsy (the main users for the mobile app) should be conducted, to assess their needs and desires, in order to create a truly helpful tool, that ticks all the boxes. Another approach is to create a group of personas, that represent the basic profiles of the main users. Either with one approach or the other, or even combining the two, it’s possible after to take some conclusions, mapping the problem by topics and then later proposing a user-flow with flowcharts, that later gets translated into a user-flow with wire-frames. But within the time constrains of this challenge, we can assume that the present solution already went through these steps and fulfills some of the basic needs.
Moving foward with these assumptions, I could take the conclusion that the “Diary” section, basically serves the purpose of keeping a track on any event relevant to the user’s epilepsy condition, in a chronologicaly way. It’s a sort of an “agenda” that allows him to check on these events by date, in the future, past or present day. Plus, within this section the user can quickly add new events, such as an epilepsy seizure, or a side effect from any medication, which helps the user and his physician to take conclusion on how to optimize his treatment.
Which are its main features and functionalities?
- Daily display of epilepsy related events
- Keeping track of past events
- Reminders of future events
- Filtering the events per category
- Adding new events
- Editing existing events
- Deleting existing events
What works with the current design?
Upon doing a redesign to anything, physical or digital, there is always the temptation to “reinvent the wheel”, but the fact is that in most cases, the framework is already there and just a few tweaks are need.
On this case, can be said that the “Diary” section already fulfilled most of the key features mentioned above and its main structure for displaying the events as a chronological list (basically a calendar list), was well chosen and implemented, giving the user a reasonably accessible source of information, on its epilepsy related events. Also, can be said that the use of color coded categories, creates a good sense of separation between each different type of event. Lastly, the use of a filtering feature on this screen is also an important one, as it gives the user the chance of focusing in one category at a time.
And what is not working so well?
The main problems I encountered with the current design on this section were:
- slow navigation across the information as it needed a lot of scrolling in order to see all the information, which might be a consequence of not having a monthly (or even yearly) overview, that could give the user “the big picture” of all the events, reminders and general evolution;
- the information displayed was lacking hierarchy and proper clustering on the different types of data displayed on screen, which leads to the user being lost or ignoring important data;
- it was not following basic rules established by OS guidelines either from Apple with their “Human Interface Guidelines” (if designing an app on iOS) or Google’s “Material Design” (if designing for Android), which both help on keeping visual consistency across the app, plus giving guidance on how the interaction should be on the app (buttons, different screenflows, etc…), matching it with the operating system.
Bellow are some visual notes I’ve used to pinpoint in detail these problems, plus other visual inconsistencies:
The proposed solution
After compiling these notes and considering all the “pros” and analyzing all the “cons”, I’ve started to come up with the solutions to each point, mostly with hand written notes with vague descriptions, accompanied by some sketching.
During this sprint, the wireframing phase was skipped for the sake of time, as my efforts were immediately focused on creating high-fidelity mockups with the new solutions in mind. Also, by making use of the “Human Interface Guidelines” (only iOS was considered for this sprint) I was able to quickly make some visual choices and use some common iOS interactions mechanisms, that help the user intuitively know how the basic functions work, thus creating less friction upon his first contact with the app.
“The wireframing phase was skipped , for the sake of time as my efforts were immediately focused on creating the high-fidelity mockups.”
The tool of choice for creating these mockups was Figma, as it’s in my opinion, currently, the most advanced and convenient interface-design program on the market, mainly for its features of online collaboration and ability to quickly share any progress with a client.
Behind every design decision taken on the new mockups, there was a direct answer to a negative point made by my, previously shown, “visual notes” document. Some visual inspiration and main structure of the layout was taken from other existing calendar apps. This way I was able mimic mechanisms used on these apps, that provide quick access to the information, on a monthly and weekly overview of all the events.
“Behind every design decision taken on the new mockups there was a direct answer to a negative point made by my, previously shown, “visual notes” document.”
Also, careful attention was taken to the hierarchy of the content, making sure the most important information had the highest contrast and visibility. Efforts were made to create better separation between contents, clustering the information into different chunks of blocks.
What would be the next steps?
Having had only a sprint of 3 days to complete this redesign, the next steps would be fine-tuning every detail on these first proposals (for example: better balancing the amount of information per screen versus the app aesthetics, better managing the white space thus giving the information more room to breath). Also, further propagating these new design guidelines on the app by developing other screens (for example: screen to edit each category of events). Next, would be creating an interactive mockup in order to test the usability of these new ideas and motion flow of these screens. And finally, as with every interface design project, would come the deployment phase of all the assets to the development team.
Hopefully this report should give a good example, on how a real redesign consultancy project works, under real-life time constrains. Like the article Stop evaluating Product Designers like we’re Visual Designers by UX Collective cleverly explains, it’s easier to appreciate visual aesthetics from any concept app in Dribble or Behance with flashy illustrations and pixel-perfect content, but in real life, projects constrains happen, compromises must be made and usability is given priority over visual artifices.
