My Framer Site

BENYIN🐇

Hi there! We’re so glad to be part of your story! Here’s a little something to let you know that we appreciate you.

Code: {{reward.code}}

0/900

Send

SMS

First Story Thank You

Everything 10 % off

Use {{reward.code}} to add the code anywhere in your message.

If you remove it, we'll add the code at the end of your message.

Everything 10 % off

Reply to @oovivianeoo’s story

Hi there! We’re so glad to be part of your story! Here’s a little something to let you know that we appreciate you.

Code: {{reward.code}}

0/900

Send

Use {{reward.code}} to add the code anywhere in your message. If you remove it, we'll add the code in a new line at the end of your message.

Start from template

Manual Story reply

Giving brand more personalization when messaging their influencers

Overview

Timeline

August 2022 – October 2022 ( 1.5 month )

My Role

UX designer: Ideation, Information architecture, Navigation design, Rapid Prototype, Project Documentation, Cross-Team Alignment, Scope & Plan

Context

4 brands (GoNanas, Beatbox, BooHoo, Freedom Rave Wear)has expressed the need to manually reply to their influencers for various purposes. Brand managers need the ability to handle specific interaction and gifting scenarios that can’t be automated.

Problem

There’s no central place for a brand manager to send and manage their messages. They either have to DM from Instagram, send email or send SMS which is very inefficient. Furthermore, we want to avoid tedious setup and troublesome management experience as brand managers are less likely to communicate with program members.

Goal

Since brands use influencer programs to retain customer loyalty and boost customer engagement, Loudcrowd is committed to giving brands the flexibility.

Solution & Impact

The prototype offered the team a clear product vision and alerted PM to future feature issues. The final design was then implemented by the development team, underwent internal testing, and was launched on the Loudcrowd platform for customers. 👉 Check out feature demo

So, how we got there?🧐

1

Strategy

2

Scope

3

Structure

4

Interface

Strategy

Setting Goals & Metrics

The first thing is to set up clear design goals I want to accomplish. To understand what success looks like, I used guiding questions to define the UX design goals and UX metrics.

User Stories

PM and I collaborated with customer success team to gather 4 user stories based on the formula — “As [a user persona], I want [to perform this action] so that [accomplish this goal].”

As a brand manager, I want to send one or a group of creators event invitation, so that I can invite them show up for special brand event.

As a brand manager, I want to message my program members contest brief and message contest winners so that I can show extra love to the winners.

As a brand manager, I want to spot gift non-story posts for creators outside of the program so that I can reach out to other quality UGC creators.

As a reviewer, I want to reach out to the program member and let them know why their post was rejected so that they can make better content in the future.

User Story Map

User story is not enough to see the user actions in low level details; hence, I created the user story map to map out 4 user stories entirely, so I know what the MVP of the V0 release is. I was able to identify a few risk items (technical limitations, assumptions and pain points). Those risk items were address one by one as I go through the flow with the PM.

1.Send personalized messages to 1 or a group of candidates

2.Send contest brief and message story contest winners

3.Spot gifting for non-story posts for creators

4.UGC Reviewer Feedback

Scope

Scope & Prioritization

After identifying risk items, we scoped down on to two user stories which are more important for brand managers and more feasible for V0.

Personalized messages (invites) to 1 or small group

Send out a contest brief and select a story contest winner

Spot gifting for non-story posts of the week/month ( out of scope )

UGC Reviewer Feedback ( out of scope )

Then I greyed out areas in the two user flows what is not in the scope of this project, so I can focus on just the message activity part of the flow.

Send personalized messages to 1 or a group of candidates

Send messages to the story contest winner

Out of scope

Structure

Sitemap

Since I am designing on top of an existing information architecture, I did a site map to help myself have a overview of what pages are involved or impacted and their relationships.

Interface

Ideation & Iterations

I start with brainstorming by looking at similar interactions for reference and inspiration. Before the design is ready for development, I continued to revise my design with the feedbacks from the different teams until there are no major issues.

I gathered inspiration from various websites, including Google's Material Library, for button usage. Using these references, I brainstormed interactions and possible layouts for the 'message' button.

Inspirations and references from various websites

Existing product involved interfaces

Early sketches of me thinking through bulk select and single select

Half way through my exploration, PM has pointed out that bulk select is out of scope since there are other issues with sending to a group of candidates. As a result, we moved bulk select out of V0 so I can focus on single select.

Button on the user profile page

Change template modal

1st iteration
Initial Design
2nd iteration
3rd iteration
Final Design
Feedback:
The message button and gift button cannot be combined as they serve two distinct scenarios.
Changes from early sketches:
I combined the message and gift features because as I thought it saves more steps since message already includes
Initial Design
2nd iteration
3rd iteration
Final Design
1st iteration
Feedback:
The "Message" button is not visible on the interface, it takes extra effort to locate in the action drop down.

Changes:
I separated the "Message" and "Send Gift" button so "Message" button can be easily located on the screen.
Initial Design
2nd iteration
3rd iteration
Final Design
1st iteration
Feedback:
The "Message" button should appear disabled when the user does not have an active IG story. It should display either icon or the word. Try using a distinct color combination for button.
Changes:
I put both "Message" and "Sent Gift" in the same information hierarchy.
Initial Design
2nd iteration
3rd iteration
Final Design
1st iteration
Feedback:
Using words instead of icons makes interpretation easier. The "Message" button serves as the primary action, so it should be in the primary color.
Changes:
I tried a few things: disabled mode, different color combination, icon and word combination
See how I arrived at the final design
✨
✨
Initial Design
2nd iteration
3rd iteration
Final Design
1st iteration

