The next beat — or the lessons we learned from evolving the “Heartbeat” project into “Evie by DHZB”.
Luis Martinez & Anja Mück, Strategists at SinnerSchrader Swipe, share the story of how a cross-functional team at Swipe turned the “Heartbeat” product idea into MVP reality. Today, we are happy to announce the good news: “Evie by DHZB” is now available in both Apple App Store & Google Play Store in Germany. In this article, we reflect on the iterations we took along the way.
After finishing the pro bono sprint, we shared the results not only with the Medium community but first and foremost with our Swipe team at home. We knew: as soon as some idle time comes up, we want to take it a step further. And that is what we did: In a small group of designers, project managers & developers it took us two weeks to turn “Heartbeat” into “Evie by DHZB”. But, let’s start at the beginning.
What’s enough research? — a second attempt
In order to generate first patterns and implications for future product development in our testings, we generally aim for a sample of 5 to 8 test subjects — an approach that is backed by Nielsen Norman Group. Unfortunately, during our Design Sprint, we struggled with multiple spontaneous cancelations due to emergency doctor visits which — once again — underlined the severe distress these families are in. Therefore, as a first step, we decided to pay the affected parents a visit at the pediatric cardiology ward. Spending a whole day at the hospital, we were able to empathize with both the parents’ and doctors’ daily experiences in between the grave fate of congenital heart defects and the hopes and possibilities of modern medicine. Here, for the first time really, we fully understood that we had the opportunity to change lives.
“We were right there on the ward. The mothers & fathers left their child’s bedside to test our application and gave honest feedback about our ideas. The fact that we did this onsite kept the testers’ efforts low and gave us additional drive to continue.”
— Melanie Ganz, Director Product Design & Strategy
“This will be appreciated by parents who have more effort to take care of the child anyway. Any help that makes it easier and not more complicated is welcome!”
— test participant
The parents’ feedback was eye-opening: For instance, we learned that one-handed data entry would be a great relief, as users can simultaneously hold their child in their arms while documenting the data. Packed with this and more insights from 5 successful sessions we returned to the studio to take the app to the next level.
From Pipe Dreams to User Story — defining an MVP
While the Design Sprint inspires participants to go crazy and build pipe dreams, the reality mostly looks different. While our testers liked the omnipotent product vision we previously presented, we had to rigorously strip down the scope to what’s achievable within the timeframe we set. In this phase of a project, we love to use the User Story Mapping method, as it does a great job in visualizing and structuring the scope of a product. Our UX Designer Moritz is convinced that this helped a lot when we needed to move from vision to pragmatism.
“The prototype was full of different ideas. While some of them were essential, others were rather nice-to-haves or difficult to implement. The User Story Map and the discussions around it were a necessary step towards the MVP.”
— Moritz Paul, UX Design
We continued by defining the core jobs: transmitting measurement data to doctors in a simplified way and enabling efficient further processing, all with the goal to replace the pen-and-paper process parents are using today. From research, we learned that the bot-like conversational approach was praised for its simplicity, but testers also questioned if the linear way of input would become unhandy in daily usage. Hence, we decided to go for the dashboard approach, keeping the conversational component in our backlog as a potential onboarding. Besides, we significantly simplified the data input itself. While the prototype offered various methods of entering measurements, we decided to go with just one, keeping the reality of the usage context in mind. With an infant on one arm, the app needed to be usable with one hand or one thumb only. A user-centric decision that also saved development efforts. Side Fact: Moritz, who also works as a DJ, got the inspiration for the number picker from the BPM counter of his music production software.
Also, we had to leave out various features in the MVP. Trade-offs that were necessary with regard to feasibility and the Medical Devices Act. For instance, Evie should not interpret values or give feedback itself, but rather leave these important tasks to a doctor. Besides that, we also defined that the app should not be the channel of communication itself, but rather trigger the user’s native email client with a pre-populated email that has the input data attached. The only thing users have to do is to hit the send button.
Iterating the Brand Design — how we evolved Heartbeat to Evie
The Design Sprint encourages goldilocks quality over pixel perfect design, aiming to generate learning as quickly as possible. On the way to a fast prototype, however, often the ‚next best‘ brand design will be used.
“On different occasions, we noticed that while one-day prototypes completely fulfill their purpose in the testing, later they rarely live up to our expectations. That’s why we always plan time for a later refinement of the interface design.” — Sören Knöll, Director UI Design
In the case of Heartbeat, our UI-Designers decided to create a new take on the brand design: Our design exploration focused on making the interface more friendly and emotional, including soft shapes and rounded typography. We also experimented with more illustrative forms of the data input. But again, we had to find a compromise between our vision and feasibility — working closely in a cross-functional team of UI, UX and engineering.
Sena Oh, a UI designer at Swipe, chose a lilac color scheme including soft gradients to convey both positivity & hope whilst avoiding gender specificity. Benefits regarding development effort already in mind, the team aimed for simplicity and ease of use for the dashboard by following the material design guideline.
Secondly, the app name: From Dr Rosenthal, we learned that the monitoring of vital parameters is not restricted to our HLHS use case only, hence we were looking for a more generic app name: “Evie” with its connotation of “life” or “living” was the obvious choice of all our brainstorming ideas.
In the next step, the team took a closer look at the app icon. Since the students’ initial icon depicted a heart-shaped loop that was visually too close to the well-known vacation rental marketplace Airbnb, Sena iterated on different ways to show both the overarching concept of cardiology and the app’s purpose to support child care and treatment.
Flutter to the rescue — serving two platforms at once
Even if your idea is fully validated as a result of the sprint, this is not the time to slow things down. After a sprint, you still operate under high uncertainty — this is why we decided to continue in a lean-startup setup.
As the mobile experts within SinnerSchrader, we often recommend our clients to go for a native app approach as it enables us to stay true to a platform’s interface & interaction standards. But in this case, our developers Mihai Batista and Franziska Neumeister proposed to use a new framework that’s tailored to the very restricted project funding: Flutter — a production-ready framework for mobile cross-platform development based on Dart, that is supported by a vibrant community and backed by Google.
“The benefits of Flutter lie in its ease of use when iterating the UI as well as the final product’s native-like look & feel. The one recommendation we give is to choose the plug-ins with care and be prepared for a new category of challenges.“
— Mihai Batista, Android Development
In Flutter everything is a widget so everything can be reused. Thus, it provides a genuine synergy with the creative department and has a good fit with Atomic Design as you can open a library of components that can be reused across projects. Getting from zero to productive mode in no time is another key advantage, as well as creating an appealing user interface without big effort. This is based on Flutter’s ready-to-use material & Cupertino widgets that can be customized easily for a branded look. And if you ever run into blockers, help is just one thread away: since the community around this framework is young and enthusiastic, finding support is easy.
Putting the pedal to the metal — paving the way to roll out Evie
As you can see, what started as a pro-bono sprint turned into a proper app project. To finance the efforts of development and legal counsel, the German Heart Center Berlin chose to dedicate its yearly charity bike event “Berliner Herzfahrt” to Evie as a hero project. So, we put our computers aside and jumped on our bikes: In a group of 9 volunteers, we turned the money collection drive into an Evie team event. All in all 2,000 participants put their pedal to the metal to drive 16,500 rounds and a total of 66,000 km on the Tempelhofer Feld Berlin. In total, the event raised a staggering amount of 50,000€ that went into the financing of Evie and other projects at the German Heart Center Berlin.
All good things are worth waiting for: Today, we are proud to tell the world that all this legwork has paid off as Evie is now available in both iOS & Android app stores.
A big thank you goes to the whole team involved: Mihai Batista, Melanie Ganz, Raphael Heber, Sena Oh, Moritz Paul, Sören Knöll, Luis Martinez, Franziska Neumeister, Laura Oliver Canada, Stefanie Tremp, Uli Luckas, Julia Gerdes, Thomas Rösch, Nils Grabenhorst, Christoph Mörl & Anja Mück
