Product UI, website and launch film, shipped as one story in nine weeks.
Edge Network needed more people to understand and discover its product. We designed the control layer interface, built the website and produced the launch film in one engagement. All three show the same working system.
- Client
- Edge Network
- Sector
- Robotics and distributed technology
- What we did
- UI app design, Strategy, Front-end development, Video production
- Built to drive
- More product discovery.
The problem
A product that is hard to grasp from a description.
A control layer for autonomous fleets does its work out of sight. Described in text, it reads like infrastructure jargon, and a visitor can leave before the idea clicks. The interface, the website and the launch film all had to be ready for the same launch.
- The product's value only shows when you watch it running.
- Interface, site and film had to tell the same story.
- Nine weeks to deliver all three.
The solution
Show the system working everywhere it appears.
We treated the product UI as the source of the story. The website and the launch film use the same interface and the same product moments. A visitor meets one product whether they scroll the site or watch the film.
Our intervention
What we delivered.
Four workstreams, run by one team inside the same nine weeks.
- 01
Strategy
We set out what a first-time visitor needs to understand about the control layer, and in what order, before designing a screen.
- 02
Product UI design
Interface design for the control layer, so the product can be shown working instead of only described.
- 03
Front-end build
The website front end built on Astro and deployed on Vercel, designed alongside the product UI.
- 04
Launch film
A film that shows the control layer in action, produced in the same engagement as the site and the interface.
The Stega fix
One engagement, one story.
Split product design, web and film across three suppliers and you usually get three versions of the product. We kept all three in one team on purpose.
The interface is the reference
We designed the UI as the source for everything else, so the site and the film show real screens instead of illustrations.
Site and film share their moments
The film and the website draw on the same product moments, so each one makes the other easier to follow.
A front end that stays out of the way
Astro ships plain HTML by default and Vercel deploys every change, which kept the build quick to ship and quick to load.
Stega initiatives
What we are proposing next.
With the launch out, the next work is about getting the product in front of more people.
Cut-downs from the film
We are proposing short clips from the launch film for social posts and individual product pages.
Interactive product moments
Next we want to bring parts of the UI onto the site as interactive demos, built from the same designs.
Discovery measurement
We are proposing a simple analytics setup that shows which pages and clips bring people to the product.
Toolstack
The tools behind it.
- FigmaProduct UI design and the website layouts.
- AstroThe website front end, shipped as fast static pages.
- VercelHosting, with a deploy for every change to the site.
- GitHubVersion control behind each Vercel deploy.