UI Refresh

A place where the team can explore and align on design decisions.

IMG_3486

Design debt increasing

Designers are often working on different projects. As such, we began noticing inconsistencies in the UI that we've designed for the same purpose.

new-vs-new

Vision and goals

My vision for the Design team was to come up with patterns that would allow for consistency and efficiency.  I wanted to have the fundamentals of our system ingrained in our thought processes and workflow, and equip our team with the tools to operate more autonomously.

My overall goals were for Design to be on the same page when creating and and to build a UI Kit with a fresh look.

So what happened?

We implemented a recurring UI Refresh meeting where each meeting would strive to achieve the two goals said previously.

We extended our current design system's flexibility for designers by creating an environment where we could play around with the concepts generated from the UI Refresh meetings.

To keep in line with our food related themes, we called this playground “Test Kitchen."

Production ready and shipped

From previous design debt work we've done, we had an inventory of all of the UI in our product, separated into categories.  As you might imagine from a 10-year-old product, there were a lot of inconsistencies to address.

I chose to focus the team on work that was relevant to whatever project they were working on at the time. I also took this opportunity to keep an eye out for any discussions around UI during critique sessions.

What's highlighted below are what we were able to ship in 3 months.

toasts-2
button specs 2
wizards 2

Exploration

I knew going in that not everything that we worked on would be shipped. Such things as experimenting with a reduced color palette, or using our newer UI patterns from the wizards and including them into our reporting feature were toyed with. Nevertheless, I intentionally pushed our team to continue working on ways to push our design forward, seeing this as an opportunity to challenge us and keep consistency and design top of mind.

color-palette
reporting

Learning along the way

LIke any new process, there was a lot to learn from what was introduced so we had a lot to grow from. We knew we had a couple of open questions at the start:

  • Where is the most efficient, impactful place to start
  • How do we navigate through technical constraints?
  • How emotionally attached will we be to some designs?

We also needed to figure out how to maximize the limited amount of time (1 hr/week) as well as figuring out a process/streamlining adding to our design system.

But overall, this exercise allowed our team to grow in our skills as designers, and to think more critically about our UI and brand look.