UX/UI DESIGN + Adobe/behance live event



01. overview


Adobe Live

I was given the amazing opportunity to be part of Adobe Live hosted by Behance to demo their program Adobe XD. Adobe Live is when Adobe invites different designers/artists to give a live demonstration on one of their Adobe programs and is a live three-day web series that consists of two hours each day. I was given one week to prepare a demo to prototype an user experience live on the topic of my choice.


We live in a world where everyone is always on their phones and where social media is a key platform to influence someone to purchase something. Product brands would pay social media influencers (people with a large following on social media) to advertise their product to the influencer's followers - hoping the influencer's followers would purchase the brand's product through the influencer's post. You see this everyday on your instagram feed ranging from beauty gurus advertising makeup to fitness models advertising a product on their social media using the hashtags, "#ad" or "#sponsored" on their captions of their photo -- hoping you would purchase the product. Fluencia is an app that is used as a tool to bridge the gap between product brands and instagram social media influencers to make it easier to collaborate with each other. This can be if a product brand wants to advertise their product more or if a social media influencer wants to build their personal brand with product brands.




One of the challenges was getting everything finished within a time frame of one week and how I would present the app from start to finish within a three day period (two hours per day). This was a good challenge to me because it made me realize what I am capable of accomplishing within a short time frame. I had to figure out what the pain-points were in both the brand's and influencer's perspective when they are trying to find people to collaborate with. 

Also, while conducting user interviews, one challenge on both the brand and influencer perspective when finding people to collaborate with was it was a long process finding potential people to work that fits with the brand's and influencer's niche/personality.





I broke down the three days of the live show into three different phases: Research, Design, and Prototype. For research, I would conduct user interviews with both the brand's and influencer's perspective to find the pain-points and develop a competitive analysis to see what other apps (similar to our service/Fluencia) is doing and what are their strengths and weaknesses. For design. I would start the low-fidelity wireframes for layout and structure and then the high-fidelity wireframes for color and imagery. Finally, I would Prototype and navigate through the app and make sure screens were connecting with their correlating screens and that the app was functional.

While conducting the user interviews, I noticed that both the brand and influencer wanted a filtering system to find potential people to collaborate with to make it much easier. Filtering profiles by number of followers, type of niche, engagement rate percentages and other characteristics will help save time when finding potential profiles to collaborate with.


02. research

User Interviews

User Empathy

Being a social media influencer on instagram, I can empathize with the influencer's point of view in the struggle of finding brands to collaborate with. In order to understand the Brand's and Influencer's pain-points, I had to conduct user interviews and the main objective was to understand the pain-points they encounter when they are either searching for a brand or influencer to collaborate with on social media.

I interviewed Staci Brinkman, the CEO of Sips By, which is a monthly subscription tea service that sends you 4 different teas customized towards your personal quiz results and personality type. Also, I interviewed a social media fashion and lifestyle influencer, Zina Dichoso who runs a blog for the everyday curvy woman.


Competitive Analysis

Competition's Strengths/Weaknesses

I developed a competitive analysis to see what other apps are currently doing that is similar to Fluencia. The whole point was to distinguish the strengths and weaknesses each competitor app has and how we can improve both the strengths and weaknessess with our app, Fluencia.


03. Design

Low Fidelity Wireframes

I developed low-fidelity wireframes to get a rough idea on how the structure and layout of the app will look like so it will be easier for a user to navigate throughout the app. I took consideration on the filtering system and search system feature both the brand and influencer wanted in the app and see how those features will be integrated/displayed in the app layout.


Adobe Banner 2-01.jpg

High-Fidelity Wireframes

After developing the low-fidelity wireframes I added color and images to the high-fidelity wireframes. Also, I included the audience from the live show to make a logo and a name for the app which we agreed to be Fluencia. Adding imagery and icons really gave the app more personality and emphasized some buttons and features of the app.

highfi adobe banner-01.jpg


I prototyped and navigated around the app to make sure everything is functional and each screen is connected to the correct screen on Adobe XD's prototype feature. Since we have two users (the brand and the influencer), I decided to show each of there user journey when they sign up and login the app. I labeled these B2I (Brand to Influencer: When a brand is looking for an influencer to collaborate with) and I2B (Influencer to Brand: When an influencer is looking for a brand to collaborate with).

Adobe Live Event banner-02.jpg

Adobe Live Event

Below is the three-part series I was in for Adobe Live in their headquarters located in San Francisco, CA. It was such an honor being able to be a part of this live event, and I am so grateful my product design mentor, HebaH Design recommended me to be part of this amazing experience!