A

Style guide

A platform for product team collaboration

Style guide is a platform for product team collaboration. The platform serves as a framework where design and engineering teams can quickly and painlessly add product assets to product-specific guides and collaborate around those assets in real-time.

I jumped on the project during the conceptualization stage of the product and successfully lead the design of the product through final front-end design, integration and launch. After several iterations, pivots, customer interviews, testing cycles, and prototypes, we were able to create a beautiful, seamless experience to enhance efficiencies within product team workflows.

The Style guide platform will launch Q1 of 2016. http://styleguide.co

Asset management, simplified

Central to the mission of style guide was a single place to save and collaborate around commonly used design assets. Style guide provides the framework where assets are universally organized and easily accessible by product team members.

Real-time collaboration

Messaging in the app empowers team members to more efficiently use their time. If clarification was asked once in the past, let others see that same thread to save the hassle of asking again.

Task management

Bringing the entire team on the same page about what the product design standards are is no simple task. Style guide was designed not only to make setting a standard simple, but also to ensure the entire team could be involved in a natural way. The ability to assign tasks to fellow members makes it easy to facilitate team buy-in and involvement.

Front-end code library

Style guide offers developers the ability to add code snippets of each asset to the asset library. The next time your front-end developer uses this header or button, he/she can reference the pre-built, pre-tested code to avoid building the same element twice.

Intuitive empty states

Each time users create a new guide or component, there will be items that need uploaded or added. Rather than leave empty space where assets will live once uploaded, empty states were designed to be instructional and offer direction to users.

Asset approval & review

After a visual is uploaded to a product's style guide, fellow team members can be asked to review and approve designs. This is the best way to ensure each product stakeholder is on the same page. It also helps mitigate the risk of using the wrong styles in designs.

Task assigning

Since style guide is a product that involves collaboration across technical disciplines, a single team or user may not be able to complete the whole guide. A task assigning feature was built to help distribute the workload and increase the chances of optimized use of the platform.

In-app alerts & messaging

Due to it's real-time, collaborative nature, a thoughtful, precise way to communicate to users through the interface became essential. The app includes a consistently-designed system of in-app alerts, messages and notifications to ensure messages are relevant, clear and nonintrusive.

User profiles

Each user has a dedicated space within the app to showcase their activity, info and tasks. Teams can locate and comminicate with fellow team members more easily via the profile pages.

Dynamic layout styling

We felt that guides should be as unique as the product they are used to represent. Style guides were engineered to inherit the visual attributes of the assets uploaded to them.

3rd-party authentication

Integrate with the Style guide API and seamlessly link user accounts and guides to 3rd-party applications. Style guide is more than a product, it's a hub for a larger development ecosystem.

Permissions & user management

Add collaborators to a Style guide account as easy as you would in a Google Doc. Three levels of permissions allow for granular flexibility in setting and updating access restrictions.

Elegant auto-suggestions

The finest details tricle down to even the smallest of features. This auto-suggest design is universal in its use across the application making the collaborative features of the app consistent & painless.

MedHelp.org

The world's largest online health community

MedHelp is the largest online health community in the world. The platform is a rich community of content and members that share health-related questions and advice. MedHelp commands nearly 300 million unique visitors each year via health-related search engine traffic and direct visits.

While I lead the MedHelp.org redesign, it was a team effort. I had the opportunity to collaborate directly with MedHelp's VP of Product, various product managers, the highly-talented team of back-end developers, and fellow designers to successfully see this project through. This redesign included a comprehensive identity rebrand, a complete set of visual designs to improve the user experience of the community platform, a device-size-agnostic, fully-responsive web experience, a series of matching corporate pages to compliment the new brand identity, and the establishment of an exhaustive style guide/patterns library for continuity in future design initiatives.

The new MedHelp.org redesign integration is an ongoing initiative that is expected to be completed soon. http://medhelp.org

A new, comprehensive brand identity

Along with an entire visual overhaul of the MedHelp forums platform, we were asked to perform a new, comprehendive branding and identity initiative. After extensive research, moodboards, collaboration and visual explorations, a new visual palette was generated that resonated with MedHelp's target demographic.

Questions & comments

While the MedHelp project was mostly a visual initiative, we introduced core features aimed at an improved user experience for MedHelp visitors. A separation of commenting and answers was established to make content hierarchy more clear to users.

