case study

A guide for the work week

8 minutes
time to read
1 Team Lead
1 Developer
1 Designer
11/19 to 03/20
A cropped mockup of the guide website.

Let's start with why.

Amidst the shifting dynamics of an increasingly digital world, today’s businesses are asked to rethink. To redirect their attention from maintaining how it is, to creating how it could be. Or rather — how it must be, in order to stay relevant.

Although — depending on the organization —this process may take different forms, one question remains constant. How might we use digital technologies to create value for our stakeholders?

Exploring this question, the company looked inward.

Within its finance community, a wealth of content — spread across a myriad of websites and wiki pages — was underutilized.

For one, many didn’t know it existed. Two, they didn’t know where to find it. And three, they didn’t know why it mattered.

This presented an opportunity.

If this content existed in one place, supported by tools that helped members find what they needed to know, when they needed to know it —it would become more valuable.

It would become a better way for members to find and discover useful content. And, for the business, a better way to share knowledge.

With that, we had our task.

Design and develop the interface for the Guide website. A place where Finance Members — our users — can learn the what, why, when and how for select finance activities.

To meet requirements, the site should first expose users to the breadth of content. Then, allow them to zoom in and out of its different groupings.

Further, the layout needs to allow for growth. Content will be added in the future, and this should be possible without restructuring.

Now, it was time to brainstorm.

Pen and paper in hand, we reflected on our experiences; separating the good from the bad, questioning if and how they could inform our design.

From this came our first ideas.

less is more

Instead of presenting content across multiple pages, we’ll just use one. With less places to click to and from, our users will have a more efficient experience.

a filter here, a filter there

On one hand, this allows users to refine their search. On the other — with the business considering the “when” aspect of our content as key messaging — through a strategically placed filter, we’ll highlight this.

An image of the first wireframe for the guide websiteAn illustration of the sites IA
Users would be able to filter activities along two dimensions: Timing and Category.

With these, we steered the design in its first direction.

For our next step, we needed something we could see. Something that embodied our ideas, and hinted to their experience. We needed a wireframe.

I took this away, looking to a collection of e-commerce sites and dashboards as inspiration.

An image of the first wireframe for the guide website
Our first wireframe.


I thought, “there’s one page, multiple filters, all to help me find something. Are we not doing the same thing?”.

Assuming our users would be familiar with this type of interaction, I believed that if we built our site on similar concepts, we would lessen their learning curve.

Aligned on the wireframe, we settled into our process.

An image providing an overview of the process followed during the create, review, and revise stages of the project

With each cycle, we pushed the design forward.

Over time, wireframes aged into mockups. Mockups became code. And our imaginations became less and less required.

Still, we had our challenges.

With each of us bringing a unique perspective to the project, our visions for what it was to become would at times conflict.

And when they did, meetings struggled to finish on time, and items requiring attention were left unattended.

Now, to some extent, this is to be expected. Encouraged even. Often, somewhere in between our perspectives was where we found our best ideas.

Yet, looking back, I wonder if there was a better way?

Maybe, instead of sketching concepts individually, then later presenting them for review, I could’ve worked with the team as I created.

Maybe, instead of exhausting effort building consensus between our perspectives, we could’ve tested them with our users.

At a core, these alternatives speak to the ideas of collaborative design and GOOB (Get Out of the Building) which underlie Lean UX practice.

When applied to our process, a separate review stage is no longer necessary. The devil’s advocates, the pros and cons — all of this would happen as we create.

Then, where review used to sit, we’d work with users to test our ideas. Learn from this, and repeat.

With that said, let's talk about what went well.

For one, we built the habit of vetting design decisions against our user story; each time asking if the proposed action would remove or create obstacles between our users, and their goals.

An image providing an overview of the process followed during the create, review, and revise stages of the project

Additionally — without frequent user feedback — I leaned on best practice.

At the time, my Google search for the “best books on UX design” brought me to The Design of Everyday Things. Reading through, I found applicability in its words and would often refer to them during meetings.

Efforts, like this, helped align and inform our perspectives. Improving the efficiency of our decisions, and — as we’ll come to learn — paying dividends for usability.

An image providing an overview of the process followed during the create, review, and revise stages of the project
Three of Norman's Seven Fundamental Principles of Design. I'd often refer to these when discussing the effectiveness of a proposed layout or interaction.

But let's not get ahead of ourselves. Back to the project.

