top of page
Customer Dashboard Cover.png

Customer Dashboard

Scoop Technologies, Inc.

My project role:

Product Designer

Duration:

6 months

Enabling customers with the tools to manage their carpool programs.

Platform:

Web

1. Background

Since 2015, Scoop's only product was a mobile app for people who regularly commute to and from work to carpool with one another.

 

Scoop markets its Managed Carpool Program (MCP) to large companies. When companies sign with Scoop, they get to cut their parking and transportation costs, increase employee retention, and promote sustainability.

​

However, there was no central location where Scoop could show numbers to demonstrate the value of our Managed Carpool Programs to customers.

2. My teammates' hard work

Before I joined the project, our Head of User Research developed 2 personas:

1. Program managers

​

  • People who manage the program for their company.

​

  • Needs

    • Show progress​

    • Tell a story of the value of Scoop

    • Show that Scoop helps deliver on company initiatives

    • Understand the program in some detail

    • Combine Scoop with other transportation data

​2. Buyers

​

  • People who make the decision to sign or renew a contract.

​

  • Needs

    • Concrete impact on their company initiatives​

    • Trust in Scoop's future potential

    • Hard performance numbers tied to dollar spend

    • Big picture of all their company's transportation services

The Lead Product Designer also researched:

  • Dashboard design best practices

  • Eye tracking hotspots

  • Mid-fidelity wireframes

  • The first round of concept testing, in which I observed a few interviews

A simple wireframe of a dashboard made up of rounded rectangles, text, and color to demonstrate hotspots and information hierarchy.
A screenshot of multiple web dashboard interfaces in simple black and white digital wireframes.

On the left, a wireframe showing information hierarchy. On the right, lo-fidelity wireframes for concept testing.

3. Joining the ranks!

After I joined the project to bring the team up to a total of 3 designer, we divided the massive project into roughly 7 separate mini-projects:​

​

My responsibilities were for 2 projects: the Active and Deactivated carpooler tabs, and Team Tools. In this case study, I'll be focusing on the Active and Deactivated carpooler tabs.

4. What do our customers need?

Referring back to the 2 personas (Program managers and Buyers), I got more granular with the exact use cases in the Active and Deactivated carpooler tabs. This included:

​

  • Crosschecking billing information

  • Deactivating and reactivating individual carpoolers

  • Bulk deactivating carpoolers

  • Downloading data to analyze

5. Gathering building blocks

Since this was Scoop's first web product, we didn't have a web component library.

​

The design team decided the most efficient resource was to utilize Bootsketch libraries (a combination of Bootstrap and Sketch), customized with Scoop branding.

​

Occasionally, we needed to create new components to meet use cases - for example, I created a new searchbar component and documented guidelines for it.

6. First design iterations

Thankfully, I was able to take the mid-fidelity wireframes and results from concept testing to begin iterating with hi-fidelity Bootstrap components.

​

I'd essentially take this...

... and turn it into this! (With lots of notes from my collaborative meetings with the other 2 Product Designers and our Product Manager. Don't worry, they made it into Google Docs.)

7. Googling along the way

As I was designing, I'd often do more research to inform my design decisions, such as by reading Medium and UX Stack Exchange articles.

​

The other 2 Product Designers and I also held weekly collaboration sessions and would brainstorm and critique together. 

8. More design iterating

I continued to create multiple iterations of the Active and Deactivated carpooler tabs, all the while researching and collaborating with my teammates.

​

Below are some iterations where I'd fiddle around with different components and visual elements. For example, in these iterations I tweaked searchbar, pagination, scrollbar, and data table row designs.

9. Final designs

A few screens from the final designs.

Active carpoolers tab

Searchbar interaction

Deactivating individual carpooler interaction

Deactivated carpoolers tab

10. Additional support

In addition to the final hi-fidelity designs, I also made user flows using Overflow and guidelines for newly created components.

8. Final thoughts

A high level screenshot of a few dashboard screens arranged in a flow, demonstrating the flow of using the searchbar.
Guidelines for a searchbar component, including states and dos and don'ts.
Guidelines for a pagination tab component, including states and dos and don'ts.

11. Continuing the collaboration

When I was nearing the finish line, I also worked closely with the Lead Content Strategist to iron out the final copy in the designs as well as product branding.

As we headed into tech planning and engineering implementation, I walked through my designs and flows using Zeplin in meetings with the Engineering team.

​

I'd answer questions about design decisions and take notes of additional missing states or scenarios. For example, we decided last minute that we needed to enable Okta single sign-on (SSO) so I quickly sketched a flow and handed it off to our Engineers.

12. Reflection

It was incredibly educational and fulfilling to be part of a huge product launch from the ground up. I was also grateful to have been able to work alongside a group of intelligent, collaborative, eager-to-teach-and-learn folks (shoutout to the Space Jam team!).

​

Things to look forward to in future improvements and iterations:

​

  • Adding data visualization features

  • Creating web design system documentation

  • Making sure our web product is accessible ​

Only a small portion of the Customer Dashboard team, celebrating our launch with some bowling!

bottom of page