While working on one new feature, as well as one feature that existed inside MyTherapy, I started to notice a common pattern between both.
The pre-existing feature in the app was our medication plan scanning feature. This allowed users to scan a medication plan (only available in Germany), then bulk import these medications into the application and set up reminders. The problem, however, was that if there was a medication that was not matched to our database, then no scheduler would be set up and the user could potentially forget about this medication.
The new feature for the app was bulk medication import. In January 2021, SmartPatient was acquired by Shop Apotheke Europe. Shop Apotheke is one of the largest online pharmacies in Europe. This provided us with an opportunity to gain more users by allowing them to easily set up their recently ordered medications from Shop Apotheke, inside MyTherapy. The early problem we spotted here, was users potentially clicking away from the bulk import page before setting up all the medications, or just clicking away before any medications were set up.
Two new features were requiring a very similar new component:
The idea early on centred around how we could inform the users about the two situations where they could potentially miss a chance to set up an important reminder.
In a previous ideation session, one of my design colleagues had the idea for a clickable action/notification tile. This could inform users quickly about a new feature and take them straight to that feature. I chatted with her to see if she thought it would work well in my case, and we both agreed that it could work.
See below for wireframes about how we could use action tiles for both features. You can open the wireframes full screen and read some of the comments and decisions made along the way.
One thing I am always mindful of when designing a new screen or new component is if this is available on other applications. The main reason I am wary of this is due to the component or screen possibly being completely new to users.
The most component that was similar to this is a standard toast or an alert. The user would probably have seen something like this on both websites and mobile applications. This gave me the confidence to use this component.
There were other examples of the app also using a similar idea, so I felt confident that this wouldn’t be new to users and would be easy enough for them to understand how to use it.
When starting with the component, it became clear early on that this could become something that each team could potentially use across the app. There could be variations allowing our design team to utilise this tile themselves in anyways they would like on the app.
I started to think very systematically about the tile. From the base layers and the minimum content that could be available on the tile, to what would include the maximum content on the tile. I started to see quickly that I could use a basic table layout style from HTML development, to create a component that was flexible in how it was built, and how it could handle everyone’s content in the different features of the app.
It became clear, that with just 5 elements, a nice-looking card would be available on the app.
Before handing it over to our developers, I wanted to make sure that I would have all options possible available. I scoped out all the tile variations I could make with the original base that I had made and got them to work with these.
In total there were 4 major styles, with 19 options of the same tile made for designers to do as they please. This would mean that this component would not tire easily and users wouldn’t they are receiving the same message over and over again. We were also able to ensure this kind of repetition didn't happen, due to our internal design team reviews that we would do. As a team, we could look out for each other and make sure that nothing is repeated too much.
For our Android app we support dark mode as well as light mode. We hadn’t yet integrated dark mode into iOS as of yet, so we didn’t need to worry about that at the time of implementation.
There were a few critical things to remember when we were designing and developing for dark mode, including such things as background tile colour, illustration colours, button colours, text legibility, and how much this tile actually stands out compared to the rest of the normal tiles.
This was a vastly different tile in terms of how it looked, but one that also provided an interesting side to it in terms of also being fascinating in terms of decisions we had to make.
After much back and forth with my iOS and Android developers, we got all the versions of the component in the app. It was an extremely satisfying moment. This was a really exciting component to work on, due to how it could both visually improve the app, as well provide important information for the users.
Once I had worked with the developers to get the tile into the application, I then added the tile to our design system.
Soon after the tile was complete, one of the designers wanted to use it on their section of the app, and they expected a full-size image to also work. I could have also added images as well instead of only illustrations. This would have allowed for a couple of extra options, but also options that were useful to other areas of the app that I hadn’t considered.
The other area I could have improved is the buttons, in the first version I only allowed for one style of buttons, I should have also allowed for the CTA button. The main reason this wasn't considered in the beginning, is because of the area of the app this would be initially included on, the treatment tab, which already has the floating action button on the screen. This floating action button was still the primary action and the main area we want the users to focus on in the treatment section.
In the end this was a really enjoyable component to add to the system. It is being used by a few of the other teams already in the application and its exciting to see it out in the open as well.