Three months in, it was time for a demonstration. As this was our first opportunity for feedback, we wanted to show that progress was being made, but we needed to know where there was room for improvement.

With this in mind, I worked with our team lead to prepare a list of questions. All the while, stressing the effects of how we asked, and how we listened. Too much guidance, and the feedback is no longer theirs —  but ours.

This proved to be useful.

Stakeholders were happy with the sites progress and their comments revealed several issues.

Notably, the sidebar looked busy, and interacting with it — as described by an attendee, “felt cumbersome”.

This was something we had to improve on.

Looking to resolve, I went back to my notes. I asked, "where have I read this problem before?" And with time, two issues became apparent.

too much choice

What we hoped would feel like a tailored search experience: that is, the ability to add and remove filters unconstrained, quickly became overwhelming. For users, more choice meant more to remember.

awkward presentation

The labels within the sidebar didn’t have enough space between them. Additionally, many of them would wrap to either two or three lines, creating inconsistencies in how they were presented. Combined, this created a sidebar that looked messy. And unfortunately, we were leaving users to clean this up.

An image of the first version of the sidebar
The first version of the sidebar.

With this in mind, I began making changes.

Taking inspiration from Googles Material Design, I removed the subcategory filters from the sidebar and contained them within chips.

Further, within the sidebar, the number of category filters which could be selected at once was reduced to one.

An image of a chip in it's default state
A chip in it's default state.
An image of a chip in it's selected state
A chip in it's selected state.
An image of the updated mockup
Updated design with the latest version of the sidebar. Unlike the first, this aimed to convey that only one category could be filtered at once.

With this in mind, I began making changes.

One step > Many Steps

A one at a time approach to applying category filters no longer enticed — or allowed — users to combine them. Now, focusing on only one category at a time, users could progress through their search with greater confidence.

space is good

In removing the subcategory filters from the sidebar, we created more space between the category filters, and more clearly delineated the steps of refining a search (i.e. selecting timing, selecting a category, selecting a subcategory).

room to manuveure

The subcategory labels — contained within chips and positioned outside the sidebar — no longer spanned multiple lines within it.  Additionally, the varying length of the labels was better accommodated by the chips. As the labels grew or shrunk, so did the chips.

An image of the updated mockup
How would users find activities? We expected the "timing" flow to be one of the most popular paths.

With greater confidence in the layout, my focus shifted to its words.

Up until this point, this was considered beyond our scope. What our users would read, was the task of a separate team.

However, as the site began to take its final form, I realized that aspects of the copy could take away from the experience we hoped to create.

There were a few problems...

poor scannability

At key moments in their journey, users were presented with long blocks of text which lacked scannability. This lessened their ability to move efficiently.

cluttered writing

As I read through content, I often felt that its core message was lost within a long winded style of writing. What should have been providing direction, was just creating confusion.

confusing acronyms

Several filter labels used acronyms that would be unfamiliar to our users. As a result, making the right choice became a matter of trial and error.

We were, however, able to make improvements.

less LOAD, more clarity

After discussing these issues with the team, we replaced the potentially ambiguous acronyms with more recognizable terms.

Every question mark adds to our cognitive workload, distracting our attention from the task at hand. The distractions may be slight, but they add up.

— Steve Krug, Don't Make me Think

Now, it was time for our final demonstration.

A screen from the final mockup
A screen from the final mockup
A screen from the final mockup
A screen from the final mockup


The site was well received.  All the things it needed to do — those must haves — it did. Beyond this, feedback would suggest that it was the experience: the ease of use, the look and feel, which was appreciated the most.


The site was launched successfully to a user base of one thousand. At my time of departure from the project, the business planned to move into a Phase Two, collecting feedback through the site and making improvements accordingly.

Looking back, my experiences on this project taught me to...

look out for silos

Every element within a design contributes to the final experience. In having multiple teams with misaligned goals, you risk creating a fragmented one.

test early and often

Many, fresh perspectives, evolve the design more rapidly and effectively than just a few.

beware of anchoring

We often develop a fondness to our first ideas. In doing so, we risk overlooking better alternatives.

Build for content

Ask how you can design an experience that optimizes your content, not the other way around.

Thanks for reading.

you might want to:

Let's Connect

Feel free to reach out through email or LinkedIn.

An image of an open envelope with an @ symbol tucked within itAn image of the linkedin logo