An order tracker telling the whole story
Oceanworks / Plastic Action dashboard
Oceanworks is a marketplace for recycled ocean plastics. In essence, they work with other companies and organizations around the world to pull plastic waste out of our oceans, process it, then sell the raw materials to brands hoping to make an environmental impact. Oceanwork's secret sauce: they use blockchain and AI to track every movement that plastic makes along the way-from the exact location where it was extracted to its final deliverty route. This ensures a true, measurable impact on the environment.
The Plastic Action Dashboard is an online portal that allows Oceanworks customers to track their orders, download material resources, marketing materials, and see their impact numbers. Buyers see a timeline of their plastic, resin, yarn, or other material purchase; executives and marketing folks see their environmental bragging numbers.
Project Type / Agency
Responsive Web App / The Gnar Company
Role
I helped sell the project, led discovery workshops, collaborated with Oceanworks internal dev team, designed the app, and worked directly with the OW VP of Brand.
Design Activities
- User Journey Mapping
- Requirements Gathering
- Wireframes Prototyping
- Visual Design
- UI Kit/Design System
Questions & Challenges
How do we rep the brand and balance practical order information with a premium visual experience?
How might we structure and design the application to integrate future-planned features without much re-work?
With a lot of information at their disposal, how do we not overwhelm visitors and give each user type what they need, when they need it?
The OW brand story was designed to be front and center.
One major goal of the application was to represent the brand well. The leaders at Oceanworks wanted a seamless experience, with no discernible difference between online and other existing materials. Oceanworks has a vibrant color palette and distinctive typography (especially for the Impact Metrics), but photography really tells the story. We leveraged OW vast library of custom photos to bring texture and warmth to the application as well as help tell reinforce the Oceanworks story and mission.
And since the Plastic Action Dashboard was packed with power, we wanted to make sure the users knew what the app could do. We designed and wrote a series of short tutorial-style screens visitors see when they first sign on.
Customers quickly see the exact location of their order.
Product buyers can quickly check the status of their plastic orders and get a realtime view of the delivery. In some cases, customers could have multiple orders being completed in parallel, so we wanted to keep the dashboard spare and simple. Again, we tried to incorporate photos to further reinforce the Oceanworks brand.
The library of resources was designed for speed.
Recycled plastic orders also have lots of documentation that comes with them. These docs vary from compliance forms and certifications to invoices and marketing materials. We wanted those articles to be available for download on the order pages, but we also designed a searchable, filterable resource library.
We also knew how important notifications were for orders, and since Oceanwork's has lots of steps, we wanted to give users a way manage their email and text preferences.
Early design workshops helped us understand the brand.
We worked closely with Sales and Brand throughout the initial discovery sessions and workshops to learn more about their internal processes, customers, competition, brand personality, and goals. Ultimately, these conversations and decisions drove decisions for the first version of the Dashboard.
Quick prototypes helped us talk to users and engineers more frequently.
Producing high-fidelity wireframes allowed us to get faster input, which ultimately sped up the overall project and led to a better app. And because much of the experience relied on home data APIs, we worked with the engineering team from the start of the project to understand what's possible.
Let's talk.
Copyright 2023 Joshua Hathaway - Handmade in Austin, Texas - Eleventy, Sass, Nunjucks, HTML, and good ol vanilla Javascript