Upvoting

Second in importance to the volume of data found within MedHelp was the quality and discoverability of that data. Upvoting was introduced to enhance the quality of answers to questions for new and existing MedHelp community members.

Reputation badges

Reputation badges are important symbols for MedHelp's most influencial users. Along with carefully-crafted icons, the new brand colors gave us what we needed to make these badges bold and easily recognizable.

Report abuse

This "Report" pop-up is a great example of the attention to detail shown in this redesign. While this isn't a highly-trafficed feature, each aspect and experience within MedHelp.org uses consistent visual treatments for scalable design practices and optimized communication to end-users.

User polls

User polls are a unique and powerful feature of the MedHelp communities. While introducing a modified button for voting, we were able to maintain the upvoting convention established in the traditional answer/question forum experience.

Modern search results

The search results page leverages layout styles created on the forums page which are used in several comparable list view use-cases throughout the app. This new list view optimizes the scanning of search results for relevant answers and questions of interest.

Mobile-ready, responsive designs

Introducing a fully-responsive framework allows the platform to operate on a single set of front-end code. More importantly, all features available to community members on the desktop experience are now fully available on tablet and mobile devices.

Complete style guide library

The scalability and sustainability of this redesign initiative were at the forefront of our minds from the beginning of the project. This meant delivering a complete style guide to the MedHelp team at the end of the project for continued development and design without compromising consistency or the voice of the brand personality.

Visual preferences

Not all users have great vision - especially on a medical-related website. This visual preferences widget allows users to customize the viewing experience to their liking.

Turnkey partner white-labeling

As MedHelp aimed for a scalable solution to license its platform to partners, customizing those interfaces for each partner presented itself as a challenge. In response, we factored in an adaptive, easily customizable layout that could match partner branding requirements with minimal technical impact.

CTI

The next-generation a.i. engine web presence

Twitch.tv

A new music page for Twitch.tv

happy name

A new business name search tool

Referred

A different angle at recruiting

Rubicon Project

Executive dashboard for ad-tech executives

Hex

An industry intelligence platform

Valuation

A glance at company valuation

Check

The best (free) to-do list app

Check is an app designed to help the busiest of individuals prioritize their time and set personal agendas. To-do list apps could be one of the most common types of apps available, yet none seem to focus on the "here and now." Check boils the to-do list experience down to two types of activities: Tasks to do now & tasks to do later. No planning. No calendar views. This app means business with what's most important on a micro level.

Check was designed for the iOS platform. The app is slated to launch Q1 of 2016 in the Apple App Store.

"The to-do list app for the here and now"

Check boils the to-do list experience down to two types of activities: Tasks to do now & tasks to do later. No planning. No dates. No calendar view.

Purpose-driven architecture

Check was designed entirely around the notion of helping its users organize and prioritize tasks. Pages and features were only introduced that supported and complimented that notion, and everything else was purposefully omitted.

Optimized task creation

As an alternative to tapping "New" to initiate a new task, a quick pull-down of the page takes users directly into creating a new task.

Time estimations

In an effort to make tasks less threatening, time estimations were introduced to help users put better context around each task. This way users could alot more accurate time and mental energy for completing each task.

Modern swipe interactions

Rather than add more UI elements to the interface, we leveraged modern swipe motions to make signaling a task completion or deprioritization simple and natural.

Brand consistency

We took every opportunity to expose the Check brand in natural places throughout the app, reinforcing consistency with each instance.

medache

Medication-symptoms tracking made simple

Coming soon

duct team collaboration duct team collaboration duct team collaboration duct team collaboration duct team collaboration duct team collaboration duct team collaboration duct team collaboration

"Because remembering a headache is a headache"

duct team collaboration duct team collaboration duct team collaboration duct team collaboration duct team collaboration duct team collaboration duct team collaboration duct team collaboration

Onboarding

duct team collaboration duct team collaboration duct team collaboration duct team collaboration duct team collaboration duct team collaboration duct team collaboration duct team collaboration

Add medications

duct team collaboration duct team collaboration duct team collaboration duct team collaboration duct team collaboration duct team collaboration duct team collaboration duct team collaboration

Record symptoms

duct team collaboration duct team collaboration duct team collaboration duct team collaboration duct team collaboration duct team collaboration duct team collaboration duct team collaboration

Symptoms history

duct team collaboration duct team collaboration duct team collaboration duct team collaboration duct team collaboration duct team collaboration duct team collaboration duct team collaboration

Trends data

duct team collaboration duct team collaboration duct team collaboration duct team collaboration duct team collaboration duct team collaboration duct team collaboration duct team collaboration

Report sharing

duct team collaboration duct team collaboration duct team collaboration duct team collaboration duct team collaboration duct team collaboration duct team collaboration duct team collaboration

Lottolotto

A better way to manage lottery tickets

Sugar Sense

A top-rated diabetes management app

I'm Expecting

The most popular pregnancy app in the U.S.

Family Owl

Child smartphone monitor app for parents

Omni Analytics Group

Data science

Omni Analytics Group is a U.S.-based data science services company. Founded by a passionate, PhD data scientist, the company focuses on helping new and emerging companies tackle a wide-range of big-data, analytics & data science challenges.

The company approached us with the task of creating a brand that spoke to the target market of the company with a modern appeal and style. The brand needed to communicate a single message: "we transform data into something useful." After several iterations and explorations, the final deliverable was well-received.

A brand synonymous for data science experts

The focus was on a simple message: "transform data into something useful." We explored dozens of directions before we stumbled on what ended up being the final mark - the dotted hexagon.

Display ratio options

The Omni Group Analytics brand needed the flexibility to be dispayed in a wide range of environments. Thus, having ratio flexibility in the way the brand could be displayed quickly because clear.

Color pattern flexibility

The new color affords flexibility in using colors interchangeably without sacrificing the potency of the core Omni Group Analytics personality. The company can confidently optimize for contrast and exposure regardless of where the brand is applied.

Watermark

Many logos don't look appealing as a watermark when used in external branding opportunities without their original colors. We ensured to account for this constraint when redesigning for Omni Analytics Group.

Social media assets

As part of the rebrand initiative, all necessary assets and guidelines for social media branding were provided to Omni Analytics Group.

Get Your Move On

Delicate moving & storage

It's rare to associate luxury with moving. Get Your Move On challenges that notion each day. Time and time again they deliver the highest quality of experiences to their customers and their customers love them for it. The only thing missing was a brand consistent with the level of service they offered.

In 2012, Get Your Move On commissioned me to create a new brand and web presence to resonate with the higher-end residents of the greater Phoenix area. The redesign played a critical role in increasing web-based sales conversions and SEO metrics. The brand continues to serve thousands of Arizona-based Get Your Move On customers each year.

The moving brand with class

The Get Your Move On team was looking for a mark that echoed "luxury" and "moving." The result was simple, yet powerful - a moving truck elegantly positioned in a series of circles. The message was clear, concise and, more importantly, successfully embraced by existing and new high-end moving clients.

Flexible arrangements

For a non-digital service like Get Your Move On, the company needed flexibility in using the mark detached from the name of the company for a wider range of applications.

Advertising collateral

A high-end moving company needs high-end advertising collateral. The company wanted the collateral to evoke feelings of comfort and calmness - the opposite of most reactions to the thought of moving.

Apparel embroidery

The brand doesn't stop at a web presence or advertising collateral. As workers engage with customers on a daily basis, brand continuity and exposure continues with branded uniforms and apparel.

Packaging design

Conceptually, we mocked-up what packaging could look like if the company chose to offer moving materials like boxes and packaging.

Stationary collection

The stationary collection was a critical branding opportunity for touchpoints with existing and potential Get Your Move On clients. We designed letterheads, envelopes, business cards and invoices that resounded the voice and tone of the new Get Your Move On brand.

Valuation

A glance at company valuation

Style guide

A platform for product team collaboration

happy name

A new business name search tool

Airseed

Airfare, hacked.

Stradegy

Put your ads on autopilot

Red Towing

Premium towing services

Design process

Outcome definition

Defining the desired outcome a product is expected to produce helps uncover the root causes of the existing problem and gives essential context to solution brainstorming. Outcome definition also ensures product stakeholders are working towards a common goal.

Tools: Whiteboarding sessions, Product analytics, User interviews, Complaint emails, Surveys, Intuition, Your ears, Satisfaction surveys

Solution brainstorm

Explore a variety of solutions that will produce the desired outcome. Welcome ideas from team members, users and clients in an open dialogue. For each solution, explore all possible edgecases and consider time & resource limitations. Decide as a team which of the many directions is most likely the optimal way in achieving the defined outcome.

