Designing and building a systemized digital ecosystem.
I led the design and helped drive the implementation of a unified redesign across ACTV8me’s websites, internal and external dashboards, apps, and documentation platform improving consistency, usability, and overall brand cohesion.
Product Experience
Marketing Website
A dual web experience: traditional user-facing marketing-focused and internal app content generator.
The ACTV8me website wasn't a typical marketing website; one one side, it powered the marketing support for the business team and the other, the flagship app Mobii with content driven through micro-sites. This allowed for an agile design-to-development experience that could support the fast-moving business team.
Context
Challenge
Multiple digital surfaces needed one cohesive system.
ACTV8me’s ecosystem included a corporate website, internal dashboard, and documentation platform. Each served different audiences, but lacked a unified visual and structural language. The goal was to improve consistency, usability, and scalability across every touchpoint.
Prior to the redesign, large images were used instead of broken up. Although effective and clear, they resulted in chaotic styling. Typograhy and colors weren't code and were very difficult to control effectively as they were large images. Small screen sizes were severely affected.
Approach
Strategy
Build a systemized, agility-oriented foundation with Foundation and Sketch ready to support and pivot.
I approached the project through systems thinking and real knowldege of what was happening with the company and product. I started with a fresh Foundation project and small but organized style guide in Sketch. I then defined a prudent core set of components, designed and developed the client-facing website, and built experience wrappers for content pages used by the apps that allowed for experimentation with a standardized interface that felt seamless; this created a flexible and stable framework that could scale and afforded the capability to explore and push experiences beyond static.
Key items:
- Refresh with a lean and understandable structure using the Foundation framework
- Scaffold dynamic web wrappers for app experiences
- Use variables and partials to help maintain consistency
This design kit provided the fundamental visual elements and went a very long way; prior to these definitions, I was often asked about fonts, colors, and iconography — so much so I used to joke about getting a tattoo of the primary blue hexidecimal code on my left forearm.
Foundation
Design System
Components were designed for design speed, consistency, and flexibility to react and support the fast-moving environment.
The kit evolved into a small, but extremely signifigant upgrade from what we had with a system that included core interface elements such as buttons, cards, navigation patterns, basic states, and responsive behavior direction when needed. By standardizing common patterns, new experiences could be designed and implemented faster with stronger visual consistency.
I designed the interface with Sketch, managed it with Abstract (versioning), edited content with Photoshop, and used InVision Design System Manager to manage the design system. I built it with Zurb Foundation and augmented it with React for fast app experience pages.
I designed the interface with Sketch, managed it with Abstract (versioning), edited content with Photoshop, and used InVision Design System Manager to manage the design system. I built it with Zurb Foundation and augmented it with React for fast app experience pages.
This before and after illustrates my attempt to add a sense of abstraction. I wanted less literal, more emotional — a sensation of what this technology does: activating the world. Invisible waves become transmission vehicles. The challenge for communicating this product's capabilities at a high level is that it functionally did so much;. the concept is activation of space and time through user devices.
External Experience
Before / After Website
A stronger external presence built on clarity and trust.
The marketing website was refined to better communicate the platform, improve content hierarchy, and create a more modern brand impression. Messaging pathways and calls to action became clearer and more intentional, though not primary; the primary driver was the business team, and the web experience supported them.
Although not all my initial ideas didn't make it through, through collaboration with the businesss team I was able to design and build a massive update in a zone that was so fast-moving it was often hard to lock-in.
Although not all my initial ideas didn't make it through, through collaboration with the businesss team I was able to design and build a massive update in a zone that was so fast-moving it was often hard to lock-in.
These spacy ideas didn't make it far, but they show my process starting with an intentional elegance, ethereal — like the listening technology of the product itself. A living, activated space in time searching through attributes.
I used the Foundation framework (Bootstrap alternative) and partials (components) to create manageable repeatable patterns. The previous site used static global elements (common in the days the site was created) such as top bars which required a significant effort to update —— even on a relatively small site.
I leveraged everything I could. The great cartoonish illustrative videos were by my talented creative director that were used for videos the team used to help partners understand the technology. I included them in my web design because I knew they were familiar to the business team and would provide less friction on proposotion.
Product Experience
Dashboard
A content creator that deployed, tracked, and presented performance metrics that could be used for business.
The internal dashboard applied the system to high-utility workflows where clarity mattered most. Navigation, information density, and interface consistency were improved to support everyday use and future expansion.
Transformation
Before and After
A fragmented workflow became a more cohesive and scalable product experience.
The redesign brought clearer structure, stronger consistency, and more intentional user flows across the dashboard. What had previously felt disconnected became a more polished system designed to support everyday use and future growth; weird internal hacks became understandable patterns.
Experience Design
User flows
Core workflows were simplified to reduce friction and improve task completion.
I mapped and refined key dashboard journeys of the various permission levels to help users move through content creation, management, and content updates more efficiently and with an overall better user experience; clearer navigation, clearer decision points, and consistent interface patterns created a more user friendly experience across interaction types.
Management
Content List
Published and draft content became easier to scan and manage.
List views were structured for readability, faster sorting, and clearer status recognition. This helped users quickly locate items and manage growing content libraries efficiently.
The content would be surfaced to users through the Mobii app and partner apps (that I also redesigned).
The content would be surfaced to users through the Mobii app and partner apps (that I also redesigned).
Feature
Liquid Story Cards
The content team could create content cards that would contextually present themselves on the app to the user.
I redesigned the Mobii app centered around content cards — which weren't altogether new, but rather an upgrade to existing content so it wasn't a undue burden to the development team — and designed the feature on the dashboard controlled them.
They could be used to help the user when they first enter the main app experience; they could be of different types including static informative cards, action cards, and layered dynamic cards. The user of the dashboard could flexibly create whichever was needed for the situation.
Informative cards provide static information and media flexibility, action cards had a section devoted to calls-to-action, and the dynamic layered cards added a level of interactivity on top of the action ards.
They could be used to help the user when they first enter the main app experience; they could be of different types including static informative cards, action cards, and layered dynamic cards. The user of the dashboard could flexibly create whichever was needed for the situation.
Informative cards provide static information and media flexibility, action cards had a section devoted to calls-to-action, and the dynamic layered cards added a level of interactivity on top of the action ards.
Platform Control
Daily Scratcher Management
A dedicated control center simplified scheduling and content management.
An upgrade from the previous design, I designed the Daily Scratcher dashboard experience from the ground-up with deep knowledge of the experience (having been a creator for them prior). It was used to manage content through card set definition, scheduling, analytics visibility, and reward placements for the Mobii app.
The interface helped streamline recurring feature operations and iterations while making content updates faster and easier to control.
The interface helped streamline recurring feature operations and iterations while making content updates faster and easier to control.
Platform Control
Settings
Administrative controls organized into a clearer and more scalable management hub.
Often an after-thought, having spent extensive time with our internal operators as well as the business team that was pushing for partnerships, I wanted to make sure I spent the time and energy to make this utility view a clear and pleasurable experience.
I designed the settings experience to centralize platform configuration across clients, retailers, brands, regions, categories, tags, and delivery presets. A card-based layout improved discoverability, reduced friction, and made complex administrative tasks easier to manage as the platform expanded.
I designed the settings experience to centralize platform configuration across clients, retailers, brands, regions, categories, tags, and delivery presets. A card-based layout improved discoverability, reduced friction, and made complex administrative tasks easier to manage as the platform expanded.
Documentation Experience
Documentation Platform
A democratic documentation systyem scaled through Markdown publishing to bring everyone together.
I designed and built the documentation platform using the design system and a VuePress foundation. Teams could publish and update content through Markdown files creating a faster and more maintainable workflow. Coupled with the previous documentation site that I maintained for developers, we had a well-rounded set of documentation that would help partner content teams, developers, and stakeholders.
Content Workflow
Markdown Contributions
Content updates became faster through Markdown-based publishing.
The platform allowed contributors to create and edit documentation using Markdown files pushed through GitHub. This reduced publishing friction, simplified maintenance, and made ongoing updates more efficient; understandable, maintainable, and scalable for content contributors and developers alike.
Knowledge Experience
Documentation Results
Structured pages made technical information easier to navigate.
Documentation pages were designed and built through contributions with clear hierarchy, readable formatting, and reusable layouts that improved scanning, comprehension, and consistency across the knowledge base. The base styles that were applied were from the design I system I built which created a unified experience.
The interface morphed with the content dictated by Markdown; navigation items were added based on headings and styles applied by content types. A living document system that allowed for both our domestic and international teams to participate.
The interface morphed with the content dictated by Markdown; navigation items were added based on headings and styles applied by content types. A living document system that allowed for both our domestic and international teams to participate.
Reflection
Final Thoughts
Strong systems create better products, faster teams, and more cohesive brand experiences — and often the most challenging aspect is not the work itself, but getting to the work.
There has always been a lot of design system discussions, but these projects demonstrated for me how thoughtful design systems can extend far beyond interface consistency and into user experience.
By aligning product, marketing, and documentation experiences under one shared foundation, ACTV8me gained a stronger platform for growth, clearer user experiences, and more efficient execution across teams — resulting in a more positive and cohesive experience, both directly and indirectly.
By aligning product, marketing, and documentation experiences under one shared foundation, ACTV8me gained a stronger platform for growth, clearer user experiences, and more efficient execution across teams — resulting in a more positive and cohesive experience, both directly and indirectly.
Contact Me
I build thoughtful digital experiences. If you’d like to work together, I’d be glad to connect.
Use the form and I'll get back to you.