CASE STUDY: Koin Rewards, an app for a positive impact
Some context about the project
This Koin Rewards project is the perfect example of the power of creating an MVP (minimal viable product).
Originally the platform was conceived as a cryptocurrency rewards system for a younger generation, giving them complete authority over how they spent rewards collected from various companies. They could choose whether to spend with merchants, or trading and exchanging it like a standard cryptocurrency.
After extensive user research the feedback was clear that people weren't as interested in consuming more as they were in consuming responsibly. We live in a different world now where people want to make a difference and protect this world we all share. The damage of unfettered consumerism is harder to ignore, and people are increasingly looking for ways to make their spending mean something.
The product pivoted around that insight. Now users can search for merchants operating sustainably or making a positive contribution, and collect Koin every time they shop with them through an effortless tracking system connected to their credit/debit card or bank account. They can use their Koin for a plethora of different sustainable causes, including but not limited to: offsetting CO2 consumption, planting trees, donating to positive campaigns, making impact investments, and paying only for sustainable products.
This was a collaborative project. My role was UX/UI designer and user researcher, working directly with CEO Curt Hopkins, COO James Brown, Head of Retail Laura Wynch and Head of Technology Chris Steel.
Services provided:
- User research
- Discovery phase
- Wireframes
- Brand development
- UI design
- Website design and development
- Merchant CMS design
Discovery phase & user research
This is my initial user research based on the Koin Rewards product as a cryptocurrency rewards system. I'm currently working on new research for the pivoted sustainable consumer product. Once it's complete I'll update this section accordingly. I hope you find it helpful and interesting to see our early thinking and research process.
Research was split into two camps: users and merchants. We built user and merchant personas based on conversations conducted over the phone, face-to-face and via video call with prospective users and merchants. It’s all about asking the right questions, and we went through numerous iterations to get the pertinent information that was needed for the first concept of this project.
Personas
I worked directly with the Head of Retail and COO of Koin on the user and merchant personas. My approach is to start with lean personas and then delve deeper. By exploring habits, motivations and what each person would want to accomplish using the product. You can see both the initial concepts and the polished final personas below.
Wireframes
I created job stories [when ____ (situation), I want to ____ (action/motivation), so that ____ (outcome)] for each persona. I then used that information to wireframe various user journeys from onboarding through to spending Koin.
Over the years I've developed my own wireframe UI kit, built up from experience and refined project by project. It lets me put together realistic, polished-looking components quickly. This helps stakeholders visualise the product more clearly, while still giving me the flexibility to adjust and iterate fast when pressure points emerge.
I built the merchant CMS wireframes in parallel with the app, ensuring both sides of the product were designed to share information seamlessly from the start.
Creating Koin Rewards’ brand
Koin already had a logo and a two-colour system in place when I came on board. I've since updated the logo, which you can see below. From those early foundations I developed an entirely new brand.
From the outset the product was designed for a younger, more informed audience. The risk-takers and pioneers who carve their own path. All imagery was chosen with that person in mind.
Working alongside their existing colour system, I introduced bright, kinetic colours. Creating something energetic, cheerful and even hopeful. The idea was to visually reinforce the promise of a better, brighter future shaped by our own choices.
Updated logo
As the product evolved, Koin needed to drop the word "rewards" from their name so they wouldn't be pigeonholed into just another reward product when there are so many out there.
It was a perfect opportunity to update the typeface to something more complementary and iron out the geometric discrepancies (nice way of saying design mistakes) in their original logo.
You may see the old logo on a few images on here if you're curious.
Typography
For this project I used one of my favourite typefaces: Avenir Next. Its versatility across weights and styles makes it an excellent all-round choice for readability and flexibility. It's a natural fit for the range of marketing material the project required.
Iconography
My goal with these custom icons was to embody simplicity and optimism. They represent some genuinely serious issues facing our world right now (e.g. animal cruelty), and I wanted the visual language to feel hopeful and bright rather than depressing.
All icons are pixel-perfect and built on a 48px system, scaling up cleanly depending on usage.
Illustrations
My initial concept was to use the two-colour system to create simple illustrations that would eventually be animated by painting in the watercolours and bringing motion and life to each scene. These are intended primarily for the onboarding and tutorial screens of the Koin Rewards app.
The app is currently completing its second round of funding, and I'll be updating this section with the animated versions once I get the chance to bring them to life. For now, you can see them in all their static glory.
UI elements
Minimalism is my modus operandi when I’m creating UI elements. For this app I created something stripped back, but easy to navigate and understand immediately.
Testing the product
Identifying a few key challenges
As with most projects, integrating third-party coding and banking systems is always the biggest challenge. Luckily I work with smart developers to figure all that out. I collaborate directly with them throughout the entire project so we can tackle any technological limitations together and still make a kick-ass product.
Part of the original remit was to make it an easy plug-in for merchants to add to their existing website. We currently work on Shopify, with plans to roll out across all major e-commerce platforms soon.
Initial findings
After building the MVP and putting it in front of users, it became clear that a cryptocurrency rewards system wasn't appealing to our core demographic. They wanted a more considered way to consume. Buying products and services that helped the world rather than added to its problems.
That feedback allowed us to pivot early, saving significant time and cost rather than investing everything into a product that hadn't been properly validated. I've always been a strong advocate of the MVP process, and it's always satisfying to see it working exactly as it should.
We're just launching the updated product now and I'll be updating this section with new research, testing and results as they come in.
Launching the product & website
The Koin Rewards website was designed and developed in Webflow. My favourite tool for building bespoke websites.
I never use any existing template website designs. I create everything from scratch. This affords me so much more control over the design and development of the brand and website. With new animation functions, I can create some amazing websites in a fraction of the usual time. I also still have the ability to add complex, custom code if necessary.
Beta testing is underway and the app is launching soon. I'll update this section with results and findings as they come in.
Future iterations
Koin Rewards currently integrates with Visa, Mastercard and Shopify. We have plans to expand to Squarespace, WooCommerce, Magento and Wix in the near future. This will broaden the reach for merchants and making it easier than ever for more businesses to get involved.
