Close
Curious about the details? Click to enlarge.
Project Background
When it comes to the sustainable movement our collective habits can shift demands, making our voices heard, and building the future we want.
That’s why Sustaio Founder and CEO Olivia Pedersen, along with CTO Leif Schjeide, created Sustaio — an application that helps people transition their habits to live a sustainable lifestyle. Sustaio guides its users from information to understanding to action, helping them connect the dots of their impacts and track their metrics all while delivering a personalized, self-empowering experience.
Success for our clients meant collaborating with a team of three UI designers in order to launch a minimum viable product where the end-user experience of Sustaio would be well-branded, refined, and impactful.
A glimpse into the previous designs given to us by the clients
"How can we find a stronger hierarchy of how to use all these colors and find consistency so it’s not this loud, noisy brand? It’s more like very colorful and empowering while still being clean, professional, and not overwhelming."
Olivia Pedersen — Sustaio CEO
Kickoff
Based on what Olivia said, the overarching challenge for the Sustaio app was figuring out how we could entice individuals to re-examine their daily habits in order to live a sustainable lifestyle.
Our first step in approaching this challenge was research. We began by asking ourselves:
What does the current sustainability market landscape look like?
To answer this question, we leveraged two research methods to help us gather strategic insights pertaining to the industry, marketplace, and target audience of a sustainability-driven application.
Evaluating the domain involved taking a deep dive into what sustainability is and what the current state of the digital marketplace looks like. Through this, we identified industry and business trends that would guide Sustaio's product development.
Many apps are gamifying sustainability through friendly competition and lucrative reward systems. There are various apps out there to help people live more sustainably, but most of them glitch out or simply don’t offer a good user experience, regardless of their good intention.
On the other hand, analyzing the market provided a way for us to assess the strengths and weaknesses of current and potential competitors within the sustainability sector. Our analysis was done in order to examine products from a visual design standpoint, ultimately allowing us to gain ideas and inspiration for our designs.
We were able to extract insights from direct competitors and indirect competitors as well as analyze two apps that our clients were inspired by.
From these products, we prioritized understanding certain facets such as:
Social competition incentivizes users to earn rewards and brings more value to the user experience
Find a happy medium between the way Headspace presents content (organized and strongly-branded) and the simplicity of Down Dog (photo-heavy, no childish illustrations)
Change doesn't happen overnight — Slowly ease users into making more eco-friendly choices as they progress in the app
Explorations
After gaining a foundational knowledge of the market landscape, we started exploring and experimenting with Sustaio’s existing brand identity. To understand where our clients' expectations were, we wanted to baseline things with a Challenging Assumptions workshop involving the clients.
This workshop yielded an underlying knowledge of client mental models surrounding key screens of the Sustaio interface.
The Challenging Assumptions workshop allowed us to confidently transition into our style tiles, where we explored different themes for the Sustaio app.
In order to validate our style tiles with users, we tested them against a series of desirability adjectives to determine if the overall theme we were intending to convey was coming across.
The UI should be self-explanatory, intuitive, and naturally lead users to learn more about functions and features.
When you just download [an app] and it has pop-ups to show you what to do and where to go, that's always helpful.
Emily H. — End User
Users should know where they are in the app at all times, what each button leads to, and be introduced to unfamiliar industry terms.
[An app] can't have so many features where it's overwhelming. It's better to do 1-2 things well.
Tammie W. — End User
After feedback from both clients and users, I identified a couple of my style tile ideas just weren’t worth the time. This sparked a rather significant design pivot for my team members and I. Looking back at user research and keeping the project's needs in mind, we each created a converged style tile by building onto existing options, as well as exploring alternative approaches, to see if we could determine a design direction for Sustaio.
In brainstorming sessions with the client, we focused on some different ways to rebrand sustainability and decided that maybe trying a dark theme would be useful.
Incorporating the dark theme was a trade-off but we decided that it would allow Sustaio to keep their competitive differentiation in the market.
After solidifying our design directions, my team and I created four design principles. These principles, crafted with the insights we gathered in our initial research, acted as north stars for our first round of high fidelity mockups.
Language, although it may seem minor, can have a huge impact on the overall app experience. Use voice to excite, add personality through humor, and resonate with users.
Be bold — Spark curiosity and allow people to view sustainability through a new lens.
Slowly introduce features so that people have time to get acclimated to the product and progressively disclose information to limit cognitive load.
Don't reinvent the wheel — Sustaio should be easy-to-understand and take advantage of the knowledge users have from other apps.
Prior to starting my designs, I prioritized organization before execution by creating a component library.
Take advantage of storytelling — Users should be able to resonate with and envision themselves through images across the interface.
Few people have long-term memory. Incorporating charts and other graphics allows users to see a visual output of what the app is tracking.
Encourage users to improve their habits and scores with mini CTA’s throughout the app.
Sustaio has to be inviting enough to want users to continue to go down the funnel. Experiment with brand colors more to make the interface feel cool and not overly formal.
Refinements
The user testing key findings helped lay the foundation for iterations. One thing in particular that became abundantly clear after testing was that redesigning the dashboard needed to take precedence over everything else.
"The dashboard should have snapshots or previews of content instead of just links to various pages."
Leif Schjeide — Sustaio CTO
These two artifacts became the basis for my dashboard redesign. One of my teammates took a stab at designing the dashboard early on. He ended up scrapping his design but our clients kept referring back to the card carousels, which is why it became a jumping off point for me.
At this point in the design process, we had to take a step back. As we started to build out more screens, we were blocked by the flows of the application. They simply weren't clear. Additionally, the wireframes we received were not satisfactory to base our designs on. In order to plow forward and try to understand the functionality of the application, I took it upon myself to create user flows and wireframes.
final Solution
Our clients, Olivia and Leif, were very happy with the assets we produced. In a short four-week timeframe, we created a consistent look for the Sustaio mobile application and achieved a strong hierarchy of colors. Additionally, we strengthened Sustaio's usability case by creating user flows and wireframes.
After a live crowdfunding campaign, V1 of Sustaio made its way to the App Store.
Through testing, we discovered that including a bottom nav bar puts valuable pages of the interface within reach. However, this UI element will need more testing as the Sustaio app gets built out.
A majority of users expressed interest in an expanded onboarding process that would allow them to tailor Sustaio to their needs. Ultimately, onboarding must be designed in a way that adds value to the user's understanding of the product.
UI elements should be interactive in order to create a fun learning environment for users. This could be through quizzes, interactive learning modules, and other dynamic experiences. Future designers should explore how they can best deliver educational content in different forms to reduce cognitive load.
As a final step, I created a design system that would enable Sustaio to further the interface after handoff.
Reflection
UI design is not just about designing screens. We failed to fill in the missing information and got caught up in the original scope of the project — providing enhancements and improvements on the visual design of the Sustaio user interface.
It appeared as if everything was well-laid-out for us, especially due to Sustaio's concrete brand identity. In actuality, there were a lot of missing pieces, two of those being the user flows and the wireframes we received. These things should have come first before diving into the visual design and forced me to make a pivot point at a time where I didn’t necessarily have the bandwidth to do so. This is ultimately where I would have adjusted the scope of the project.
Engaging clients in the design process creates moments of collaboration, alignment, and visibility. Throughout this project, we sacrificed moments of communication for moments of work. In hindsight, we should have been open and honest about our concerns, communicating with our clients more often outside of weekly sprint presentations.
Endorsements
"Celine, glad I got to work with you. Secretly I wanted to work with you because I really liked your designs. I can see that you really are process driven, you like to flush things out first, and you're organized — three things I really learned from you. Thanks for always being a helping hand when I had questions and being someone who approaches tasks strategically."
"Celine! So so glad we were on the same team. My favorite thing about you as a designer is your integrity and determination. I love that you value finding the right solutions rather than just any solution. It can be hard when everyone is tired or short on time, but you always choose the path with more integrity. Thanks for keeping my morale high during this phase, for inspiring me to go the extra mile, and for getting me to think of cookies and cream ice cream from time to time."
