Feed Experience Design

Redesigning a brand to customer messaging experience.

Role:

UI Designer (lead), UX Designer (Supporting), Point of contact between design and engieering

team:

VP of UX, Product Manager, UX Designer

tools:

figma

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

what

Personalized content from brands to consumers.

Relay Network is a B2B2C SaaS platform that allows clients to create personalized content feeds for their customers. Experiences, comprised of messages, are unique to the end user (customer), and are built using Relay’s Customer Experience dashboard.

‍

objective

“The Feed,” as it is known, was due for an upgrade. New features were slated to be added to the product but current experiences weren’t cohesive or actionable. Additionally, the UI was in need of a visual design overhaul and didn’t meet accessibility standards.

‍

project goals

Create patterns for experiences
Establish a new UI direction
Architect a component system and begin scoping for design system build

Starting point

I began by auditing the current product. I worked with inherited mockups that began to explore proposed design updates following recent user research sessions.

existing research findings

Experiences with multiple steps were cumbersome — explore a branching pattern
Users were in favor of indicators showing the amount of time an experience would take to complete
Messages should include the option to have a menu but menu features may roll out slowly

taxonomy

Message — a single element of communication represented as a card within the UI
Experience — a collection of messages
Feed — scrollable content feed comprised of experiences

synthesizing

Audit. Review. Annotate.

I broke down every element within the existing library of cards so that I could begin to sort and organize elements and actions. Visual examples such as this help facilitate review and Q&A sessions with other teams — particularly product management and engineering.

‍

There was no design documentation for the architecture of cards that already been delivered for development and I was concerned that we were using elements inconsistently.

findings

High-level message types.

This is the breakdown of types of experience interaction types that I identified within the product.

findings

Elements within messages and experiences.

These are types of elements used for communication that I identified. There are overlaps within experience types and how elements are meant to behave and are categorized without dictating how they must appear and/or interact.

‍

Seeing interaction types and communication elements side by side allows us to map actions and UI elements across multiple areas within an experience journey. Ultimately, this informs how to define UI components with variable content and styling.

analyzing

Low-fi card information architecture exploration.

As an exercise, I created low-fi mocks restructuring the information used in the current design. Establishing an improved content presentation helped scope how much of the structure of each message should stay the same.

‍

questions and insights

How can elements of the cards themselves help indicate possible actions to users while scrolling?
Create sizing rules for general message cards
Create sizing rules for screens that begin an interactive experience, ie a poll or quiz
Cards that exist outside of The Feed (ex in a branch) should be full height
Messages that appear in The Feed (scrolling experience) should have different treatment than messages that do not (branch experience)

hi-fidelity ux

Message types are the building blocks of experiences.

Using the established message types as a foundation, and how messages can be incorporated into experiences (flows), I put together layout directions.

‍

While I was able to lock in some fundamental architecture decisions, I accounted for a level of flexibility in the UI decisions I made. We knew we’d be scaling the number and types of features offered in experience building and needed to balance scalability with defined message IA and UX patterns.

‍

ui exploration

UI Exploration: Visual Design Directions

Updating the visual aspect of the UI was slated to be a longer process than delivering updated UX direction. With more stakeholders to weigh in, I explored a few different themes to help gauge where the product’s visual design would intersect with business goals.

‍

While I try to keep most design elements aligned with the effective and accessible UI design rules, I like to present bold and saturated elements to help elicit effective criticism to work into style revisions.

quiz style

Bold and subtle approaches using different color and typeface approaches.

quiz style

Bold and subtle approaches using different color and typeface approaches.

quiz style

Bold and subtle approaches using different color and typeface approaches.

Starting point

I began by auditing the current product. I worked with inherited mockups that began to explore proposed design updates following recent user research sessions.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript

taxonomy

Message — a single element of communication represented as a card within the UI
Experience — a collection of messages
Feed — scrollable content feed comprised of experiences

‍

analyze

Updated information architecture presentation.

Process of sorting and auditing elements to build into updated feed. Taxonomy: card, message, experience, feed

things to ask/keep in mind

How can elements of the cards themselves help indicate possible actions to users while scrolling?
Create sizing rules for general message cards
Create sizing rules for screens that begin an interactive experience, ie a poll or quiz
Messages that appear in The Feed (scrolling experience) should have different treatment than messages that do not
Cards that exist outside of The Feed (ex in a branch) should be full height

‍

Feed Experience Design

what

Personalized content from brands to consumers.

objective

project goals

Starting point

existing research findings

taxonomy

synthesizing

Audit. Review. Annotate.

sample of inherited designs

section breakdown process

findings

High-level message types.

findings

Elements within messages and experiences.

analyzing

Low-fi card information architecture exploration.

questions and insights

hi-fidelity ux

Message types are the building blocks of experiences.

high level card directions are shown above

ui exploration

UI Exploration: Visual Design Directions

quiz style

quiz style

quiz style

Starting point

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

taxonomy

analyze

Updated information architecture presentation.

things to ask/keep in mind

Project recap.