One of the first things I tackled was revisiting the information architecture of the Storefront tab, so that the content was organized in a more intuitive way and with clearer labels. Here’s a comparison of the existing structure and what I proposed:

As you can see, there was a lot of content inside of “General Info“ (which is a pretty vague label) so I suggested we split that up into different sections. “Other Details“ also didn’t accurately represent its contents (a list of products and services the Pro offers), so I suggested we tweak that label too.

To ensure the groupings I suggested were intuitive, I ran usability tests with our customers and consulted with our customer support and taxonomy teams.

We knew that Pros like to tweak their galleries often, so we wanted to allow them to reorder the photos in their gallery. These sketches show a few of the approaches I explored:

Another unique aspect of this project is that The Knot Pro app was built using React native (a framework that lets you write an app once but run it natively on both iOS and Android).

Working with React Native brings a series of interesting design challenges, like deciding how much you want your UI to be shared between iOS and Android.

Another challenge is accounting for system differences between the two platforms. For example, I learned that in iOS you can only use a native alert to request access to your users’ photos once. If they say no, in future instances you’ll have to ask them to go to their settings to give you access. However, in Android you can trigger the native permissions modal as many times as needed, so you won’t have to direct users to their settings.

I was the first designer at the company to face these challenges, so I eventually led the effort to formalize our approach to cross-platform design.

You can learn more about my experience with React Native on Medium.

To solve this problem, FreshBooks asked my team and I to design a way for owners to have conversations with their clients about their documents right in FreshBooks.

In FreshBooks, each document already included a dedicated area showing the document’s current status as well as actions taken by different parties on that document (e.g. “You sent this invoice to John”, “John viewed this invoice”).

I worked on modifying the document history area to accommodate conversations and designed the experience of messaging someone from the document.

Here’s the desktop view of what the history area looked like after I incorporated messaging into it:

Along with allowing owners to keep their conversations in FreshBooks came a responsibility to ensure they don’t miss important messages from their clients (and vice-versa).

But what should we notify users about and through which medium (email, push, in-app…)? To help my team answer that question, I designed and a ran a 1:1 research exercise with several business owners.

I’d ask each owner to imagine they just hired a personal assistant whose sole job was to keep them updated on their business.

Now they had to arrange cards on a Trello board under the column that corresponded to how they wanted the assistant to communicate various updates to them:

As owners sorted the cards under each column, I’d ask them why they sorted it that way—the most important part of the exercise.

Our goal was not to create one precious and final list of notifications. Instead, we hoped to uncover what makes an update more or less important to users, then use that information to create guiding principles for FreshBooks notifications.

For instance, we observed that owners cared most about updates from people in their network, say…a client asked them a question on an Estimate or an employee needed help with a project. Owners care a lot about their relationship with those people and don’t want to leave them hanging. So one of our principles was:

With the principles defined, I moved on to designing the visual style and interaction for our notifications. Some of the decisions I had to drive included:

Where should notifications appear in FreshBooks?

I recommended that they be placed within the global side navigation on web and within the top bar on mobile so that users had one source of truth for what needs their attention, that they could access from anywhere.

What elements should notifications include?

Here’s a sketch showing the anatomy of a notification. One highlight is the inclusion of suggested actions, which are meant to help users form positive habits. I’m happy to tell you more about how I arrived at this recommendation—just ask!

And here are some screenshots of the final result: