Illustration and UI for Ecologi's sustainable impact achievements
Skills: illustration, iconography, ui, ux, web design, responsive design, concept work, ecrm/ email marketing, social marketing
How can we encourage members to visit their profile more frequently?
Once members had signed up, we needed to find a way to encourage people to return and interact with their profile more frequently. We wanted to gamify the experience of sustainable impact by rewarding members who achieved certain milestones, for example planting x number of trees or referring x number of people. With this in mind, we implemented a badge system, taking inspiration from apps such as Nike Run Club and Duolingo.
I decided to base the style on the Ecologi mountain scape, using the brands core colours as the main base of the badge. For me it was important that each set of achievements had their own individual, unique identity, so I used the badges silhouette as the key differential within the artwork.
Once the set had been finalised, I then began working on the product implementation, coming up with a page layout and modal designs along with supporting marketing and social assets. I wanted the page to feel like a sticker book, I did this by making all of the achievements visible but implemented a locked state to help encourage members to unlock and fulfil milestones as they progressed on their journey with Ecologi.
Illustration Process
Research - Exploring similar functioning apps such as Nike Run Club and Duolingo, as well as a broader search on Dribbble to get a feel for current trends
Sketch - This works hand in hand with the research phases, sketching down rough forms, potential layouts, and shapes that could form the basis of a few ideas.
Quick digital mockups - Once I have something in mind I digitise an array of ideas and concepts. Working quite quickly, it here where a few ideas really starts to take shape.
Review - Pick a route and style, then develop it further by looking at the form and details within.
Deliverables - Really adopt the style we’re looking for and push it across the suite of badges
Rationale
With the brand expanding into multiple countries internationally, it was important to keep the wording on the badges to a minimum to eliminate any problems with accessibility. I chose a cleaner styled badge solely using numbers opposed to text, eliminating any need to artwork a different badge for each language Ecologi members may require.
Modal considerations
Make dismiss controls visible
Add explicit ‘Close’ / ’X’ button at the top right corner of the window.
Add explicit ‘Close’ / ’Cancel’ button to the bottom of the modal window.
Support click/tap outside the window to close the window.
Size & Location
Don’t use more than 50% of the screen for the overlay
Content should fit the modal. If a scrollbar is needed, consider creating a new page instead.
Scrolling should be avoided. When scrolling is required in cases such as mobile, the title is pinned at the top, with buttons pinned at the bottom. This ensures selected content remains visible alongside the title and
