Sign Up Table Case Study
Overview
SignUpGenius is a calendar scheduling tool where most of the user experience begins and ends on one specific page: the sign up. With over 300,000 events organized each month and millions of users, the sign up page receives a LOT of traffic, yet has remained largely unchanged for over 10 years. This article is will explore a few ways to improve the experience for both the users and the development team, and consider possible challenges.
UI/UX Challenges
How does a sign up tool with 18 million users a month go structurally unchanged for over 10 years? Perhaps the challenge is the page’s complexity? Or that if something isn’t broken, should it be fixed? Or maybe the disruption of changing something too much will illicit a backlash (*cough* Facebook *cough*)? As the leading service in the industry, is there even a need or desire to change? It’s quite a testament to the teams and systems keeping everything running smoothly for such a long time.
Consider the examples below. The sign up page feels like a spreadsheet designed by developers, for developers, and not like the underlying calendars they represent.
The sign ups feel like spreadsheets designed by developers, for developers, and not like the calendars they represent.
The complexities of the sign up page seem unassuming, after all it’s just a big table. However, this page is the culmination of 10 years of gently noodling with data: there are many different layouts, all with many variations, and every sign up can be organized differently. Depending on the type of sign up, there can be up to four data columns, sorted in a few different ways.
There is also a separate mobile version of the site and a mobile app, both of which seem to have nothing in common with the desktop version other than data and colors. Updating this page would likely require touching many other presentation layers across different builds.
The desktop experience. Once ads and a smaller screen are considered, the sign up data columns become very cramped.
The mobile experience lacks any sort of hierarchy and requires a completely separate build.
Sign ups are resolution dependent and do not scale.
Limited table cell space is hostile to lengthy content.
Advertising space further restricts layout.
Spreadsheet-like structure requires concentration.
No clear hierarchy, inconsistencies across layouts and presentation.
Underlying code is a tangle of nested tables and width calculations.
Complex programming logic needed to group dates, times, and slots.
Code refactoring and consolidation for more flexibility.
Updates require edits to a dozen different layouts AND a separate mobile site AND a mobile app.
Dated UI and markup takes no advantage of modern luxuries or progressive enhancements.
Logistical Challenges
How much time and effort goes into maintaining a heavily used system? A lot. So much in fact that most updates and tasks happen around the periphery of the sign up experience and not to the core experience itself; adding color themes, showing more ads, custom header images and item thumbnails, ability to purchase items from a sign up, etc. All those important tasks keep the rest of the house clean so to speak, offering users the most robust service available, while the heavy duty sign up page continues to do its thing.
So… what are some common industry challenges updating systems like this?
Available team bandwidth — Significant changes would require a major effort on the part of developers, testing, customer support, and marketing… is it beneficial to pull developers off many important lesser tasks to upgrade the core experience (product depth vs. breadth)? And imagine having to remake every FAQ and help document, not to mention video tutorials at great expense.
If it ain’t broke — The sign up tool in its present state is simply ‘fine.’ It’s not modern, it’s not fancy, but it measurably gets the job done for millions of monthly users. What are the current user challenges? What are the costs and benefits of modernizing? How might improvements be measured?
Unplug grandma — It’s clearly beneficial to bring this page (and the mobile experience as a whole) up to date with industry standard features and usable, recognizable design patterns. But by spending more development time on progressive enhancements for modern devices, development and testing time starts to spread pretty thin. Is the growing feature disparity of older devices worth the headache for the support team? Does the development team have the capacity to build, test, and debug more advanced features?
Testing 1 2 3… — Even small changes require a lengthy review process from the testing team, and the review period is strenuous and comprehensive. With millions of users, even a small ‘oops’ can turn into a really bad day. The larger the change, the more opportunity for unknowns and unexpected issues.
Fear of change — There is no way to predict user reactions to something shiny and new, especially after 10 years of maintaining the same layout. Steps would likely need to be taken to allow the old and new experience to coexist as a courtesy to the users.
Scariest environment possible — As happens with most systems over time, iterations and updates generate more and more markup and CSS sprawl. Reigning all that back in with a clean approach and a new build process takes time.
Redesign Goals
The sign up experience is largely locked to a desktop presentation; over half of the audience is on mobile, so cleaning house and restructuring as a multi-device, omnichannel approach is hugely important. The reduced footprint will allow the same small teams to make larger more effective changes across all devices from a singular code base, and users will have a unified experience.
Simplify the experience to work consistently across all platforms without losing functionality.
Respect the user’s time by neatly organizing data (time, addresses, dates) in standard, familiar formats.
Be clear with the content hierarchy; titles, dates, subordinate items, microcopy, buttons.
Reduce noise by limiting dividers, lines, and extra punctuation unless absolutely necessary.
Clearly indicate user choices and status of decisions or selections.
Draw from real world concepts and patterns to increase user confidence.
Maintain space for ads.
Consolidate the desktop and mobile experiences into a single streamlined tool that scales to any device.
Use the same databases and functions to keep the backend intact.
Maintain subscription benefits such as custom colors and functionality.
Consolidate markup; reduce excessive tag structures, tables, HTML and CSS bloat.
Plan for flexibility and future improvements by using simple structures that scale well.
Reduce support tickets and testing cases.
Structured Data Considerations
The sprawling horizontal sign up design needs to be simplified and made more clear. On all but the largest displays the columns become cramped and text is broken into unexpected lines. Maintaining this layout across all devices is simply not possible, and is objectively terrible on any device when populated with heavy data.
How might the data be restructured into a more flexible, simpler format?
Expected data should be carefully considered, and a new UI will accommodate unexpected content easily. Horizontal scanning with the original layout is challenging, so one possibility is to pivot the primary key items/slots to the top as headers, and flow everything underneath as content sections. This could be taken even further by moving all slots, dates, and locations to a header position.
Example:
Setting the key slot items into a header position solves several layout issues:
Slots now have more than enough room for large images, long titles, descriptions, prices, and more.
Location data now has plenty of room and is less likely to break lines in unusual places.
The sign up button area now has plenty of room for more names and comments.
Less column grids reduce the overall noise and visual complexity.
A top-down flow is much more calendar-like and familiar.
The vertical format is MUCH easier to scan and digest.
There is room for ad space with a much lower impact on squeezing data.
Here it is in practice, with the exact same data:
Option A: Original table
Not a whole lot of room to display content. Even modest addresses and key slot items are cramped.
Option B: Slots as the header
Same information. Key slot item and date/location have been moved into a more clear hierarchy.
Despite taking up slightly more vertical space (everybody scrolls anyway) option B is a measurable improvement. Option B additionally provides advantages that will scale well across other devices, which we’ll look at shortly.
Let’s see how all three options accommodate a larger set of data:
Option A: Original tables
When tables attack.
Option B: Slots as the header
Slot items are now headers for stacked data.
Option C: Everything is a header
Slot item headers and all data is now stacked.
Option A is feeling quite cramped, even with ideal data. There are limited options for type hierarchy, long words, links, and descriptions. The tabular data layout is mentally complex; a user must continually ‘decipher’ their choice by following the nested cells in reverse back to the key item. Additionally, the fragile table structure will easily break or explode if any content is slightly too large.
Option B and C are much more clear with a definite hierarchy. Rather than relying on excessive grids and tabular data to group information, this more natural flow requires less mental load. The groupings and layout as a whole are much more calendar-like and take a mobile-first approach to presenting the data in a linear format.
Further Improvements
Due to the tall nature of every sign up, scrolling is going to happen, no matter what. As key information pieces move out of view, it’s incredibly easy to get lost.
Let’s sticky those column headers. Sure, there are complexities with affixing data from inside a table to the top of the screen (such as collapsing cell widths when items are removed from the document flow). The newer position:sticky is also legit, though not as supported. Hell, spreadsheets have been doing this since the beginning of time, and these are modeled after spreadsheets.
Consider this quick improvement to the original layout:
Important data columns are quickly forgotten as the user scrolls down in this increasingly cramped layout.
Sticky column headers would be a step in the right direction, but still doesn’t address the tight columns.
The same solution works even better for the option B and C layouts. The sticky headers would scale down nicely to mobile and function in an identical fashion for that juicy, consistent experience. This feature is commonly found in other calendar and scheduling tools and is a recognizable design pattern.
Sticky headers are a design pattern commonly found in scheduling and calendar tools.
Results (TL;DR)
Tight desktop layouts and tabular data arrangements can be reconfigured by anchoring key items to the top. Cramped layouts are given much needed breathing room by flowing the layout in a more modern, mobile-first manner. Minimalist aesthetics, improved hierarchy, and familiar design patterns will go a long way to modernize the sign up experience across all channels. The unified codebase will further reduce the development time needed across other devices.
By considering the space requirements for various lengths of data, adding more modern capabilities, and thinking mobile-first, the sign up experience can be much improved.
Wrapping Up
As much as I hate large data layouts (tedious pixel nudging nightmares), it’s always a great exercise to work with complex data grids. Even with minimal user research, there are plenty of ways to improve on an interface that’s remained largely unchanged in over 10 years.
Check out my other SignUpGenius case study, where I take you on a magical tour of rebuilding the sign up creation tool.
Thanks for reading!