Project deliverables
- List page redesign
- Creation and edit redesign
- Match UI/UX of concurrent projects
Overview
The Survey Engine was one of the many components of the AMP Platform that my team redesigned at Triton Digital. It was a high-traffic product, with both a front-end (the actual survey) and backend component (creation tool). Surveys had been one of the last pieces of functionality that needed to be redesigned to fit the new brand, user experience and frameworks which we had stood up for the rest of our products.
Challenge
As with the vast majority of Triton products as the time, Surveys were highly outdated in terms of code base, aesthetic and modern user experience. We needed to design a more efficient creation flow, easier ways to access the content you need, and provide better insights on demand. We also needed to make sure that the output fit the UI guidelines and components of the AMP family. We had a lot of opportunity to grow, as shown in the previous version screenshots below:
Approach
At this point, we had converted quite a few of our products over to the unified brand and experience framework. We had a great place to start, so the vast majority of focus was on the creation flow. First, I checked the spec and narrowed down required functionality with the product manager. We pared down to essentials, and through out the rest of the extraneous legacy features. We took an iterative design process, working with clients and customer support as the stakeholders. After finalizing layout and base functionality through wireframes, we were able to immediately jump into code prototyping due to our fleshed out UI framework which my team built in-house.
List Page
The web app is where we started. We architected a familiar, easy-to-use interface that allowed users to login and share content with other like-minded golfers. We developed features that came and went over the years, but today we still have a lean application that serves up the ability to post and view content, as well as join and participate in groups.
Creation Flow
The creation portion of the survey is where we spent a significant time on improving it. We utilized the breadcrumb navigation structure in our other products to provide clear progress. We introduced some new question types during our redesign, so I accommodated for them, and built new layouts for each question type. All questions collapsed while one was opened to minimize distraction. We also put in a live preview, so that you could see how the survey was shaping up as it was being built. Other additions such as theming, publishing notes and inline/hover help was also introduced to increase user function and reduce customer support. The finished flow was polished, performant and a hit with our users.
Key Takeways
The survey engine redesign was the culmination of many principles, learning and iterations that we had made to our process over the years. The cycle of design and length of developer implementation had been reduced with a high degree of efficiency. We were able to go from design to production faster than ever, and even used this tool once in production to grab customer feedback about the tool itself.
Being the main design resource for this, I was able to see just how useful and integral our UI framework had become in the trenches. I was able to fully skip working in Photoshop doing hi-res mocks and go right to prototyping in code; this saved tons of time. The level of consistency it provided also shortened QA time.