UX Process Redesign at an Agency

How I redesigned the UX process at Helios Interactive

From a neglected artifact of the design process to fully ingrained in AGILE sprints, UX has grown and matured at Helios during my time there.

My initial UX design look and feel

The first UX designs that I produced were grey-boxes. They made use of visual hierarchy with a limited palette of grey, white, and black. White was the background, and grays and blacks were used for foreground elements that required User attention. All buttons had drop-shadows (I’m sorry, I know better now). Additional clarity or information was provided by the use of a sidebar of client and developer centric notes.

These designs were reviewed by the designers assigned to that particular project and then sent along to the client as fast as possible.

The first iteration

After proving my worth, everyone agreed that adding UX to our process did in fact save us time and money. Our designers then proposed a redesign of our UX look-and-feel. They posited that the full palette of white-grey-black was too visually confusing, and that Clients were getting hung up on the UX ‘colors’ as opposed to focusing on the interactions and flow of the Experience as designed.

First UX design iteration proposed by designers

The new UX color scheme defined by the Designers was mostly white. White backgrounds, white boxes, with grey ‘select’ states for buttons and such. They were pushing for a more minimalist look, with visual hierarchy shown with line thickness for modals and the like.

Some elements were added or changed: adding a divider between the notes and the screen part of the page, and de-emphasis of the client, project, and title text. Also added was a device title bar that wrote out the hardware and displayed an icon for the hardware being displayed. Page numbers were incorporated for clarity.

Some elements were removed: most noticeably the drop-shadow and the notes legend on the bottom right of every page.

So many lines!

Basically, the UX has been minimized to the point of being too clean to be read easily. All elements compete for you attention, and the whole concept of the notes sidebar makes the UX “…feel like footnotes,” as one of our developers eloquently put it.

Additionally, how UX was integrated into our deliverables and internal processes was piecemeal. Whenever I finished the UX for a given project, I would send it around to our team and try to get feedback from them, and then it was immediately sent to the client. This was completely different than our design and development processes, which were reviewed at set milestones both internally and externally and fully AGILE in implementation with our sprints.

UX Design language

So, where to start? A basic look-and-feel overhaul seemed overdue. After much mood boarding and researching, I concluded that developing a formalized design system would be the solution. A clearer visual language for our UX designs: all elements of the same type would always be represented as the same color. Consistency of color returns to and reinforces the idea that the wireframes are mainly a visual medium. Basically, the wireframes should stand alone and be able to communicate all elements clearly in a purely visual way. Everyone will know immediately when looking at the design what the elements are and how they relate to each other.

Portrait oriented tablet concept

This consistency demanded that I return to a grey palette, which would enable everyone to distinguish and examine all the elements without distraction. The idea being, use color as a tool, not as a distraction. Additional clarity is added by showing the experience hardware and its orientation within the UX design.

A user flow concept

Another way to employ color as a tool was in the revamp of our user flows. By making each separate path a User could take in the application a different color, each was more distinguished and easier to follow.

IX flow concept

Incorporating IX Flows into our UX solved several issues:

  • How to display more of a connection between visual elements and interactions
  • How to promote more collaboration with developers and designers
  • How to separate the UX into a phased deliverable system for our AGILE workflow

Our new UX workflow*

After our internal project kickoff meeting, I begin with the top level user flow and wireframe deliverables. These are free of distracting text that really get the client to drill down into the basic elements of every screen of the experience. After client approval of those barebones layouts, I then add in the button triggers, feedback, and rules as a second deliverable. This approach innately requires closer collaboration with our designers, developers, and animators as an artifact of its implementation. Collaboration is what UX is all about!

*These new UX IX screens only work with non-360 degree experiences. To read about my workflow for 360 degree AR and VR experiences, click here.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s