Redesigning an enterprise web app from the ground up

Product design
Information architecture
Prototyping
User interface design
Design systems

TLDR summary of this engagement

Following SurveyMonkey's acquisition of GetFeedback in the fall of 2019, we worked with the product team to completely overhaul the user experience and interface of the web app.

This exercise involved planning for new product features made available to customers immediately and planning for longer-term direction for the product within the SurveyMonkey suite. Activities and highlights included:

  • Information architecture exploration against use cases and planned feature roadmaps
  • Interactive prototyping to explore potential navigation systems and interaction patterns and validating through usability studies
  • Created a detailed design system to serve as a foundation for the new UI
  • The complete user interface design of the app
  • Collaboration with business and leadership stakeholders throughout the engagement working with teams across North American and Europe
  • Iteration and exploration in response to internal and external feedback, optimizing specific UI elements
  • Tight collaboration with members of the product design and engineering teams to ideate and implement UI/UX enhancements

Scope of services

Icon of a lightbulb
Exploration

We played a crucial role in discovery and exploration at the beginning of the project by empathizing with users to gain a complete understanding of their needs, wants, and ideal outcomes. Information architecture and navigation systems were closely related to many of the challenges we observed in the previous UI.

Icon of a compass and pencil
Prototyping

We built and iterated on interactive, low-fidelity Axure prototypes to simulate potential navigation models and interaction patterns. A vital goal of the prototyping exercise was to validate a new navigation behavior and its ability to accommodate various app levels.

Icon of three illustrated users
Usability studies

Prototypes were formally tested with customers to identify hurdles or gaps in the proposed navigation system. Observed challenges were iterated upon and resubmitted for testing with users to arrive at a final navigation system.

Icon of ruler and pencil
Design system

To approach the new UI with a proper foundation, we built a comprehensive design system for the GetFeedback product in Figma. With Google's Material UI as a base, we defined an exhaustive library of components, styles, and variants. These components became the building blocks for the new user interface.

Icon of a laptop
User interface design

Finally, we created high-fidelity mock-ups created to depict the polished interface and screen designs that users would ultimately experience.

We worked closely with product managers and engineers throughout the development phase to the final release.

The challenge

GetFeedback is a survey platform explicitly built to gather customer sentiment via easy-to-use surveys. Following SurveyMonkey's acquisition of GetFeedback in the fall of 2019, we worked with the product team to completely overhaul the user experience of the web app.

Among other challenges, in its former state, the UI lacked consistency and scalability. Developed over multiple versions, interface elements, and layouts shifted based on features or location within the app. These shortcomings contributed to the barriers and complexities that the product team faced when features and enhancements from the road map were considered for rollout.

Delivering success

Working with leadership, project managers, UX & product designers, and engineers, we quite literally built from the ground up with this project. Rather than a simple re-skinning, we began by exploring the foundational challenges users experienced with the current app and experimenting with various potential solutions.

Aside from the app UI, we worked with internal teams to plan, architect, and visualize key features like upgrade paths and plan usage. These are two areas of particular importance as they needed to facilitate conversion while not interfering with the core app functionality.

Our end-to-end services helped the GetFeedback product achieve enormous gains with users through an early release program. During this period, early access users were asked to provide feedback on the new UI, navigation, and app structure. At the time of the writing of this case study, feedback from users has been overwhelmingly positive.

Animated gif demonstrating navigation drawer
Principle animation showing proposed navigation behavior and work area maximized.
Animated gif showing various screens from the GetFeedfback app
Additional UI screen designs developed as part of the full redesign

Explore our other work

AbbVie Science
Website UX + UI
General Motors
Digital storytelling
FM Systems
B2B eCommerce Websites
HealthCraft Products
UX & conversion audit
Western Archrib
B2B Website
Rezitrade
B2C Fintech
Capstone Copper
B2B Website
Sagetap
Product Design
Equisoft
Design System and Workflow Strategy
Canadian Dental Assocation
iOS / Android Mobilie App
Corteva Agriscience
Brevant & Pioneer Web UX Audits
Canadian Association of Defence and Security Industries
Marketing Website UX + UI
Split Software
Product design
First National LP
B2B/B2C Website
American Society of Clinical Oncology
Association/Healthcare UX Strategy
Carta
Product design
TrueIQ™
Social media monitor app
FedEx
Heuristic UX Audits