The Superawesome design process in 2018. Not so new, but improved.

Taking a look at our new design process, and the current state of the prototyping tools on the market today.

As we're evolving as a studio, so is our process, and up until recently our design process was extremely intensive and compact, in that we — where possible — basically condensed UX and UI design activities into a single phase, and we sometimes even took it upon ourselves to mix in some product design in there as well, where we reconfigured features and/or content.

This is a very fast way to go about things, as you are able to iterate incredibly quickly, and in high fidelity. Unfortunately, it also means that any mistake, inability to understand the problem quickly, or change in scope/product is a rather expensive one.

So far we've been able to — but also kind of forced to — handle things this way, simply because we were a very small team, working mostly on very small, MVP type projects.

However, as the team grew a bit, and the types of projects changed, we're looking into adapting our design process to the new situation, which resulted in decoupling of what we call "UX" and "UI" — and later front-end — phases of the process.

What this means is that each phase has its own deliverable that's passed on to the next phase and used as a starting point. Even though it might seem perfectly logical, it took us a long time to be able to grow into it, and in fact push back on the clients' insistence of going as fast as possible — "Move fast and break things", anyone? — and put a veto on the time we require to make better design decisions.

Moving fast and breaking things is OK until it's not. Condensing a lot of design decision making makes the process efficient only if the starting point is complete and thorough understanding of the matter, and all sides are able to communicate effectively on such a high-level.

It all comes down to solving one set of problems at a time, instead of doing it all at once. We found that sometimes time was lost due to communication issues, things being took for granted and taken as defaults when in fact they were very much open to interpretation, and so on. In a lot of cases, clients had a rough time keeping up with the project due to not being savvy enough, or simply having too much on their plate.

Let's take a look at a very basic generalization of this new design process, which obviously is adapted to suit each project individually.

The new Superawesome design process.

Phase 1

Analyze and understand the project, and the users. Identify the potentially missing features or content, and suggest changes to required ones. Gather, and describe the content and/or UI elements. Design wireframes and user flows (lo-fi prototypes), and distribute said content and UI elements.

Activities

  • Research
  • Product development
  • User experience design
  • Content mapping

Goals

Single source of truth regarding product design decisions in terms of low fidelity mockups and clickable prototypes, and content specification.

Phase 2

Based on the decisions made in Phase 1, the project can enter its high fidelity design phase, in which the designers can safely rely on the research and content supplied, and the product design decisions made earlier.

Activities

  • Branding
  • User interface design
  • Illustration

Goals

A design system composed of high fidelity mockups, and/or branding assets.

Phase 3

Considering that the high fidelity designs have been signed-off on, we create what we call "static templates", which are basically hi-fi mockups translated into HTML/CSS/JS code. This is obviously assuming that the product is web-based, and considering the circumstances, we might integrate these templates into a CMS such as WordPress or Grav.

We will also perform quality assurance against various browsers and devices and make sure things are functioning smoothly, and that the user experience is optimal against the terms such as time allotted/remaining, budget, etc.

Activities

  • Static front-end development
  • CMS integration
  • Quality assurance
  • Deployment

Goals

A fully functioning — although static — UI as a single source of truth regarding the design as a living, usable system.

A note about static templates

We believe that our job as interface designers of primarily web-based products is best done if we implement the UI ourselves, since we have the capabilities to do so. This means that the time we would spend writing design specification to hand off to other developers can actually be used to develop the UI itself.

The end product is better because your developers have a finished and fully functioning UI to work with, and implement into their environment as-is, versus using a design spec document to figure out the design system's components, mess with frameworks, implement animations and transitions properly, etc.

This is why we call it "static", as we don't go as far as to connect it to a database, or make it dynamic. We rather simply mock up the content and behavior with dummy static data so the customer and the developers can know how the UI should behave.

Our new design process separates activities in logical phases which allow for back-and-forth, so unlike a traditional waterfall methodology we allow ourselves to take a step back from time to time to rework an area once our understanding of the problem is greater, or things are accidentally overlooked and missing.

Prototyping & getting the right tool for the job.

Going back to the Phase 1 of this new design process of ours, we're now faced with a need we didn't have before, which is choosing a new tool to add to our arsenal.

Before, the only prototyping we did was literally by hand, sketching out extremely messy and lo-fi wireframes and creating user flows, thus figuring out how our UIs should work. We rarely showed these wireframes/user-flows to customers as we considered them a byproduct of our design process, rather a deliverable. It was just a step towards a higher goal.

Now that lo-fi design is a proper deliverable, we need a nice tool to help us get that job done, which is why we researched the market and put together a thing where we analyzed the tools and services we found would fit us the best.

You can find the results in the Airtable base embedded below. If you are in a similar situation that requires you to do similar research, please share your comments or findings with us via Twitter.

Next up