Sprint 4: Transitioning to hi-fidelity and building our component library

With the end just around the corner we decided to ramp up the fidelity for the deliverables for sprint 4. Our goal for this two week sprint, currently in progress, is to create the first version of high fidelity mockups inclusive of design and content. The sprint entails a number of different lanes:

• Designers finishing off the last version of balsamic (low/medium fidelity) prototypes the first week and then joining other lanes.
• Visual & Component Library Creators simultaneously working on the visual patterns and documentation of components
• Content Creators cracking out more content to inform the visual design
• Tech Builder coding the base of the prototype in react.

This sprint what was new for us was a component library. Some people call it a pattern library, others a component library, some even say it’s the just a next level style guide or go further to say it’s a design system. For what we are trying to accomplish we are just going to stick to it as a component library. What is a component library — well it’s kinda what the name suggests it’s a library of components (buttons, texts, tables, sidebars, search bars etc.) that once created can be easily used across your design allowing for efficiency and consistency. Many times a component library get documented as designs start getting finalized. Well we aren’t there, but with minimal time left we also know we needed to get a head start and thus the merger of visual design and the component library.

For anyone in this place here are a few things we did that worked in helping us get started on our first draft of the component library.

1. Work in a team of 2 — it’s much easier!
2. Go through all your screens of your lofi/medium fi (whatever you latest design is) and identify ALL the different components which you have already included in your designs.

Component Buckets

3. Create a list and group them in to larger buckets.

Lofi images of existing components

4. Stick images of the existing lofi element/component next to the component name.

5. Look at inspirations and create a few design options. Work together for the initial session.

6. Discuss it with your partner and make a decision so you can move on. Don’t spend too much time on one component. Remember this is just the first draft, there will multiple iterations once the rest of the team takes a look.

7. Split up the remaining and go crazy designing

8. Regroup with your partner to put it all together

9. Show it to your teammates and then get back to the drawing board for iteration 2.

Currently we are on step 7, step 8 and 9is what we have anticipated. Till now it’s worked out well. We’ve got a style guide in regards to typographical hierarchy and colour scheme. Shipra and Kanika (I) have split up the components and are remotely designing a few options for each component we were allocated.

Here’s a sneak peak at some components coming together in a table.

Sample table component

In the meantime Mika and Tab are cranking out content and Rob is building out the base for our prototype.

Weekly client presenation

We’d like to leave you one other piece of advice, that has worked miracles for us and we wish we had started it earlier. At the end of every sprint, after synthesis we prepare a 5 slide presentation for our clients succinctly communicating what worked, what didn’t work and how we are moving forward. This has enabled our conversation and allowed us to be on the same page. It’s more work — but so worth it!

Till next time,

Team Flux