Designing Experiences

Progress Through Process

Working through a process is a great approach to solving design problems, especially those in which facilitate human interaction through digital means. If you read the recent article “Messenger and Chat Bots” we spent time in both Messenger, on paper, and through iterations in design tools.

The importance of first solving these iterations through the paper is the agility of defining these variables and presenting them without the rigidness of design software. Though there are many solutions for rapid prototyping, solving these decisions quickly and iterating lets us explore a variety of ideas before moving to construction. Low-fidelity prototyping helps us solve this equation and then bring to form our actions in the next.

Simple Product View

In this concept we strove to simplify the ads integrated in the chat while also providing a feedback component based on inputs. As you contribute to these responses overtime, the ads become more relevant based on your initial input.

As we concept, we start to not only solve for spaces in our mental models but progress in developing a solution for a variety of means as well. Much as using a mood board inspires the mind to organize these thoughts, sketching helps iterate the process to produce a sound solution.

When creating these components for one variant of our initial concept, we start to perceive active components that could be part of another solution or user story. Empathy mapping and user research become a large part of this initial process as we begin to understand in which areas we can tailor these experiences to provide a unique experience that can relay the message we are striving to convey.

Feed Product View

Starting with an initial concept and a very focused one at that, we can iterate past the modularity and find flexibility in the structures these interfaces begin to take. Iterating in this sense is not only inclusive versioning but ideation of new elements all together.

Seen in the feed view, these components with inputs start to take on new variables. This iteration focuses on inputs around friends and aligning their structured inputs with yours to serve a focal based on a core group of chosen individuals.

Through the iterative process our ideas start to take form, we have found that versioning these with different ideas allows for the most viable output. Often we start with something simple and then apply a certain weight to it as exploring, much as we define new concepts moving through we are looking to retain and simplify the ideas that we output into functioning forms.

Game Product View

Through iterations, we can apply working theories to test their validity in our concept and approach the product solutions from best-practice angles. If we are creating experiences on top of an existing brand, a framework should be in place for identifying these solutions, these should not only contain solved instances but the ideal structure for color and brand coordination. Magnifying the views to focus on a core set of actions in the user journey, these interactions become prevalent and allow us to sort out some of the conclusions we often jump to.

In the gamified view we take the user through a set of ads that can allow them to up and down vote the relevance of the information. Relatable to the simple view, the input dictates how in which we organize the segments, though with a focus that is less binary. In this approach users move through specific categories of products, then validate their approval or disapproval quite directly with two inputs.

As we break these sketches into formed solutions we still iterate through the same process, though we fit the components into a more formal layout. These high-fidelity prototypes still allow us movement but give us a strong vision for juxtaposing our mental models and starting conversations about where we can solve for these experiences.

Collapsing View

In the simple view, we drew from the experiences of Instagram, thinking a large image with white space to support the text would bring a visual balance to the elements as we arranged them through the interface.

The structure develops into smaller iterative components in which provide folding views of the larger macro focuses. Browsing along these paths will not only provide you with the categorical variables but the suggested versions as well. Using the data from your previous interactions and interests, this marketplace/chat versioning becomes more of its own menu based on predetermined profile information.

Feed View

In this Feed View, we took a similar approach from the end result of the simple view and created a feed with macro shots. Though the result here may contain similar variables here, the focus is on the middle view in which drives this experience, based on a selected input of individuals.

In the experience, which serves more like an ad/product profile, we are offered correlation through the means we choose. Developing from not only our personal data but those in which we align with from our selected group to develop offerings for advertisers as well.

We see this iteration being a strong offering in the space as it provides an interesting approach to how we view ads/pages/groups and is driven by a select set of inputs from friends. This experience could be leveraged to drive multiple versions, based on unique groupings, or as collections, you can follow from influence groups as well.

Gamified View

The third and final set of views uses inputs that align with many of the bot experiences we see in Messenger today. The selection process provides segments based on the input and then subsets of that information for further sorting. As you browse through this content and interact, you can earn badges that signify your progress through each piece of these ventures.

Aligning existing segments with new segments, users can create their own versions of sub-categories to align and further gather. As these categories are built the data could then be used to learn more about how to cross-sell these products and how these users correlate them.

Another step to understanding the interactions of these flows is building them in InVision, Origami, Framer, or Principle. Through applying animation and movement, we can refine more of the components that apply to each of these interactions and solve them collaboratively.

Sources Mentioned:

Low-Fidelity Prototype (-), Design Framework (-), Mental Models (-), Instagram Brand Resources (-), and Messenger Brand Resources (-).

Thanks for Reading, Keep Designing!

Are you interested in the Story? Follow along on Twitter, Instagram, and GitHub — Drop me a line on Messenger. Visit my React Web Application & Take a look at Dribbble.

Digital Developer @ Mr. Smith Agency. Engineering — WordPress, Shopify, React, JavaScript, Node & Cloud Native software experiences. collectedview.io

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store