I rebuilt the template gallery as a full-screen showroom, and every tester found the gallery from Home.
A work management software company used its template gallery to show new users what the product could do. I redesigned the gallery as a full-screen space with clear categories, previews, and one-click templates, tested the design with nine people, and turned their feedback into a plan for search, filters, and ready-made solutions.
Client
A work management software company
I changed names and details to respect my nondisclosure agreements.
My role
Product design manager
Focus
Template gallery design and testing
Result
Every tester found the gallery from Home
The template gallery was where new users learned what the product could do.
In 2017, the revenue team at a work management software company gave the template gallery two jobs. The gallery had to teach new users what the product could do, and the gallery had to inspire them to create their first file. For many trial users, a template was the first piece of real work they saw in the product.
In the January 2017 sprint, I designed a gallery with Essentials at the top, a Popular section, team categories with template counts, and a Solutions section at the end. Every template opened a preview with a picture, a short description, and a Use template button. Blank sheet sat first, so people who wanted a clean start never had to hunt.
In May, I built a series of clickable test builds of a full-screen version and put the builds in front of real people. I wanted to know whether people could find the gallery, leave the gallery, choose a template that fit their work, and start a sheet without help.
Nine people tried four tasks, and each task answered one design question.
The May 2017 study was remote and unmoderated, and each session took about 15 minutes. Six testers were new to the product, and three were existing customers. Click or tap a card to turn it over.
Testers told me exactly how the next gallery should work.
People scanned the gallery the way they would scan a store. They looked at categories first, then at pictures, and they opened a template only when the name and the picture matched their goal. New users still described their work in spreadsheet terms, so every category and tile needed plain words about the job the template would do.
A July 2017 follow-up study confirmed the direction. Testers asked for Preview and Create buttons right on each tile, and the pictures inside each preview helped people choose. The left navigation helped too, although some people thought the navigation looked disabled, so the next version needed a clearer selected state.
- Each tile shows a one-line description with Preview and Use template buttons when a person points at the tile or tabs to the tile.
- Each category opens with one sentence about the kind of work the category covers.
- Each preview lists what the template includes as short bullets.
- Filters for goal and team, plus a sort by popularity, narrow a long list quickly.
- Solutions bundle sheets, dashboards, and reports into a ready-made workspace for one kind of team.
- The logo goes home, and the X returns people to the place where they started.
Find a template, preview the template, and start working.
I rebuilt the gallery with the improvements the research called for, in a current style under the Haven Works name, with AI writing the code from my designs. The templates, workspaces, and rows are sample data.
Things to try
- Open the template gallery from the left panel, then close the gallery with X to land back where you started.
- Search for budget, or filter the templates by a goal such as Plan an event.
- Point at a tile or tab to a tile to see a short description, then choose Preview.
- Choose Use template, name the sheet, pick where to save the sheet, and create the sheet.
- Open Solutions to see a ready-made workspace for a marketing team.
The gallery used the product's own calm colors, so the templates did the talking.
I rebuilt the gallery in a current work management style for this page. The pictures on each tile carry the color, and the frame around the tiles stays quiet so people can compare templates at a glance.
Color
- Haven navy
#0F1E3DThe top bar, the gallery header, and the selected goal filter - Action blue
#0068D9Use template, Create sheet, links, and focus rings - Blue mist
#EAF2FEThe selected category in the rail and the chosen Save in option - Done green
#0E7A55Template counts, the ready message, and finished rows in sample sheets - Ink
#141A26Headings, template names, and body text - Slate
#5A6378Category sentences, view labels, and hints - Canvas
#F5F7FAThe page behind the tiles and the preview picture frame - Line
#DDE2EATile borders, dividers, and the search field
Type
Wordmark
haven works
Inter
Section headings
Project management
Inter
Template names
Event plan and budget
Inter
Descriptions and hints
Track every task, cost, and vendor for one event.
Inter
Components
Category rail
A list on the left jumps to each category, shows a count beside each name, and marks the current category with a clear selected state.
Template tile
A picture of the main view sits above the name and view type, and pointing or tabbing reveals one sentence with Preview and Use template.
Goal filters
Plain goals such as Plan an event or Track a project narrow the gallery, and a count says how many templates match.
Preview panel
A large picture, a short list of what the template includes, and the available views help people decide before they commit.
Create dialog
Creating from a template asks for a sheet name and a place to save the sheet, with Cancel and Create sheet at the same width.
Solution card
A ready-made workspace bundles several sheets, a dashboard, and a report for one kind of team, so people see how the pieces fit.
Principles
- Show a picture of the finished work, because people choose templates by what they can see.
- Name each category by the job people need done, not by the feature that does the job.
- Let people preview before they commit, and let them leave the gallery without losing their place.
- Keep a blank sheet one click away for people who want to start fresh.
100%
of testers found the gallery from Home
80%
of testers found the right template for their scenario
Every tester found the gallery, and the full-screen design moved forward.
The May 2017 study of nine people gave the team a tested gallery and a clear plan for the next version. Click or tap a card to turn it over.
There is plenty more where this came from.
Names, brands, and data in my case studies are changed to protect my clients.
Tell me about your project.
Tell me a little about it on my contact form, and a real person will get back to you soon.