Rapid iteration for internal tools
Rapid iteration for internal tools
This case study is an overview of a tool I created during a 4 day timeline at Callbox using rapid iteration and team collaboration
This case study is an overview of a tool I created during a 4 day timeline at Callbox using rapid iteration and team collaboration
In December of 2023, I re-designed an internal tool at Callbox to assist our internal users with admin work and task management. This project was created in 4 days with constant communication and collaboration with multiple Product and Project Managers, the Dev team, and the Senior Designer.
This case study focuses on rapid iteration, problem solving, technical constraints, collaboration with multiple teams, and design.
.
TLDR
Ideated new designs using acceptance criteria and communication with PM, Dev, and Design teams
Created wireframes, low fidelity, and high fidelity prototypes using rapid iteration
Incorporated feedback quickly with multiple teams, problem solving technical constraints and fine tuning designs for front end implementation
Redesigning task management at Callbox
Our product team wanted to spruce up the overall design and create a new user flow that brought the task management system front and center in the user's experience.
Before, our design system was non-existent, so there were multiple layouts being used, inconsistent labeling structures, random color selections for the UI and iconography, and workflow rabbit trails running rampant in the user experience.
Because there were several dozens of pages and reports being used by the company, I chose to dial down to one specific instance, the contacts page (seen below), in order to narrow my project scope. This allowed me to conduct research that felt relevant to users while also translating insights from my learnings to the broader Salesforce ecosystem at United Way.
The contacts page was the first page I audited, since it was the most universally used by team members at United Way.
There were broken links, irrelevant data fields, badges that no one used, and an overwhelming amount of information.
Auditing the current contacts page
Auditing the current contacts page
Systems audit
Tasks and metrics were hidden behind an icon
Event updates took up too much page real-estate
Continued…
Task management was not intuitive
UI was several years old and not modern
Continued…
Editing each task showed cut-off elements and visually heavy inputs for users
Continued…
Upon clicking to add tasks, UI became more disconnected and heavy.
Initial explorations & wireframing
Initial explorations & wireframing
I spent my first day taking note of the acceptance criteria and bringing forward any questions to my PM team. I then created wireframes that accommodated the tool with a new layout.
We used Monday.com for sprinting. I loved this tool for its metric dashboards and collaboration features.
My goals were to:
Bring task management to main landing page.
Reduce user frustration and confusion when completing standard work tasks.
My goals were to:
Bring task management to main landing page.
Reduce user frustration and confusion when completing standard work tasks.
Initial wireframes helped me see different layout options for the task tool.
Presenting multiple designs to stakeholders
I shared multiple versions of designs I thought would work for the acceptance criteria, as well as my suggestions for the best fit. My goal was to provide multiple points for continuous iteration.
I submitted these designs for review by my PMs, Dev, and Senior Designer. From there, I narrowed down the designs and provided additional versions to ensure all possible design options had been considered.
I completed 6 field studies with users from three separate teams in order to understand their work flow and the main tasks they needed to complete using the contacts page.
I then created user flows for the top three task requirements for each team while using the contacts page. You can see my user flows for the contact page below, but I also completed user flows for the accounts page and for instances of logging interactions.
Each of these user flows is accompanied by a Loom video gathered during my sessions. This allowed me to go back to view videos as I was designing, as well as be available for future designers and developers.
Providing multiple design versions helped my creative process and gave me space to take my designs to the next level.
I also loved getting PMs, Dev, and Design involved by asking which designs they preferred and why.
V1 - full scale activity log, larger task management
V2 - Side-bar activity log, small task management
Dialing in designs with limited user research
Dialing in designs with limited user research
One difficulty in working with Call Box as a designer was designing with a lack of user input. Our team was focused on lean agile development and rapid deployment, which meant usability testing and user interviews were not as feasible. I relied on my PMs, who said they were very familiar with user needs, to guide me in the design process.
I had many conversations with my PMs, asking clarifying questions, understanding outlier use cases, and getting into the minds of our users. This was the final design.
There was a general lack of user research at Callbox, but because I worked on internal tools, the idea was that internal users provided feedback regularly, and that feedback could be incorporated into new sprints.
Final activity and task designs
Final activity and task designs
Tasks
For tasks, we went with the side-bar design, including a primary button for adding a task, and secondary buttons for managing tasks and bulk uploading tasks.
Activity
We wanted users to have a quick snapshot of activity, and after chatting with multiple stakeholders, I decided to go with the side-bar activity view. This kept activity and tasks in the same visual space, which helped user's mental model of where they expected to see information.
Did you know you can put on different types of music to set the vibe for your users in FigJam?! So cool.
Once I understood how users categorized and labeled the many fields from the contact page, I got to work doing a more granular audit of each "widget" or section of Salesforce.
I wanted to discover:
highest user needs
Lowest user needs
Fields and/or widgets that could be removed completely
There were 15 widgets for the contacts page. To conduct this research, I sat with around 8 team members and had them go through each widget telling me high priority needs, outlier items they used on occasion, and items they had no need for. Unsurprisingly, there were many fields and even entire widgets that no one was using.
Designing multiple interactions
Each interaction was designed with the goal of providing users the most flexibility in completing their work in one user flow. I chose to use modals for interactions, to prevent unnecessary pages on the front-end, and provide a more modern UI for users.
Interactions required
Add task
Edit tasks
Delete tasks
Re-arrange task order
Bulk upload tasks
Did you know you can put on different types of music to set the vibe for your users in FigJam?! So cool.
Once I understood how users categorized and labeled the many fields from the contact page, I got to work doing a more granular audit of each "widget" or section of Salesforce.
I wanted to discover:
highest user needs
Lowest user needs
Fields and/or widgets that could be removed completely
There were 15 widgets for the contacts page. To conduct this research, I sat with around 8 team members and had them go through each widget telling me high priority needs, outlier items they used on occasion, and items they had no need for. Unsurprisingly, there were many fields and even entire widgets that no one was using.
"add new task" allowed users a large space to write task details, and provided clear UI for selecting time and date.
I provided an option to delete or edit a task individually.
Editing the task also allowed deletion, just in case the user changed their mind and decided the task was best deleted.
Managing tasks allowed for adding new tasks, editing or deleting previous tasks, or changing the order of task assignment, which was indicated as important for users by my PM team.
Technical constraints and final front-end product
Technical constraints and final front-end product
Because we were working on a tight timeline for this project, the handoff and front-end development happened in the very next sprint. My frontend partner was Yousof, and we connected several times throughout development to discuss technical constraints and design compromises to ship the product on time.
Technical constraints
While the drag indicator was more modern and clean looking than our previous setup, it was a bit harder to implement on the front end. We came to an agreement to still use the drag indicator and get the front-end interaction as smooth as possible.
Because there were multiple interactions to build, my Dev was running tight on time. He asked if we could simplify the build by removing the "manage tasks" button and changing it to "sort tasks". We discussed this constraint with our PM and decided to simplify the front-end version. Users did not lose too much functionality, and we were able to deliver the front-end build on time!
The current Salesforce pages had multiple different layout types, and information was found in different places depending on the page being visited.
For example, some pages had a split 50/50 layout, others had a left sidebar layout. Some had related quick links in the side bar, others had them as a full page bar. This made it difficult to know where to find information for users. I set out to choose the best layout option to use across all Salesforce instances.
My cat Fig really loves being involved in white boarding exercises.
.
Yousof and I discussing the "Drag and drop" issue.
This was the first front end iteration with "Manage Tasks" replaced with "Sort Tasks".
This is the feedback I received from my team…
This is the feedback I received from my team…
"Thank you for doing amazing mockups! I love how detailed your dev notes are and appreciate you checking in with me on how it will go into front-end." - Yousof, Front End Developer
"You always ask questions to help better your understanding, and check in a lot. You also post in Monday almost daily, so I always know where you are with your designs." - Anju, Project Manager
Previously, we had over 270 different colors to choose from in the standard Lightning Design System color palette. For the color refresh, we wanted to consolidate our color palette, so that each color had a designated meaning.
I met with the head of graphic design to ensure the design system used company branding colors. We looked at multiple color options I outlined, and decided on the United Way dark and light blue as primary and secondary colors.
This was the result
This is only a subsection of colors taken from the Lightning design color pallet. We still had the full color palette range to work with for future projects.
.
Presenting the front-end Demo with Yousof :)
Next steps for Callbox…
Next steps for Callbox…
This initiative was part of several projects designed to aid internal users' experience while navigating their main tool, Core.
To elevate this tool further, my suggestion was to spot check with users after the tool had gone live to make sure it was meeting users' needs, as well as doing a temperature check on adding the "managing multiple tasks" feature back into the design.
Since we lost that feature while trying to deliver the tool on time, I wanted to revisit it once it was live for reevaluation.
Previously, we had over 270 different colors to choose from in the standard Lightning Design System color palette. For the color refresh, we wanted to consolidate our color palette, so that each color had a designated meaning.
I met with the head of graphic design to ensure the design system used company branding colors. We looked at multiple color options I outlined, and decided on the United Way dark and light blue as primary and secondary colors.
This was the result
This is only a subsection of colors taken from the Lightning design color pallet. We still had the full color palette range to work with for future projects.
.