The Environment
Lay of the land.
When I came onboard, I inherited a design that had been created by two part-time contractors, one working in Adobe Photoshop and the other in Illustrator. Although there was a fully functional product, the design was scattered across numerous disparate iterations with no consolidated design system library in place. My early days consisted of squashing UI/UX fires as I created solutions for seemingly random requests shrouded in ambiguity. Eventually, over time, I was able to reign things in by advocating for and employing a process for tackling changes in a more structured manner.My team was primarily comprised of a Product Owner, a Front End Dev, three Back End Devs and one QA. I was charged with owning the end to end Product Design, inclusive of UX/Research.
Fortunately, I tend to thrive in ambiguity.
FRAGMENTED SOURCE FILES
The existing design had been created by two different contractors, working independently across two different graphics applications. My expertise at consolidating the strengths of each effort resulted in a new and uniformed path forward.
NO RESPONSIVE LAYOUTS
The current state of the product was a static design that did not emulate modern web applications. There was no development in place of flexible layouts. This had to change!
DATED DESIGN
The visual design of the product was dated. It lacked much of designs' best-practices that users had come to expect as seen on other robust web products.
The Challenge
Did I mention the ambiguity?
Approximately 6 months in, I was asked by the CEO to do a complete visual redesign of the 4D Studio application. He had two primary objectives – “take it to the next level” in regards to the visual design and identify any potential user experience improvements along the way. Being the key stakeholder, his word was law. Additionally, I was balancing individual requests from other stakeholders. At this point in our history, our company was undergoing rapid growth and change. People were coming and going while our company's focus was evolving. On any given day, I could walk into work and discover I had a new directive. Change was the norm. It was crazy. It was exciting. I thrived!
Designing for the "Chief Executive User".
Naturally not being a target user myself, I knew I needed to observe real users and learn from them directly. Learning comes from not only observing but talking to users to identify their real-world problems and pain points. Unfortunately, I had little support up the chain as to the value of user testing. "I am the user. If it works for me, it will work for our customers!" is what I was told. Of course, I couldn't dismiss his view all together. I had to get strategic.The target users of our software were known. We had a number of paying Fortune 500 clients. However, access to them was limited. I had to get creative in order to gather real data and distill it into actionable insights. Under these constraints, I used any opportunity to engage with users to get a concrete understanding of their needs and desires. On one occasion, I “crashed" our 4D World Expo event at corporate headquarter and observed and interviewed every attendee that was willing. I made some important connections that would come back to serve me again later (in this story). Armed with my newly acquired findings, I was able to return and use them to assist my decision making and tune my design direction.
Just another day at a startup.
Assessing published work
Interviewing a user
Observing the use
The Goals
Listening to their HEART.
It was time to establish the focus. My primary goal had been communicated – make the application visually more appealing. But what cues and metrics would I use to determine I reached this goal upon completion? An obvious signal would be that our CEO’s attitude towards the look was more positive/favorable. Hearing him praise the outcome, time and time again, would no doubt represent happiness. However, our user's goals were more engagement and task-centric. Actually measuring successful behavioral change for them would be more elusive. By synthesizing their goals from my gorilla research, I had an a lens through which I could measure success by not only how it looked but how it functioned. Emotional design is one thing, intuitive user experience is yet another.Additionally, a core (internal) goal of mine on this project was to adopt a common visual language – based on components – across both design and development. It was essential that a Design System Library be created along the way, containing all elements and components as the single “Source of Truth". From this we would have a common language to speak so that nothing was lost in translation during development and future iterations.
User Goal: Improve the design of the animation feature so that it is simpler, more intuitive and has fewer required steps.
Cue: Users are able to quickly and without assistance, create animations of their elements.
Metric: Compare before & after interviews to determine users understand the feature better and that they are successful with their attempts at using it (Engagement; Task completion).
How could we make the animation feature more recognizable?
How could we anticipate the user's initial intentions and behavior?
How could we present pre-built features that speed up creation tasks?
How could we extend functionality with saved user defaults?
The Approach
Charting a path forward.
My intention from the start was to have the design direction draw inspiration from the Augmented Reality end-user experience. Through the use of transparencies, overlays and subtle design color cues in the UI, the user's engagement would be on the AR screen they were designing, not the software’s UI. This approach would allow for the UI to fade into the background, thus floating the authored content up, to take center stage. The color palette was simple, clean and professional. Multiple color palette variations were created, compared and contrasted and ultimately presented for approval.By coalescing around a primarily monochromatic scheme with the injection of our company’s brand color for focusing the user's attention, the end result was serious yet approachable. Subtle user experience feedback mechanisms were sprinkled throughout to heighten engagement and delight.
Options, anyone?!
The Visual Design
A shiny new user interface.
The authoring interface consists of two core screens. The first allows the user to set up their project with steps and tasks. After a project is structured, the user is taken to the editor or authoring view. Similar to other software, the user is able to build elements, upload 3D models and integrate real-world physical sensors. A "best practices" approach is evident with the general layout, placement and style of the tool bars. This view of the UI has been designed to allow quick access to primary functions of the application.
Interaction Design
Prototyping with paper.
You may remember, I was a bit hampered by the lack of support for real-world testing, So, I again took a gorilla approach regarding interactions. It was clear to me that our animation feature was not very intuitive. It was apparent that it didn't even follow the most recognized industry standards for it's most common features. For improvements, I first iterated on a more intuitive design following these known standards and later paper prototyped my end results. I tested it with individuals both familiar and those completely unfamiliar with the software. This process led me to make some minor tweaks to my original assumptions.
May I have a drum roll please...
Introducing ... The New 4D Studio
The Outcome
Here comes the sun.
Nailed it! The CEO was pleased. The team was pleased. The sun was out and birds were singing. But what about our users?The redesign received both positive and negative reviews since the release of the version 2.0 update. Most users responded well to the app's improved user experience and the clean visual redesign. Post launch, we tracked a notable increase in demand and sign-up inquiries. Although this cannot be definitively tied to the new visual design, it was nice to see nonetheless. It wasn’t until our second 4D Expo showing that I was able to interview some of the previous attendees to get their first hand impressions on all of our hard work.
So, let's hear from some of them:
The Recap
Keep it moving buddy.
So what is the definition of done? The dictionary defines it as:adjective
1 completed; finished; through.
2 arrived at or brought to an end.
3 worn out; physically exhausted; used up.
Although the team was a bit exhausted, the work was not finished. When it comes to software like 4D Studio, it's all about the iterations. So what's next? The need to create a custom mobile app to publish content to from 4D Studio. Interested? Advance to the next project for a case study on how that went.
Thanks for reading :)