Finding the right direction 🧭
SMB Fulfillment Management
Allowing small & medium businesses to
track the status of their fulfillment projects
How it started...
Prior to starting this project, I had received feedback that the fulfillment experience for our SMBs wasn't the greatest. They often weren't able to find projects associated with products or services that they had purchased (This was partly due to some weird information architecture), and the fulfillment information wasn't detailed enough to allow SMBs to action on information that was required of them. As the design lead for this project, I wanted to answer the following question:
"How might we improve the fulfillment management experience for Business App users, so that they can more easily track projects for products or services that they purchased?"
The goal of this project was to improve the overall experience of project management within our SMB-facing app, Business App. Business App is a tool that allows small and medium-sized businesses to run nearly ever facet of their business.
I chose to do interviews for this project because I already had some strong, established relationships with several SMBs and they were willing and eager to provide feedback. Small business owners are often very busy with just running their business, so having access to this sort of feedback was invaluable. My interview questions were focused around several areas:
What are some things you like about the way fulfillment is currently tracked within Business App?
What are some things that you don't like about it?
What changes would you like to see in terms of fulfillment within Business App?
How many products/services do you order on average?
Many of these questions lead into deeper discussions and additional questions which surfaced some previously unknown points of friction and frustration. I was most curious about what my users' "ideal fulfillment tracking" experience was, as it was a chance for my users to flex their creative juices and imagine something that truly worked for them. One key insight that was common across the interviews was the need for a mobile view. SMB users are often away from their computers and rely on their phones for running their business, so the solution had to be mobile or at least mobile-responsive. Another insight surfaced the awkward information architecture, and how it didn't really make much sense to group projects with products & services the way it currently was.
Journey mapping allowed me to identify current pain points within the SMBs fulfillment management process, as well as the "happy path" that I wanted to create. Mapping was useful in establishing the proper information architecture and location of fulfillment management (Moving out of the Products & Services tab and into its own dedicated navigation item and page). I included additional user types (Vendors, Partners) within the journey map to capture the entire range of fulfillment, and arranged them in a linear fashion to show how information was passed between different users, and how certain triggers lead to additional actions. Mapping out the journey in this way provided additional insight in to how fulfillment moved ahead across unique users.
I created some low-fidelity, fat marker sketches to get some ideas down on paper quickly. Doing these sketches allowed me to quickly ideate around multiple concepts and incorporate feedback from my users. Because my users emphasized the importance of accessing this information on their phones, I made a point to create UI elements that were mobile responsive. I ended up with 3 different versions and after some user testing and feedback, narrowed it down to one ideal experience.
To get a better feel for how the software might behave in production, I decided to create some low-fidelity wireframes within Figma and link them together creating a prototype. I wanted to start with minimal UI elements so as to prevent my users from getting too "lost in the weeds" around certain UI decisions.
Testing and user-feedback showed that I was on the right track with this prototype. Several changes had to be made in terms of IA and responsiveness, but the overall sentiment from my user testing was incredibly positive and my users were already looking forward to these changes.
I used the feedback gained from the low-fidelity wireframe prototyping to guide my UI design for the final screens. I leveraged the Angular Material framework for the UI and aligned it closely with existing UI within our platform. Because Business App is often used on mobile, I created both desktop and mobile versions of the screens, and used Figma's smart-animate tool to show how the responsiveness changed between the two. I also designed several empty states to illustrate what the screens might look like without content, and included UI elements related to our new Inbox tool to illustrate how and where communication would occur.
This project was really fun to work on and allowed me to better understand my SMB users. Designing these screens for both desktop and mobile use provided a unique challenge, and showed me that there is a lot of opportunity to optimize my software for the mobile experience. The primary challenge I faced with this project was understanding how the information architecture should be structured, as it potentially involved adding a new first-class navigation item to the already busy Business App nav. To overcome this challenge, I made sure to user-test and get feedback at every stage of this project. I also worked with other lead designers to make sure that my changes aligned with their overall vision of the product.
My SMB users were ecstatic about the changes and were able to scan and track their projects more easily. I saw a 7% increase in user engagement post release.