Apple Business Chat

Wireframes Strip


Representing An Idea In A Screen

Important information collected during the pre-design process helps make informed, objective, smart decisions product features and customer experiences. By the time they are represented in a screen-fashion, they are wireframes.

Wireframes take many different forms (low fidelity and high fidelity). They are close to the fit and finished product but they are never 100% exact.

This is an example of a higher-fidelity wireframe that highlights features and personalized experiences that client desired.

Conversational Commerce

Chat Wireframe
Wireframes Example 1
Wireframes Example 2
Wireframes Example 3
Wireframes Example 4
Wireframes Example 7
Wireframes Example 6
Wireframe Example 10
Wireframe Example 11
Wireframe Example 12
Wireframe Example
Wireframe Example iPhone Notification

Design Wireframe

Content | Function | Constraints

Sometimes wireframes serve the purpose of setting up “guardrails” for a digital product that has content that is constantly being updated.

They inform future dev teams, designers and PMs about restrictions in the product — such as character limits, file sizes and aspect ratios. These guides are very helpful in streamlining work.

Here is an example of a social chatbot design guide I created for my client.

Wireframe Styleguide 1
Wireframe Styleguide 2
Wireframe Styleguide 3
Wireframe Styleguide 4
Wireframe Styleguide 5
Wireframe Styleguide 6

Style Guides

Language | Function | Tone

In addition to character limits and aspect ratios, it is important to more nuanced UI/UX guidelines that include tone of voice, ease of use, familiarity and other design principles.

Design principals can be both universal (familiar, easy) to specific to a product (ex. chatbots should feel conversational) to brand tone of voice. Often research into a product, demographic, and corporate branding can assist with this.

Here is an excerpt of a UX guide for conversational commerce created for a client that was shared with copywriters.

What Users Expect from a Chatbot

Fit & Finish

Moving the Product Forward

The complexity of the wireframes I create for clients differs greatly from project to project.

Factors such as client preferences, the types of the content and scope of work. Wireframes and styleguides — both low fidelity and high fidelity — are meant to be a springboard for developers and content editors to work iteratively and in an agile way.

When it comes to good design, the details are what sets the final product apart. For a home, it’s the details – from the shape of the foundation to the fountain in the front yard – that create a unique, polished look. The same is true when it comes to a website.

A well-designed site, app, chat or user experience requires careful planning and a phase-based approach. The goal is to collaboratively build a fit & finish prototype for release.

This is a unique website which will require a more modern browser to work!

Please upgrade today!