Frankford Shade Designer
Sales Enablement · Interactive tool
- Role UI Developer, MCG Strategic
- Stack Vue + 3D configurator
- Scope Front-end build
- Vue.js
- Sales Tool
The work, up close
The brief
Frankford's sales team needed a tool to use right on the floor: a way to demonstrate the different umbrella models to a buyer standing in front of them. The answer was an interactive 3D configurator. I built the interface it all lives in, working alongside the designers, the 3D team, the backend team, and the client.
What I built
-
01
Built the front end in Vue: the configurator interface, model and option selection, and the data layer behind them.
-
02
Worked with the 3D team to integrate their model viewer into the interface, so reps can show each umbrella live as it's configured.
-
03
Worked with a large product dataset from the database and shaped it into options a salesperson can browse quickly.
-
04
Coordinated the front end across the designers, the 3D team, backend, and the client. A project with a lot of moving parts, and a full team effort.
Key decision
The 3D configurator is the 3D team's code. I wired my interface to their JavaScript variables, so each button a salesperson clicks pulls the matching data into the model and the interface.
The Challenge
The hardest part was tying all the different areas of the project together. I'm not a 3D model expert, and this build taught me a lot about getting 3D, product data, and UI to come together as one tool.
Where it landed
The sales team uses the tool every day to sell umbrellas, configuring live 3D models with buyers on the sales floor.