A

Style guide Product Design Walkthrough

OVERVIEW

Style guide is a personal product of mine. After experiencing the frustrations of design consistency and pattern library use on several design teams, I was determined to launch a solution to address these pain. The vision of Style guide is to make it easier to design and build as a team. It serves as a sandbox where product design standards can be easily created, updated and shared across teams and across organizations.

I was responsible for the product throughout it's entire initial development cycle. This included requirements gathering, customer interviews, user flows, wireframes, visual designs and front-end HTML/CSS mark-up.

Style guide is expected to launch in 2016. Try it while it's in beta by creating an account here.

DESIGN PROCESS

1. Define outcomes, system requirements

Starting from scratch is both fun and a lot of work. I started by collaborating with my fellow design team members, developers and project managers on the pains they feel in trying to communicate and maintain design standards. From these conversations I created a shortlist of features for MVP.

2. Arrange UI elements, Wireframe

From the short list of features, I created flows and hand wireframed potential layouts that accommodated each feature. Once I worked through a single pass of the platform with sketched wireframes, I moved these wireframes into a more formal structure in Illustrator.

3. Build functioning MVP, Prototype

While us designers love nothing more than to think about how the end-product is going to look visually, I resisted my urge to fully explore a visual design. I knew the designs and layouts would drastically change once users started touching it so felt waiting on the final designs was a good decision. We moved straight into code with the wireframes and build a functioning MVP.

4. Perform customer interviews

After the MVP was built and "working," we went and solicited feedback from designers from teams around San Francisco. The feedback from these interviews sparked ideas that would grow into core product features for the platform.

5. Generate a visual palette, navigation language

Now that we had a firm grasp on the scope of the platform's features from both 1) building and testing an MVP and 2) incorporating feedback from interviews, I moved into several directions for visual designs.

6. Create final visuals, all pages

I solicited feedback from the very customers we initially interviewed on their preferences for the final designs. After several pivots and iterations, I had settled on a final design that would apply to the platform across use-cases and user experiences.

7. Handcraft responsive, front-end code

As a personal goal of becoming front-end code proficient, I moved the designs from final PDFs into front-end HTML/CSS. The code was fully responsive code, covering users on mobile phones, tablets and desktop devices.

DELIVERABLES

TAKEAWAYS

Style guide was one of the largest software projects I've had the pleasure of working on to-date. What initially was intended to be a simple concept, the design use-cases proved otherwise. Simple concepts are often the most difficult to build. I'm excited to see how the market reacts to this product. While I'm confident in the product, I'm also confident it will need changed and improved over time as we solicit feedback and iterate based on user needs.

Style guide is expected to launch in 2016. We're in beta. Give it a try by creating an account here.