Project: The Alteryx UX/UI Team was tasked with designing high fidelity wireframes and a click-through prototype for our ‘next-generation’ platform – specifically the new Visualytics experience – to be showcased during the 2018 Product Management Strategic Roadmap presentation to Alteryx Board members. Additionally, the prototype was planned to be used to help inform an upcoming feature kick-off meeting and design sprint to be conducted with the Visualytics Feature team.
The final deliverable, in the form of an Invision prototype, needed to showcase the potential for responsive design, incorporate the existing desktop product, and begin to leverage Alteryx’s new brand guidelines.
Role: Lead UX/UI Designer
Tools: Sketch, Hype 3 (Animation), Invision
Process:
- I worked closely with the Visualytics Product Manager and VP of Products to understand the goals for the Alteryx Board presentation, the key persona’s that would be showcased working with the prototype (Danny, our Data Master who would build the dashboards using Alteryx Designer, and Robert our Data Consumer who would interact with resulting dashboard via his browser), and identified the key tasks that needed to be captured in the final deliverable.
- In collaboration/parallel with the Visualytics Product Manager, I conducted a competitive analysis of three competitor products offering dashboard/visualytics capability and identified core interactions and experiences that we needed to meet or exceed. I combined this list with a set of customer ‘asks’ identified in our Customer Research Repository to come up with the feature set.
- Using pencil+paper, I quickly sketched out a storyboard identifying the user flow that would form the basis of the prototype, and reviewed it with Product Management to ensure their vision was being captured.
- I worked with our Creative Director to identify the new branding guidelines that should be applied – generating numerous visual layout options based on the guidelines, and reviewing them with the Next-Gen team to identify the version to be applied to the final prototype.
- Using Sketch, I created initial low fidelity wireframes for each of the Designer and Central Hub screens that would be included in the prototype – conducting design reviews with fellow UX/UI team members and iterating on designs until we reached high fidelity.
- I leveraged Hype 3 to create simple animated GIF’s to simulate in-application scrolling, dragging and dropping of tools onto the canvas (a core Alteryx paradigm), and selection interactions within the UI.
- Once all the screens were finalized, I uploaded the files into Invision and created the final click-through prototype and conducted testing of the prototype with fellow UX/UI team members.
- I participated in several rehearsal sessions with the Product Management team, during which final ‘tweaks’ were identified and made as they walked through the prototype.
Outcome: The Visualytics Product Manager successfully demonstrated the Next-Gen Visualytics prototype to the Alteryx Board, and received accolades for the shared vision, and approval to move forward with the project – initial Beta is planned for June 2018. The prototype was also recently demo’d during our feature kick-off meeting with the Visualytics Feature team (with representatives from Development, QA, and Technical Writing) to resounding excitement.
