Maker DAO

Financial dashboard for stable crypto coins

Zero to <b>one</b>

Bringing a dashboard product and it`s financial functions to life.

Custom <b>Illustrations</b>

Unique picture language for onboarding and modal dialogue experiences.

MakerDAO

Visit website

INDUSTRY

FinTech

Timeframe

6 weeks in 2017

TEAM

Design Lead
UX / UI Designer
Illustrator

Product Design Web

About the project

In an unsteady market, Maker DAO envisioned a way to create stable crypto coins. We supported their efforts, creating a digital product out of an idea and a set of tables – making it understandable, functional and fun for their users.

<section class="padding-largest no-padding-bottom module-portolio-detail-headline"> <div class="wrapper"> <h2 class="l-text center"> <span class="color">Turning a business </span> <br class="not-on-s">idea into a digital service </h2> </div> </section> <section class="section modular-portfolio-detail-list"> <div class="wrapper portfolio-detail-list"> <div class="item flex-container reverse-order"> <div class="flex-item-left img-mobile"> <picture> <source media="(max-width: 767px)" srcset="https://boanastudio.com/user/pages/04.cases/maker-dao-crypto-finance-dashbaord-ux-ui/02._tiles-product/mkrdao_workshop-1x.jpg" /> <source srcset="https://boanastudio.com/user/pages/04.cases/maker-dao-crypto-finance-dashbaord-ux-ui/02._tiles-product/mkrdao_workshop-1x.jpg 1x, https://boanastudio.com/user/pages/04.cases/maker-dao-crypto-finance-dashbaord-ux-ui/02._tiles-product/mkrdao_workshop2x.jpg 2x" /> <img src="https://boanastudio.com/user/pages/04.cases/maker-dao-crypto-finance-dashbaord-ux-ui/02._tiles-product/mkrdao_workshop-1x.jpg"> </picture> </div> <div class="flex-item-right"> <div class="vertical-middler"> <h3>Product vision workshops –<br> Identify functions and use cases</h3> <p>UX concept workshop with the product team in our garden office. We clustered data sets, created function groups and grouped application scenarios in order to invent an interface in the next step.</p> </div> </div> </div> </div> </section> <section class="section modular-portfolio-detail-list"> <div class="wrapper portfolio-detail-list"> <div class="item flex-container"> <div class="flex-item-left"> <div class="vertical-middler"> <h3>Turning a datalist <br> into a digital dashboard</h3> <p>In several layout steps, we structured the user interface around a compelling dashboard and gave the user the ability to easily perform financial actions.</p> </div> </div> <div class="flex-item-right img-mobile"> <picture> <source media="(max-width: 767px)" srcset="https://boanastudio.com/user/pages/04.cases/maker-dao-crypto-finance-dashbaord-ux-ui/02._tiles-product/mkrdao_dashboard-1x.jpg" /> <source srcset="https://boanastudio.com/user/pages/04.cases/maker-dao-crypto-finance-dashbaord-ux-ui/02._tiles-product/mkrdao_dashboard-1x.jpg 1x, https://boanastudio.com/user/pages/04.cases/maker-dao-crypto-finance-dashbaord-ux-ui/02._tiles-product/mkrdao_dashboard2x.jpg 2x" /> <img src="https://boanastudio.com/user/pages/04.cases/maker-dao-crypto-finance-dashbaord-ux-ui/02._tiles-product/mkrdao_dashboard-1x.jpg"> </picture> </div> </div> </div> </section> <section class="section modular-portfolio-detail-list"> <div class="wrapper portfolio-detail-list"> <div class="item flex-container reverse-order"> <div class="flex-item-left img-mobile"> <picture> <source media="(max-width: 767px)" srcset="https://boanastudio.com/user/pages/04.cases/maker-dao-crypto-finance-dashbaord-ux-ui/02._tiles-product/mkrdao_Fintech-functionalities-1x.jpg" /> <source srcset="https://boanastudio.com/user/pages/04.cases/maker-dao-crypto-finance-dashbaord-ux-ui/02._tiles-product/mkrdao_Fintech-functionalities-1x.jpg 1x, https://boanastudio.com/user/pages/04.cases/maker-dao-crypto-finance-dashbaord-ux-ui/02._tiles-product/mkrdao_Fintech-functionalities2x.jpg 2x" /> <img src="https://boanastudio.com/user/pages/04.cases/maker-dao-crypto-finance-dashbaord-ux-ui/02._tiles-product/mkrdao_Fintech-functionalities-1x.jpg"> </picture> </div> <div class="flex-item-right"> <div class="vertical-middler"> <h3>Implementing financial functionalities <br> such as deposit, withdrawl, etc.</h3> <p>Making crypto features transparent and easy to get is key to reaching new markets. We designed all user flows to follow the same patterns and added subscriptive text and images.</p> </div> </div> </div> </div> </section> <section class="padding-largest no-padding-bottom module-portolio-detail-headline bg-grey-05"> <div class="wrapper"> <h2 class="l-text center"> <span class="color">Selling the product - </span> <br class="not-on-s">website and illustrations </h2> </div> </section> <section class="section modular-portfolio-detail-list bg-grey-05"> <div class="wrapper portfolio-detail-list"> <div class="item flex-container"> <div class="flex-item-left"> <div class="vertical-middler"> <h3>Enhancing the crypto journey <br> through tailored illustrations</h3> <p>Engaging illustrations and icons served to shape the brand and articulate values.</p> </div> </div> <div class="flex-item-right img-mobile"> <picture> <source media="(max-width: 767px)" srcset="https://boanastudio.com/user/pages/04.cases/maker-dao-crypto-finance-dashbaord-ux-ui/04._tiles-website/mkrdao_illustrations-1x.jpg" /> <source srcset="https://boanastudio.com/user/pages/04.cases/maker-dao-crypto-finance-dashbaord-ux-ui/04._tiles-website/mkrdao_illustrations-1x.jpg 1x, https://boanastudio.com/user/pages/04.cases/maker-dao-crypto-finance-dashbaord-ux-ui/04._tiles-website/mkrdao_illustrations2x.jpg 2x" /> <img src="https://boanastudio.com/user/pages/04.cases/maker-dao-crypto-finance-dashbaord-ux-ui/04._tiles-website/mkrdao_illustrations-1x.jpg"> </picture> </div> </div> </div> </section> <section class="section modular-portfolio-detail-list bg-grey-05"> <div class="wrapper portfolio-detail-list"> <div class="item flex-container reverse-order"> <div class="flex-item-left img-mobile"> <picture> <source media="(max-width: 767px)" srcset="https://boanastudio.com/user/pages/04.cases/maker-dao-crypto-finance-dashbaord-ux-ui/04._tiles-website/mkrdao_website-1x.jpg" /> <source srcset="https://boanastudio.com/user/pages/04.cases/maker-dao-crypto-finance-dashbaord-ux-ui/04._tiles-website/mkrdao_website-1x.jpg 1x, https://boanastudio.com/user/pages/04.cases/maker-dao-crypto-finance-dashbaord-ux-ui/04._tiles-website/mkrdao_website2x.jpg 2x" /> <img src="https://boanastudio.com/user/pages/04.cases/maker-dao-crypto-finance-dashbaord-ux-ui/04._tiles-website/mkrdao_website-1x.jpg"> </picture> </div> <div class="flex-item-right"> <div class="vertical-middler"> <h3>A one-pager <br> to promote the beta version.</h3> <p>A simple website was created to launch the new dashboard. We contributed design, copy, images and HTML/CSS.</p> </div> </div> </div> </div> </section> <section id="cta-your-project" class="section padding-largest modular-call-contact "> <div class="wrapper"> <div class="flex-container"> <div class="flex-item-left"> <picture> <source media="(max-width: 767px)" srcset="/user/themes/boanastories/img/sales/s-profile-j2-mobile.jpg" /> <source srcset="/user/themes/boanastories/img/sales/s-profile-j2-1x.jpg 1x, /user/themes/boanastories/img/sales/s-profile-j2-2x.jpg 2x" /> <img src="/user/themes/boanastories/img/sales/s-profile-j2-1x.jpg" alt="Johannes Holl" /> </picture> <a href="https://boanastudio.com/team/johannes-holl" class="xs-text text-grey-60 image-caption"><b class="bold text-grey-40">Johannes Holl</b> <span class="not-on-s">• </span>Managing Director</a> </div> <div class="flex-item-right"> <div class="text"> <div class="headline l-text"> <span class="color">Let’s talk about</span><br>your project. </div> <div class="teaser n-text text-grey-60"> We can help reduce complexity and identify quick wins upfront. </div> <div class="actions"> <a href="https://boanastudio.com/contact" class="button primary">Get free consultation</a> </div> </div> </div> </div> </div> </section>