Smart & easy group decision making

How we helped Bizy become a friendly branded web experience you and your colleagues, friends or family will want to use daily

An introduction

Early stage product with incredible potential

Like many of our clients Bizy approached us with an abundance of amazing ideas yet a absence of design and front-end experience. The startup had a rough prototype that showed incredible potential; a platform to collect input and to encourage decision making with a group of people. Whether it's a group of colleagues, friends or family members.

Bizy prototypes

Scope

Creating a game plan together

Although far from perfect the product proposition was clearly a diamond in the rough. Being a team spread out across the globe the Bizy core-team flew over to Amsterdam to create a game plan together with us at the Yummygum headquarters. We set out to design and build a friendly branded user experience to encourage and facilitate group decision making.

Yummygum team working on Bizy
Yummygum team working on Bizy
Yummygum team working on Bizy
Yummygum team working on Bizy

Kick off

Getting everyone aligned first

The entire look and feel would play a major role in positioning Bizy in the market. That's why we decided to dive in head first and kick things off by hosting a 3hrs Brand Sprint at our office to get to the essence of who Bizy is as a brand.

The brand

Beyond just a web application

The key to 3hrs Brand Sprints being successful is the ability of clients to think of their company/product as more than just that. Thanks to the valuable input by the Bizy core team during the 3hrs Brand Sprint we got everything we needed to create a Brand Concept. It included the suggested use of color, typography, photography and shapes and equally important: how they could be applied to the interface.

Bizy brand slides
Bizy brand shapes

Although Bizy chose to stick with their logo we basically were given carte blanche for everything else brand related. We came up with an overlapping theme that included the use of geometric shapes. These shapes represented individuals within a group during group decision making. The shapes were a reference to building blocks that can be stacked to create something new. It referenced progressively working towards group consent and decisions.

“The talented Yummygum team delivered beautiful, responsive UI that helps our complex concepts function simply and elegantly for end users”

Chris Spiller — CEO of Bizy

For whom

Putting a face on 'who' Bizy is for

One things we love about 3hr Brand Sprints is how they help our clients to get aligned about who the company or product is for. The 3hrs Brand Sprint results helped us personify multiple groups of users into three personas.

Bizy persona
Bizy persona
Bizy persona

Style direction

Applying the brand concept

The next step in the process was translating the Brand Concept into something tangible. Of course with the personas in mind. That's where our trusty Style Board came in. Like always it let us communicate the picture we had in our mind for the interface while using a collage of existing designs.

Bizy styleboard
Bizy library

Designing all major touch points

After the Bizy team gave us the green light (accompanied by an enthousiastic response) on the style direction we tackled all major user touch points. As we laid the groundwork for what would turn out to be an inclusive and exhaustive Design Library, we went from bare-bone blueprints in the form of wireframes to pixel perfect designs for the responsive web interface to responsive HTML emails designs to the Bizy marketing website. All covered in the recognizable bold and friendly Bizy look and feel.

Bizy preview
Yummygum team working on Bizy
Yummygum team working on Bizy
Yummygum team working on Bizy
Yummygum team working on Bizy

Crispy clean code

Components; from design to code

We love it when our clients speak the same language as we do! The technical know-how of our client showed early on as they shared the technical requirement document. Bizy had a strong preference for a modern tech stack which was music to our ears.

As we took on the front-end development of Bizy we used React to build components that lived inside Storybook.

Storybook in turn was setup to mirror the Atomic Design structure we created in our Design Library.

Talking to the Bizy team over Slack allowed for close collaboration. Because as we the same time their back-end team was working on the GraphQL rest API back-end we used to breather live into our components.

Star default Star checked
Star default Star checked
Star default Star checked
Star default Star checked
Star default Star checked
Rate this project
function RatingStarGroup({ id, label, updateQuestionsValue }) {
   const [selectedValue, setSelectedValue] = useState(0)
   const [hoveredStarValue, setHoveredStarValue] = useState(undefined)
   function onSelectClick(value, id) {
     if (selectedValue === value + 1 && hoveredStarValue === value) {
       setSelectedValue(undefined)
       updateQuestionsValue(undefined, id)
     } else {
       setSelectedValue(value + 1)
       updateQuestionsValue(value + 1, id)
    }
  }
}

Result

Bizy; a highly usable and delightful web experience

We've laid the UX foundations for an ingenious platform presented in a super clean and easy-to-use interface. We got to the bottom of who Bizy is as a brand and created a one-of-a-kind style direction to match.

Powered by a modularly set up Design Library and a code component library, Bizy has become a highly usable and delightful web experience. All made possible by a collaborative effort with the Bizy team.

Try Bizy for free with your team, friends or family. You will love it!

Bizy website
Bizy UI
Bizy website

Looking for design and development help just like Bizy?

Are you curious to learn more about what we can do for your (web) app like we did for Bizy? We'd love to know more about your product and help you and your team to raise the funding it deserves.

Get in touch