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?
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.
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.
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.
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.
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.
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.
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.
.svg)
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.
.png)
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.
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.
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.
.png)
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.
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.
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”.
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.
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.
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.
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.
.svg)
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.
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).
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.
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.
At key moments in their journey, users were presented with long blocks of text which lacked scannability. This lessened their ability to move efficiently.
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.
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.
After discussing these issues with the team, we replaced the potentially ambiguous acronyms with more recognizable terms.
.svg)
.svg)
.svg)
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.
Every element within a design contributes to the final experience. In having multiple teams with misaligned goals, you risk creating a fragmented one.
Many, fresh perspectives, evolve the design more rapidly and effectively than just a few.
We often develop a fondness to our first ideas. In doing so, we risk overlooking better alternatives.
Ask how you can design an experience that optimizes your content, not the other way around.
Feel free to reach out through email or LinkedIn.
