flo

How might we test a business idea for a mature brand?

Mercedes-Bnez R&D - smart

Mercedes-Benz Research and Development had an idea they wanted to test in market. Speed was key. Yet it was also a polished brand and it had to look and feel like a Mercedes-Benz product. The team would have to streamline development without compromising the brand.

2016 Sept - 2016 Dec Role: Lead Designer UX UI + designer

React Native MVP


How did we define MVP’?

My project leads and I had an honest conversation about what was possible in their timeline.

I worked with my lead developer, Robin Clowers, to sketch an alternative end-to-end flow. We worked on the whiteboard, assessed each story, and each functionality together.

I chose to communicate our flow with pencil sketches instead of wires. It helped focus the conversation on the goal of the core flow. It had enough fidelity to communicate the purpose of the app but not enough to hyper-focus on a UI element or copy. We needed to agree on the big medium” picture first.

There is a softness to hand-drawn screens and flows. Because of its imperfections, it can show a vision while inviting everyone to take part. It may seem simplistic, but the results are consistent. When people see a perfect line created by a computer program, it can seem indisputable. Drawn lines feel malleable and subject to change. It is often the right tool to use at an early point of a project for this very reason.There is a softness to hand-drawn screens and flows. Because of its imperfections, it can show a vision while inviting everyone to take part. It may seem simplistic, but the results are consistent. When people see a perfect line created by a computer program, it can seem indisputable. Drawn lines feel malleable and subject to change. It is often the right tool to use at an early point of a project for this very reason.

That morning we had all felt anxious. After the call, our team and our clients left the day with confidence and clarity.


Iterative Design in the Build

At Substantial, designers and developers start working on a project at the same time. There isn’t a design phase where developers are waiting for product decisions to settle. The development team needed to know what to work on immediately.

How would I balance the decision making style of a large organization, a beloved brand, and speed?

I have always wanted to try iterative design in working software and this was the perfect moment for it.

How it worked at a glance:

Development track:

  1. Core flow walkthrough with team
  2. Functioning software styled as wired components, establish the navigation model early, do a first blush on any 3rd party dependacies and known unknowns
  3. Story acceptance on functionality and copy
  4. Implement styled components
  5. Implement remaining content

Meanwhile, on the design track:

  1. Core flow walkthrough with team
  2. Page archetypes + UX revisions
  3. Design approval(s)
  4. Component library
  5. Asset creation

With each pass, the team would specify the acceptance criteria. At times these were baseline functionalities. Other times it would be copy or assets.

Trello card with an acceptance checklist, written by Mike Judge (developer)Trello card with an acceptance checklist, written by Mike Judge (developer)

Meanwhile, as design lead, I took a first blush at both the flow and styling. The smart team needed approval from their German counterparts. I wanted to avoid a waterfall process but still had to provide an idea for how it would look and work.

I took the sketches and created click-through wireframes in InVision. In tangent, I identified the screens likely to be re-used—screen archetypes. These would exemplify layout and text styles for the remaining screens. It was important the design communicated what it might be like without tying the team down to exact specs. Positioning them as archetypes provided room for the team to make adjustments.

Both the flow and styling set enough direction to split the remaining design tasks.

First blush at screen archetypesFirst blush at screen archetypes

What iterative design in build” allowed:


Brand

All our development efforts focused on the core functionality. We wouldn’t be able to create meaningful, beautiful micro-interactions. At the time, frameworks such as Lottie didn’t exist. Instead, we added animations through custom designed GIFs (kudos to Paul Norris).


Measurement

I facilitated a workshop with our Mercedes-Benz Research & Development team on KPIs. Customer satisfaction was a key pillar of their brand so I selected Google’s H.E.A.R.T framework by Kerry Rodden.


  1. For the record, by some miracle, we had zero design churn.

#Projects