Hello, I’m Geoffrey Gaenslen.

I’m a sharp-eyed, meticulous UI / UX Designer who loves putting myself in users’ shoes to create and improve applications. I design clean, accessible tools, and I think working in a team with a variety of perspectives makes a better product every time.

  1. 1 / 42024 Go Kinetic User experience design / User interface design

    Go Kinetic dashboard (phone) Go Kinetic dashboard (tablet) Go Kinetic dashboard (desktop) Service Status Map (desktop) Sign into Go Kinetic (desktop)
  2. 2 / 42023 Nexus by Kinetic User experience design / User interface design / HTML, CSS, and JS prototyping

    Nexus by Kinetic Wholesale (tablet) Nexus by Kinetic Wholesale (desktop) Nexus Maintenance Calendar (desktop) Nexus Support Tickets (tablet) Nexus Support Tickets (desktop)
  3. 3 / 42021 Quoting Tool User experience design / User interface design / HTML, CSS, and JS prototyping

    Create New Quote (tablet) Your Quote Locations (tablet) Select Products (tablet) Quoting Internet (tablet) Quoting Reception Consoles (desktop)
  4. 4 / 42020 WE Connect Partners User experience design / User interface design / HTML, CSS, and JS prototyping

    WE Connect Partners (tablet) WE Connect Partners Support (desktop) Monthly Billed Revenue (tablet) Partner Insights (desktop) WE Connect Partners data widgets

Thanks for visiting. Let’s connect.

Email Linkedin

Building a Better Dashboard Go Kinetic

Go Kinetic is a portal for consumers with Kinetic internet service to monitor their equipment, pay their bills, and submit requests for technical support. I was brought onto the project team in 2024 to achieve two formal objectives:

  • Bring the portal in line with Kinetic’s new brand.
  • Show a user’s orders and support requests on their home page.

The Rebrand

Updating everything about the portal’s branding would be a lengthy process, but I quickly devised a roadmap to a minimum viable product: in the next development sprint, typefaces, colors, and basic UI components like buttons would all be updated to match the new visual identity from marketing.

The mobile version of the Go Kinetic homepage, before and after the rebrand.
Left: Mobile dashboard following 2021’s brand.
Right: The same dashboard after my rebrand.

Future sprints would bring individual sections of the portal in line with the parts of the brand that required more careful (read: time consuming) quality assurance: new typographic scales and a new spacing grid to apply to every single element of the layout which, if implemented too hastily, could break page layouts in unexpected ways.

The New Widget

While keeping up with QA on the rollout of the new brand, I worked with the customer experience (CX) experts on finding a place on the dashboard for orders and support requests, while simultaneously working on a third objective of my own:

  • Improve the user experience of each section that I touch by making them more scannable.

User data told us that individual customers didn’t typically have many orders or support requests open (or recently closed) at a once; “two or fewer” described the overwhelming majority. So I designed a widget that would show two records, and scroll to accommodate others. At the dev team’s suggestion, the total was capped at four to keep loading time down, and the list of records would end with links to the dedicated “Orders” and “Support Request” screens in the portal.

The Orders & Support Requests widget in both a populated and unpopulated state.
The Orders & Support Requests widget loads up to four orders and support tickets, even though most users have two or fewer.

Unexpected Feedback

In gathering customer feedback, we asked about the new features included in the new widget and on the dedicated “Orders” and “Support Request” screens. Users loved the functionality… if they could find it. I was confused; this was exactly the problem that the home page widget—which prominently displayed the new features—was meant to avoid!

But one of the CX experts seemed less surprised: they’d been working on Go Kinetic longer than I had, and they’d gotten this feedback on other home page widgets too. This gave me an idea: if every widget is getting this sort of feedback, then maybe the problem isn’t every widget…

Maybe it’s the dashboard itself.

I reexamined the dashboard, focusing on its structure and how it responsively resized and reorganized its widgets. I found two problems undermining the page’s usability:

  • The widgets responsively compressed themselves vertically so they would all fit in the user’s viewport. But this cropped important content out of widgets, including calls to action like the “View and Pay Bill” button!
  • The widgets responsively expanded horizontally to fill the user’s viewport, which made things harder to visually scan for; on larger monitors it was all too far apart!

Just as the problem was twofold, the solution I landed on was as well:

  • Responsively change the dashboard from a fluid layout to a fixed-width layout beyond a certain viewport width, keeping the dashboard narrow enough to scan.
  • Only let the Orders & Support Requests widget—which is a list of variable length—scroll vertically. (Even then, only in views of the dashboard that had more than one column.) Make the other widgets display at their natural height and allow the entire page to scroll to encompass them.
The Go Kinetic dahsboard, with gutters around the content to make it easy to scan.
Confining the dashboard content to a fixed width at viewport widths higher than 1500px made the content easier to scan.

With the proliferation of mobile devices, most users expect to scroll a page vertically, even in desktop environments. But sometimes stakeholders can find that hard to believe. They can also find it hard to believe that white space can be good, actually!

But by talking with the CX team about these proposed changes first, we were able to present a united front to the product owners, and get the changes approved.

Conclusion

  • The overall dashboard redesign made it easier to find the button used to quickly pay users’ bills, reducing the number of support calls needed to handle such transactions.
  • The new Orders and Support Requests widget allowed users to contact field technicians assigned to them directly, further reducing support calls.