Ed Tech Wireframe Kit
Lead Designer
Client Project
Ed Tech
Problem
When working on net new product ideation for a job platform, my team wanted to be able to show concepts faster. In order to help us communicate different potential directions and incorporate feedback more efficiently, I spearheaded creation of a wireframe kit.
Approach
While my team worked with product folks to explore directions for the product we designed, I took the lead on cleaning styles, offering feedback, componentizing parts, organizing our library, and iterating on how we could display information.
I wanted to make it easier for my team to iterate quickly, and to allow product people to see a broader variety of ideas prior to high fidelity execution, so we could face deadlines with increased confidence around alignment.
I established distinct color and design styles for wireframes, to make it clear to cross-functional stakeholders when we weren’t sharing final designs. I also wrote documentation, to make it easy to use what we had as a design team, bucketing wireframe components for easy reuse and iteration.
Wins
Established pared back color scheme of blue-toned grays, limited line weights, and illustration-invoking styles to unify wireframe styles across use cases.
Built over 120 unique wireframe components with prototyping interactions, many of which with numerous variants.
Made over 400 variants total, averaging about 3 variants per component.
Organized components into 6 buckets and labeled with details on state of use.
Reduced tension with product folks by using consistent wireframe format for feature-based discussions, thereby clarifying meeting intent and scope.
Lessons
I would want to start building a toolkit like at the start of a project in the future, instead of starting this type of effort partway through a project.
After working on this effort, I could leverage insights to build something similar more efficiently, and would be able to advocate for its utility earlier.
