2020
Desktop App, iOS/Android Apps, Digital Marketing, Brand Management
User Stories, Application Maps, Wireframes, Visual Design, Prototypes, Styleguides, Production Graphics
Lead Product Designer, Strategy, Creative Direction
Building a new platform for the future of work. Working with Braidio designers, engineers, and product owners through product definition, strategy, user stories, wireframes, prototyping, visual design, motion design and user testing.
Rebuilding a Platform - Braidio’s previous platform was built on several different software solutions pieced together. It was lacking a unified design system that tied together mobile, desktop, and marketing for the multiple apps under the Braidio umbrella.
Broad Feature Set - Braidio’s user base had a wide set of desired requirements ranging from group conversations, to workflow management, to knowledge sharing. Industries served by Braidio also varied greatly from construction, to field services, to veterinary medicine. We needed a very flexible system that could accommodate the various needs.
We gathered pain points and desired requirements from the existing user base and developed a set of user stories. Working with executives and engineers, we prioritized a set of stories that would solve for the many pain points we encountered.
With the prioritized user stories we developed user flows and overall architecture for the key features including group conversations, knowledge sharing, workflow management, and the first run experience.
With rough flows completed we developed a set of wireframes covering the key stories. Detailed interactive prototypes were created for the stories pertaining to the two biggest unknowns (workflows and knowledge sharing)
A detailed testing plan was developed for the key stories relating to knowledge sharing and workflows. Quantitative testing was carried out in Maze with several users.
Non visible UX, even fairly common actions like "@" tagging had poor discoverability indicating the need for onboarding and education. Once discovered, usability was high and led to good results. Overall comprehension of the two major sections was good so with some minor reworking we moved on to visual design.
We established a set of fonts, colors, and an icon style that designers used for mobile, desktop, and marketing. A Figma team library helped maintain consistency by provide a single source for the evolving guidlines.
With the variety of features and the need to customize the UI for various clients we needed a cohesive, but flexible design system. Atomic Design principles were used to design a component system within Figma that could easily be shared and edited by the team. It allowed enough flexibility to customize the look for clients while maintaining consistency for maximum usability.
Figma components were built to be fully responsive and autolayout was used to provide consistency and flexibilty for varying screen sizes. The majority of components were designed to be used for both mobile and desktop.
Braidio provides a way for users to contribue to the community knowledge base with Knowledge Taps. Finding relevant content is made easier with powerful filtering. Subscriptions help keep you up to date with frequently searched topics.
With Workstreams you can assign and track projects, tasks, training and more with one simple tool. Add multiple users or even groups and attach a wide variety of file types.
Create your own quizes, checklists, tutorials and more with Braidio's powerful content creation tools. Assign Content to different users through workstreams and save out custom templates for repeat use.
Motion tells a story so it was important to have visual feedback for interactions and smooth transitions to help users understand where they came from and where they are going. We used Principle to create a detailed micro animation style guide and prototypes to show the transitions for the key stories.
