Case Study
Attribute Central
Componetize key sales commission structure data points for use everywhere
Time Frame: 2 Months
Key Skills: User Research, stakeholder collaboration, defining pain points, user flows, wireframes, high fidelity mockups, prototyping, user testing
Team: 2 Designers, Product Manager, Dev Team
Step 1
Research
I then organized all of those notes into general categories and shared them throughout our organizations stakeholders to level-set on the severity of the problem and start piecing apart key things that we needed to adjust. This was helpful in the long term for buy in from those stakeholders on scope, but also so we could start identifying running themes.
One of those themes was our need for some way to centralize some key data points for our users to prevent them from having to re-enter data repeatedly in different parts of the area. Ideally, we could create a component for some of these data points, so users could reference them whenever they needed to.
I started putting the information together into a notion doc, so it was sharable throughout the organization. A “one stop shop” for this project. Here you can see where I began adding things that were in/out of scope after early discussion with development and organizing what designs we needed to consider going forward.
This is the user flow I put together for how users were building and managing a plan, based only on our instructions for doing so (the one “happy path”). As you can see, it was very long and complicated, even at best. I added below each step observations and thoughts on how we can make changes or improvements ranging from UI adjustments to major UX overhauls.
I also talked with some of our internal experts and a few customers while putting this together, to make sure I had every step that was actually required. These interviews were about an hour long each, asking them to go through their process for set-up and manipulating data.
Step 2
Exploration
I created some flows for what we could feasibly do as a solution for this problem, taking into account the key pieces our user testing surfaced earlier on and what our devs had indicated were out of scope. This allowed us to keep our solutions very high level, focusing on the entire flow rather than getting too far into details page to page. It also was helpful in communicating with stakeholders exactly what they can expect.
I highlighted anywhere that required a net-new page that needed design here in blue so I could focus on what we needed to build from here.
Once we got stakeholder approval, we dug into the designs.
As we were building on existing components for a lot of this project, I jumped straight into high fidelity mockups at this point. I build out the basic flow and showed how this would impact existing pages of our application.
I also broke our mockups up into Q4 2022 and Q1 2023 versions after discussion with tech leads and business stakeholders, allowing us to scale up our solution with time. We focused on a smaller scope initially, honing in on what our business needs were initially, while keeping the larger scope solution in mind.
Step 4
User Test
9 user tests completed
40 - 2,500 employee customers
We found that the solution was an effective way to solve the problem, as there was a lot of excitement throughout the users we interviewed. The solution was overall a success, with concern generally being around how we can indicate to users exactly what changes they make here will impact elsewhere in the application.
Results were put into a final document, which I shared with our stakeholders and presented to the entire development team who would be working on this project. These helped get everyone on the same page, and particularly with the developers helped them understand the broader picture before they delved into the development project.
Step 5
Prototype
I then created a final prototype of the entire scope of the project, taking into account any feedback we received on the latest user research, enforcing the idea of components impacting every instance app-wide.
I also started digging into specifics on things like the first creation modal.
While this was helpful in iteration, we found that there were a few instances where having a very, very detailed prototype of every step would be helpful for our develpers.
For these instances, I recreated the user flow step by step showing everything we would require of users. Some of these pages were minute changes, but they helped with communication internally, and were what we ended up using to create development tickets.
Next Steps
Development Process
As the development team and I had been in constant communication throughout the design process, we found moving into the actual coding step was very smooth. They had a solid understanding of what exactly they were building and why.
I joined in planning meetings for them and was a part of stand-up daily, always being available for questions and more detailed mockups as they were helpful.
What I Learned
Having such a short turnaround time for a project like this forced me to leverage existing components as much as possible, coming up with creative solutions to the problems.
Approaching complicated projects was also very interesting to me, as I really needed to focus on the whole picture rather than getting too far into the weeds early on.