1st iteration
Initial Design
2nd iteration
3rd iteration
Final Design
Feedback:
There are too many font sizes, resulting in a cluttered appearance without clear hierarchy, and the design does not align with the existing design system.
Changes from early sketches:
I started with playing the layout of the " Template" button and its display form on the interfaces.
Initial Design
2nd iteration
3rd iteration
Final Design
1st iteration
Feedback:
The "Choose a message template" button lacks usage guidance and should precede the write from scratch option.
Changes:
I utilized the design system components, even though they may not appear optimal.
Initial Design
2nd iteration
3rd iteration
Final Design
1st iteration
Feedback:
The CEO desired a straightforward method to send messages without interrupting brand manager's daily routine.
Changes:
I changed the order and added guidance.
Initial Design
2nd iteration
3rd iteration
Final Design
1st iteration
Feedback:
Now that the focus is on simplicity, the design should be simply and convene the value of the feature immediately.
Changes:
I streamlined the user flow by removing unnecessary components like the preview message display and choose template instruction.
See how I arrived at the final design
✨
✨
Initial Design
2nd iteration
3rd iteration
Final Design
1st iteration

Send personalized messages to 1 or a group of candidates

2. Send messages to the story contest winner

I began by designing the layout of the content modal window and differentiating the designs for Instagram Story, Feed, and Reel. I ensured I understood the current flow to seamlessly integrate the new feature without disrupting other processes.

Inspirations and references from various websites

Existing product involved interfaces( view content pop up modal)

Early sketches of me thinking through the modal layout

I discovered that the modal requires significant modification or a complete redesign to address the issue of information overload. Therefore, I request permission to start from scratch with the PM. Additionally, we debated whether to show message history in the view content pop-up modal, but decided it's better to provide brand managers with immediate feedback when their customer's content is gifted or messaged.

View content modal

Past messages management

1st iteration
Initial Design
2nd iteration
3rd iteration
Final Design
Feedback:
We need to identify the most frequently used function so that we can show or hide information accordingly to reduce cognitive overload.
Changes from early sketches:
I resolved the issue of overcrowding by implementing a side menu design to segregate different actions.
Instagram story modal design
Instagram feed & reel modal design
Initial Design
2nd iteration
3rd iteration
Final Design
1st iteration
Feedback:
Due to extensive changes made to the modal design, the like and comment functions should not be included in the MVP for V0 to ensure the feasibility of the new design.
Changes:
Based on validation from the customer success team, I decided to hide the label and reviewer buttons inside the post info, as they are ranked as the client's least used features.
Instagram feed & reel modal design
Instagram story modal design
Initial Design
2nd iteration
3rd iteration
Final Design
1st iteration
Feedback:
The message button should be disabled to notify users when creator does not have an active story.
Changes:
I reverted to the original design, isolating only the "Send Message" and "Send Gift" icon from the post info.
Initial Design
2nd iteration
3rd iteration
Final Design
1st iteration
Feedback:
We need to consider edge cases: how the modal looks when the story has expired, when a video cannot be displayed due to copyright issues, or when the user is on their TikTok account.
Changes:
I created mockups for various button states and designed tooltips to appear when users hover over disabled buttons.
See how I arrived at the final design
✨
✨
Initial Design
2nd iteration
3rd iteration
Final Design
1st iteration

1st iteration
Initial Design
2nd iteration
3rd iteration
Final Design
Feedback:
User should be able to access post metrics while drafting a message since message history may not provide all necessary information.
Changes from early sketches:
I provide immediate feedback to the user by displaying the message history on the same page where the message was written.
Initial Design
2nd iteration
3rd iteration
Final Design
1st iteration
Feedback:
We need to design for edge cases like long messages and multiple messages per story, and consider how the system confirms, notifies, and prompts the user after sending a message.
Changes:
If a user leaves a message draft to refer to post metrics and info, the draft is preserved for them to finish unless they exit out of the modal.
Initial Design
2nd iteration
3rd iteration
Final Design
1st iteration
Feedback:
It's unclear whether to display both the full message history and the send message box simultaneously or to display them one at a time when the other is selected.
Changes:
I designed several options to address edge cases, including testing the display of messages with 900 characters and scenarios where two message stories occur, although these are rare.
Initial Design
2nd iteration
3rd iteration
Final Design
1st iteration
Feedback:
We need to include options to send the message as either SMS or Email next to the send button. Additionally, label the message to indicate whether it was sent as SMS or Email.
Changes:
Mocked up both options: 1)View one at a time, either message history or sent the message box
2)View both the message history and message box at the sometime
See how I arrived at the final design
✨
✨
Initial Design
2nd iteration
3rd iteration
Final Design
1st iteration

Reflection

Zoom in or zoom out: Sometimes you need see a problem from page-to-page interaction level; sometimes you need to see a problem from the micro interaction level.
Don't be perfectionist: you can never fully understand a problem space fully so stop being perfectionist and start sketching out ideas.
Timing is key: the issue isn’t whether the CTA is visible, the issue is whether your CTA is visible at the point where someone has become convinced to take action
Pushback for design decisions: articulate rationale professionally and distinguish subjective and objective feedback
Identify design tradeoffs early: avoid going too far in the design that offers a mere 5% benefit to users yet demand a 95% of the team's effort to bring to life.
Revisit your goals throughout the design process: revisiting user goals, UX goals and design principles can be very helpful when making a hard design decision.

Thanks for reading till the end :D