Starcatcher

Project Type: UI/UX Design, Data Visualization, Rapid Prototyping, Front End Development 

Design Problem: Dropbox’s biggest advantage over its competitors is the organic sharing network that exists as its user collaborate over shared folders to get work done. However, it is hard to visualize its magnitude and complexity specially when being used in a sales context. The challenge, simply put was to create a data visualization that was enabled sales reps to visualize and present large sets of network data in a simple yet beautiful manner to prospective buyers of Dropbox Business.

Process: In the past, a similar (but deprecated) tool has existed which was very popular amongst the sales teams. Before jumping into designing the new product, I went back to understanding why the previous tool was successful and understand its weaknesses. Business by itself are always evolving and the assumptions made back then simply were not applicable any more.

The next step was to undertake a user research study - understand the use cases of such a product. Create a user persona for an AE-”Account Executive”, the primary stakeholder of this new product. It really helped the team to identify opportunities and discover user pain points. With a clear set of goals I was able to define the problem and work with the PM to prioritize a set of V1 features. Prototype the graph visualization in d3.js & three.js as we were targeting high performance and flexibility that webGL provides. At the same time, I was indulging in some low fidelity prototyping to give the team a better idea of what we may be building.

After we were able to prove out the technical feasibility of such a product, I set out to create wireframes using the Dropbox’s new UI library and helped set the design direction of the product. Dropbox’s UI library wasn’t meant to create data visualization tools, so a lot of effort went into making sure the product ‘feels’ like Dropbox. Since the product was meant for external presentations, a lot of thought went into picking out brand colors that adhered to visualization principles while maintaining the Dropbox identity. Our work was not only well received by our users but also got recognition from company leadership - the core team members were awarded the ‘Dropbox Spotlight Award’.

Final Output: Interactive prototypes in figma. The web app was developed using react, d3 & react-three-fiber.

Applications: Figma, d3.js, three.js