Helios Interactive UX Redesign 2018

 

Reinventing our User Experience Design: From UX to IX

How my UX design has evolved working as the UX Designer 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 two years here.

When I was first hired, the designers were the ones handling all of the wireframes. I was brought in as a way for the designers to be able to focus on what they do best — designing great-looking interfaces; while I was to focus on the task of the UX design for our projects. A unique role, since these projects include everything from touch screen displays, mobile, and AR, to VR experiences for all types of head-mounted displays.

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.


Now several months have passed, and I as the UX Designer have noticed room for improvement with this current design.

  • White on white is hard to visually parse
  • Having only black lines in user flows makes it hard to distinguish alternate flows
  • Not explicitly showing hardware is extra cognitive load for anyone reviewing the UX
  • Wireframes are inherently a visual medium, and the sidebar detracts from the elemental layout
  • No one reads the notes
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.


How I improved our UX inside and out

The biggest constraint for our company’s UX design is that I am a team of one. Any changes I proposed needed to still be implementable by me in a rapid schedule that was quick to update and didn’t sacrifice clarity for aesthetics.

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.


In keeping with making our UX a more visual deliverable, I struggled with how to remove the ‘sidebar’ approach that we had previously been employing. Sure, labeling buttons was one easy fix, but what about more complex interactions? What about animation transitions or rules for timeout modals? I came across this wonderful article by Havana Nguyenabout Interaction (IX) Flows, and it opened my eyes to the missing piece that would solve our UX problems.

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 deliverableThis approach innately requires closer collaboration with our designers, developers, and animators as an artifact of its implementation. Collaboration is what UX is all about!

After two years, I believe that our UX has finally matured into a serious and deliberate part of our process. There has been a lot of fun and learning along the way, and I’ll keep working to refine and improve it.

*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 )

Google+ photo

You are commenting using your Google+ 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