Account Settings

Sevenrooms, 2021

Improving user Settings to reduce onboarding time and lower support ticket volume.

Role

Product Designer, Contract

Team

PM, Front-end Engineer

Timeline

6 weeks

Sevenrooms is a hospitality management platform used by business operators to build relationships, deliver great customer experiences and increase repeat business. This is accomplished through a suite of tools for venue reservations, table management, marketing automation, and online food ordering.

Overview

I worked with the product team at Sevenrooms to kick off a re-design of the platform’s existing user settings pages – improving information hierarchy and design layout. I led the design process including internal research with customer and user-workflow experts, feedback-driven design ideation, rapid prototyping, and usability testing with users.

New, updated Settings pages

Discovery and research

Why are we doing this?

  1. Decrease onboarding time for new customers (down from 80+ days)

  2. Reduce the amount of recurring settings-related support tickets

  3. Implement and contribute to a new design system

Let’s get started!

I kicked off discovery and research by:

  • Auditing all current settings pages

  • Defining default vs advanced settings

  • Generating and validating assumptions about information hierarchy

Audit of current settings pages - organized by category on Figma

Market Research

I also wanted to understand how other tech companies organized and laid out their settings pages, specifically within hospitality tech. While I value original ideas, in this instance there was good reason to not ‘reinvent the wheel’ and leverage patterns that might be recognizable for the user, and could serve as inspiration during design ideation. I went on deep dives into competitor websites and their help centers, to uncover some visual reference points.

Market research findings:

  1. Menu tabs = easier navigation

  2. Tooltips / help text used generously

  3. Important to cross-link to related settings pages as needed

User Research

I used a variety of user research methods to understand how user settings pages were currently being used by our customers and to identify existing pain points that could be addressed in the update. Methods includeded:

  1. User research recordings - I sorted through previous research sessions that were settings-related to identify pain points

  2. Pendo Guide reports - our team was using Pendo (software analytics tool) for platform analytics so I leveraged the tool to understand user journeys through existing settings pages during the onboarding process

  3. Internal research with support and implementation teams - I explored known pain points for users by chatting with internal personnel that were experts in these areas. Here is a research plan and findings for one of these research sessions on Floor Plan settings in venue management.

  4. Searching the Help Center - in trying to understand the function of certain settings, I referenced the internal Help Center database for guidance

Recordings from previous user research

Pendo Guide reports

Internal research with onboarding team

After analyzing findings for information hierarchy / settings organization, and getting preliminary feedback from product management and design on these, I moved into heads-down time on Figma.

Ideation

Initial designs for the settings pages began with implementing components from our new design system. I then focused on options for page layout, and explored new possible components within these.

Design ideation in my Figma file; please excuse the mess :D

I explored different approaches to content organization and varied UI treatments for components such as navigation and tables. These would go on to be validated either through internal feedback or user testing.

Design explorations for information hierarchy

Concept Validation

Internal Feedback

I validated design layout options using rapid prototyping and shared these for internal feedback with product, design and engineering. I walked each of these groups through the options, discussed pros and cons, and created space for anyone to provide feedback or flag potential concerns.

Figma prototype exploring layout options

Usability Testing

I also sought feedback externally through UsabilityHub, an online research tool that allows for simple A/B Testing with real users. I focused the prompts around Email Settings page, and tested the following:

  1. For long settings pages, should content be divided by headers OR divided into separate ‘cards’(Metric: time to task completion)

  2. The effectiveness of section tabs in finding content (Metric: linear scale for ‘ease of use’)

User testing via UsabilityHub

The results from internal testing and UsabilityHub moved us towards the option where longer settings pages are broken out into section cards, based on content. I applied this same pattern across all settings pages. This feedback and validation loop continued until the end of my contract with Sevenrooms.

Design explorations for a table component, used to add ‘tax rates’ per venue being managed

Conclusion

Project challenges/learnings included:

  • No users available for research, no problem - the hospitality field is busy so it’s hard to get face time with a customer however, you can leverage internal experts from support or implementation, tap into previously recorded research sessions to learn more about your base, or sort through documentation.

  • Large scope, break it down - I tried to prioritize and front-load feedback and validation given the large scope of this project, to help minimize potential prioritization and timeline issues for development. I presented my designs early and often to our teams, creating space for any feedback to be shared.

So, what’s next?

My contract with Sevenrooms ended before final handoff but if I had been able to see this project through to completion, I would have pushed for design validation with 2-3 live customers and updated designs based on learnings from those sessions. Time permitting, I would also have done a deep dive into some of the new components I was introducing into settings pages, to ensure that these would be reusable in other areas of the product, before adding them to the design system.

[BEFORE] Legacy Settings pages

[AFTER] New, updated Settings page