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.
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.
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
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.
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.
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.
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.
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!
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.