Tools: Whiteboarding sessions, Paper, Humility, An open mind, Patience

Scope estimation

With team consensus on the project outcome and solution direction, design is ready to estimate time requirements based on an inventory of the foreseeable deliverables within the given solution direction - number of pages, emails, error states, UI components, copy, etc. Consider time for research, design reviews, explorations, user testing and spec'ing.

Tools: User flows, Gliffy, Specs, Word documents, HipChat/Slack, Emails

Wireframes

Review all of the user task embodied in the solution at hand. Consider making notes on the timing, frequency and context of each task to assist in creating a sound information hierarchy. Move into a structural layout of each page. Socialize the layouts and solicit feedback from team members, users and clients. Iterate.

Tools: NinjaMock, Balsamiq, User stories, Sketch, Illustrator, User flows

Visual designs

Take an inventory of all UI elements that make up the wireframes. Review the team's style guide for existing element styles. For elements not yet defined in the team's style guide, look to products your target users use often and find conventions known to your users for inspiration. Ensure your designs are consistent, compliment the brand identity and align with target user personas.

Tools: Behance, Dribbble, Google Images, The Noun Project, Style guide, Sketch, Illustrator, Photoshop, InVision

Spec for development

After team, client and/or user approval (via user testing), produce page explanations, design measurements, animation examples, image/font assets, and any other details necessary to ensure product function and design is clearly defined for development. Ideally, measurements for designs will not be directly on the assets handed to developers. Instead, a name and/or link tracing back to the style guide for each of the defined elements within the mockup will be provided. There, in the style guide, the element measurements will reside.

Tools: Specctr, Style guide, Sketch, Illustrator, Font Awesome, Glyphyer

Code HTML/CSS

On projects and teams where the HTML markup falls on the designer, review the final designs to identify a set of core layouts from which all product pages are derived. Build a lean skeleton structure for each base layout that works well with mobile, tablet and desktop screen sizes. Inventory and build the remaining element for each page within the experience. Ensure that repeating element attributes (such as font size, colors, margins, etc.) share common classes/variables so future updates are dynamic and the product remains consistent. Double-check cross-browser compatibility.

Tools: Sublime Text, HTML, CSS, jQuery, LESS, Stylus, Style guide

Update product style guide

Once new designs are approved, spec'ed(, coded,) and ready to send to development, it's essential to then add newly defined element styles to the team's style guide. This way each member of the team can easily access and use the latest visuals for their next projects to ensure sustainable consistency. A style guide helps teams build less and ship more.

Tools: Style guide, Sketch, Illustrator

Repeat

About Jamison

Jamison is a diversified, passionate product designer & freelance creative director living in the San Francisco Bay Area. With 6+ years experience designing elegant and functional interfaces, he considers himself an avid problem-solver and builder at heart. He's outspoken, easy-going and nonjudgmental. He's a generalist with a broad knowledge of both user experience and visual design. To date, Jamison has collaboratively designed and shipped several full-scale web and mobile products that continue to touch millions of lives.

He takes pride in his projects from the first client/project manager interaction to delivering the final designs in pixel perfect assets (or code) with detailed specs for successful development integration.

Jamison believes in sound process, open collaboration, and communication. He's a huge advocate for product consistency and scalable design processes. Hence, he now stubbornly refuses to work for teams that don't believe in or leverage style guides and pattern libraries. He prefers a face-to-face with a user than with his monitor. He believes a firm understanding of the problem is more important than a proposed solution. He's comfortable with white boarding sessions, wireframes, mock-ups, code, and awkward disagreements on design direction (which are inevitable). A few years ago, Jamison wanted to play a more active role in helping developers build his designs and decided to learn HTML/CSS. He enjoys the empowering feeling of building his own designs while, without hesitation, admits he's no front-end developer. He has a natural interest in data science and automated software processes because of their power to free human minds. He ruthlessly believes any task that needs to be done repetitively should be automated.

Jamison has started writing articles about design thinking, starting with one called "The 3 foundations of product design."

When he's not designing, he's either hacking on one of his side projects[1, 2] or hanging with his wife and 3 kids. He's into EDM (electronic dance music), epic movie soundtracks, scifi, NHL and the occasional unicycle rides. Feel free to connect with him on Linkedin or Twitter.