HVC processes waste and generates sustainable energy from it for more than 400.000 households in the Netherlands. They came to us with the need for a completely new mobile app — one that would replace their old app and act as a personal coach to encourage its users to generate less residual waste every year. I was responsible for visual-, UX design, and prototyping.
We kicked off the project with an analysis phase where we (digitally) came together with the stakeholders to define HMW’s and ideate on possible solutions and features for the app. Doing so, we gained insights into HVC’s needs and wishes, which we confirmed with the persona’s we created before this project and later with real users with a prototype.
After defining all the user stories, we worked on the onboarding. For this part, we had to dive deep into the different situations users might have, which would result in different paths within the onboarding flow. The biggest ones were; users with Diftar vs. users without Diftar, users who don't use the energy service from HVC, users who don't wish to create an account, and users who aren't customers at all.
I designed every single onboarding screen and its states to create a clear overview of all the different paths and see how they would relate to the different user situations.
After testing the onboarding with real users, we concluded that it was too monotonous and lacked dynamism and maybe even fun. So I set out and created an additional screen after every completed step. This addition helped make the whole experience a bit more 'rewarding' instead of just being a formality.
With all the insights we gained from the analysis phase, I mapped out the app's entire navigation structure — for which I also needed to take into account all the different user situations.
The client had a desire for a clean, easy to use, and modern feel to the app that would accommodate the branding provided by Teldesign. I was already familiar with the branding as I also designed the HVC corporate website. So going into this project, I had a ton of guidelines and resources at my disposal.
Throughout the whole app, I used the geometric sans-serif font Circular Std. I was really excited when I first looked into the HVC branding and saw they use the respective typeface as I always tend to go for it whenever I start a new project.
The HVC brand consists of clean and minimal icons designed with small interface applications in mind. However, in some instances, it required custom work, like the navigation icons.
The whole interface consists of widgets. These are blocks that act as teasers to preview information as well as buttons to navigate. They always offer a sufficient touch area.
In some instances, I used images instead of icons. For example, on the additional screens in the onboarding, I placed images consisting of relevant icons to enforce the message, add a little rewarding touch and make it a bit more fun.
Since the app talks to multiple external sources, we needed to think about what the app would show users when data loading takes too long. We decided that the best way to do this is to add various loading states as that would give the user a clear indication of something happening.
The first screen the users see has to be welcoming and should accommodate the core features relevant to them. That's why we start with a welcoming message adapting to the time of the day, and we added a waste calendar; from here, users can see when HVC will pick up their waste. For Diftar users, we included a graph showing how much residual waste they offered and how it relates to their goal. We added locations to see where the nearest containers are. And in the future, energy customers will see a graph showing how much electricity they use.
One question we had to address was; how do we transfer knowledge about waste and sustainability and encourage behavior change? Our solution included swipeable cards throughout the app, giving tips and facts, and letting the users do quizzes about waste.
The 'Afval' screen is where we put everything about waste together. From the calendar to the container locations and a couple of relevant links. Like the dashboard and many other parts of the app, this screen's content adapts based on the user's situation.
Some users live in municipalities where the Diftar (DIFferentiated TARriff) system is applied. In a Diftar municipality, residents pay according to the principle "the polluter pays, the preventer saves". The whole aim of Diftar is to reduce residual waste. And HVC's goal is to incorporate this data into the app and help its users minimize residual waste.
Going a level deeper, we added a section where users can define a goal to provide a maximum amount of residual waste for that year, see their progress, and even see what they eventually will be paying at the end of the year.
The energy screen provides CTA's to subscribe to the energy service of HVC. As I worked on the MVP, the Product Owner wanted a temporary landing screen. Eventually, this screen is going to be much more than that. For instance, it will accommodate energy usage data, a way to send meter readings to HVC, view electricity invoices, and more.
The last screen acts as an extension of the main navigation. It accommodates a collection of settings (account, profile, household information, and notifications), the contact information of HVC, and frequently asked questions.
I really enjoyed working on this project. It helped me understand the key differences between Apple Human Interface Guidelines and Google Material Design Guidelines and the interaction differences between mobile apps and websites. It showed me how attention to the smallest details is essential with mobile apps. They can either make or break the user's experience when not well thought out.
Floris de Langen (Art Direction), Roel van de Wal (UX lead), Eltjo Smit (Product Management), Martijn Houtman (Development), Boaz Poolman (Development), Niels de Ruijter (Development), Nico de Groot (Development), and Raeef Ibrahim (Development).
