Narrator: Previously on “Finding the Gap”
We’d just completed a full design, implementation, research study and quick-fix cycle. Since User Experience (UX) is a never ending iterative process, we entered into the next phase of learning by attempting to figure out how we could make the instance create flow better, stronger, and faster. Luckily for us, the Rackspace Experience Design team was on-board to assist in the next round of research! (Shout out to Kelly Gustainis and Isabelle Baird for their unequivocal expertise and knowledge throughout the process.)
We went back to the basics by doing a Journey Map (fig. 3) which tells a story about a user doing something to reach a goal. This exercise exposes potential weak points or “cliffhangers” where a user can get confused or abandon the whole process. Once this was mapped out and compared to the previous user testing results, it was clear that the new design needed to be more efficient and intuitive.
Figure 3: The Journey Map
Then I did another round of competitive analysis and took in the full scope of their product instead of narrowly focusing on their instance create flow. I wanted a more holistic view of their offering to see if there were any shared commonalities between all the features they offered, and each other. I also looked into the Material UI framework to see what we could easily use out-of-the-box to speed up development.
My focus remained on the following:
- Offer a step-by-step process, grouping the expected selections together in a relatively predictable order.
- Give the user more options while also guiding them to their goal which was to spin up an instance and get connected.
- Narrow the tasks in the Firewall section so that they can efficiently complete their goal. Do not side-track them with an overly-intensive micro-process. I especially wanted to strip down this section to the bare minimum so that the user wouldn’t spend too much time here.
- Give them something creative to do by moving the Naming task to the end.
- Offer the user total transparency throughout the process by offering a Summary section that is within visual range but not intrusive, showing each custom selection and pricing changes.
- Keep it mobile-friendly!
Making the Case
Before I could take any tangible steps towards actual design work and commit my hours to the new feature, I had to present my findings to the engineering group and get them on board. Luckily it was pretty easy to get some momentum on developing this because Rackspace has been working on improving carting features for all of their products. Knowing that there were significant drop offs and users lost in the weeds helped get this project moving and it didn’t take much to get the engineering group on board. In fact, they were pretty convinced of its importance while I was in the process of generating a Customer Experience Index (CEI) report with my findings. The CEI measures how successfully a company delivers customer experiences that create and sustain loyalty. It is designed to close the loop between customer experience measures and growth, connecting quality and loyalty measures to specific revenue drivers, as well as guiding decision makers to the investment(s) with the potential to produce the greatest return.
Armed with all the research I had gathered, I did an initial pass at the new design by starting with the out-of-the-box Material UI stepper (fig. 4), integrating the things that worked from the current live version while respecting ObjectRocket’s branding identity and putting major consideration into maintaining a mobile-friendly environment. It actually got easier as the design evolved because I kept my focus on keeping things simple and modular. I presented my initial designs (fig. 5) to the engineering team and discussed next steps which included identifying any engineering blockers that would hinder development. I also set up designs along each step of the way to illustrate the flow the user takes and the different states of interactivity (ex: hover, selected, disabled).
Figure 4: Material UI Stepper
Figure 5: Re-design of the instance create flow. This is a design of what the user sees when they first hit the screen.
My favorite reaction during the presentation was that it “seemed pretty straight-forward” so with that in mind it was time to get it off the ground.
Great Success!
In the meantime, word got out that we were re-doing the carting process and there was pressure to speed up development in order to do another round of user research with a live prototype. Overall, I didn’t want to rush this because there was no way we were going to do this a third time and speed-balling this puts the feature at risk for future bugs. We might also have to make sacrifices in order to satiate the launch date if we had a tight timeline.
Testing Out a Sample Prototype
Our solution to alleviating the pressure was to perform guided user testing sessions with a sample prototype. This gave us data that both validated and impacted the new design. The sample prototype feedback validated a lot of solutions we entertained, such as shortening the Firewall IP section to only one single micro-task!
While I was doing the user testing session with the sample prototype, the engineering team went ahead and made it!
Now you can spin up a new instance on Mission Control in the new flow!
We now have a stronger instance flow and even more new ideas to enrich Mission Control for our users in the future. But as I mentioned before, design is never done. To ensure we have an instance create flow that is intuitive and easy to use, we will continually do user sessions to gather feedback. Have an idea or suggestion you would like to see? Email us at sales@objectrocket.com
