Re-designing My Influency Website:
Designing a responsive website for an influencer marketing start-up.
MyInfluency is a start-up that provides influencer marketing services for local businesses in Atlanta, GA.
They aim to build a strong community between the micro-influencers and the local businesses.
When I joined the company, I was the only person in charge of the launch's branding and website design.
I was tasked with re-designing a responsive website to attract influencers and local businesses to sign up and creating strong branding for the launch.
Project Overview
Challenge
My Influency is a start-up that provides influencer marketing services to local businesses. They were preparing to rebrand and re-build their website to attract local businesses and influencers to sign up for their services.
How might the website convert and bring values to both local influencers and businesses?
Project Scope
Website Re-design and re-branding.
Role
Lead UX/UI designer
Solution
-
Re-design the website to increase user conversion rate
-
New-branding that effectively communicates its brand values.
Tools
Figma, Procreate, Webflow
Duration
2.5 Months
Design Process
Research -> Define -> Ideate -> Testing -> Build
Research
I conducted secondary research and interviews to understand the audience and their current experience.
Through conducting think-aloud protocols on the previous website, creating a user journey map and target user persona profiles, I want to gain more understandings on our target audience and the challenges they face in their current site experience.
Who are the targeted audiences for the website?
After analyzing the past partnerships that MyInfluency had with local businesses and influencers along with the site traffic data, I identified the two main audiences of My Influency's website and created two user persona profiles: micro-influencers and business owners.
Influencers Persona Profile
Business Owners Persona Profile
What is the current website experience like?
To understand the users' experience and pain points on the previous website, I conducted ten user interviews and think-aloud protocols on the website, 15-20 minutes each.
Method
I asked them to play two roles, which are the main target audience of the website when exploring the webpage:
-
A local business owner who wants to implement influencer marketing for the business.
-
A micro-influencer that is looking for opportunities to collaborate with businesses.
I then asked them the following questions in the interview:
-
What is the first thing that caught your attention?
-
What are some difficulties you encounter when looking for information?
-
What is your next action after exploring the website?
-
Would you sign up for the service? Why or Why not?
After conducting the interviews, I used empathy maps to analyze and synthesize the information I gained to understand the behaviors, motivations, needs, and pain points of the users. Finally, I summed up the research into four main insights.
Businesses Empathy Map
Insights
Influencers Empathy Map
-
The target audience of the home page is unclear.
-
The website needs strong call-to-actions to guide the audience to the next step.
-
The service information is too vague and not attention-grabbing.
-
The audience is looking for cues to see if the company is trustworthy.
Define & Ideate
Defining the Problems
Now with some insights gained from research and our target users: influencers and business owners, I want to identify what are the actual problems we are solving based on what we learned about the users' experience on the previous website.
To define the problems, I matched the insights with the identified user needs and created POV Statements to frame the problem from the target users' perspective. I then use the POV Statements to curate How Might We questions to brainstorm the solutions I can use to design my websites.
Strategizing
After defining the problems, I used a user journey map and a Venn diagram of project goals to strategize potential solutions and how I can incorporate them into my design.
User Journey Map
After creating the POV statements and HMW questions, I created a user journey map to visualize the user's flow and experience. After identifying users' actions and the pain points that they encounter, I tried to incorporate potential solutions to address the How Might We questions and plot them onto different pain points. This helped me brainstorm the structure of the website and some solutions that I can implement into the design to address these pain points. By utilizing the user journey map, I want to design the flow as a story that persuades the users and guide them to follow the step one by one.
Project Goals
Before making final decisions on the solutions that I want to implement, I want to review and understand
the goals we are trying to meet. These goals would help guide the decisions made moving forward to ensure I was moving towards the right direction.
My Influency Goals
User Goals
-
Find help with influencer marketing
-
Low-cost, time effective
-
Easy guidance to follow
-
Build a responsive website
-
Increase customer conversion rate
-
Clear and easy instructions
-
Appealing design
-
Create a tight local community
-
Great digital experience
Information Architecture
After defining the problems and strategizing for potential solution, I designed the site map to define the overall structure of the website that would be logical and easy to navigate for users.
Site Map
Lo-fi Wireframe Sketches
Taking what I’ve learned throughout my research, I started to make decisions on how to organize the content and what functions to implement based on the project goals we want to meet.
Home page
Business page
Influencer page
Prototype & Test
Building a Prototype to test
To make sure if my decision decisions are effectively meeting the project goals, I transformed the low-fi wireframes into prototypes so I can conduct user testings.
Mid-fi Prototypes
Taking the lo-fi wireframe sketches, I digitized them in Figma and added enough information for users to be able to navigate through the pages and complete tasks I would present to them during usability testing. I also incorporated the UI design according to My Influency's branding(that I re-designed earlier in the internship) to effectively communicate their unique brand personality through their website.
Home page
Business page
Influencer page
Usability Testing
After i completed my prototypes, I started to plan out how a usability testing would be conducted. I then recruited 5 participants and conducted usability testing with think-aloud protocol to see how users interact with my design and identify where improvements to the design can be made.
Test Objectives
-
If the participants can complete the tasks easily
-
Improvements to increase the usability of the test
Tasks
We asked the participants to complete the following tasks:
-
Scenario 1: As a local business owner, you saw the three services on the home page, you decide to learn more about service,
-
Task 1: Try to find more information about the service for local businesses.
-
-
Scenario 2: After you learned about the service, you decided to sign up to connect to the influencers.
-
Task 2: Go to the sign up section and sign up.
-
-
Scenario 3: As an influencer, you're trying to gather information to decide whether to sign up for the service.
-
Task 3: Try to find more information about the service for influencers.
-
-
Scenario 4: After you learned about the service, you decided to sign up to connect to local businesses.
-
Task 4: Go to the sign up section and sign up.
-
Summary
We then observed and recorded the participants' thoughts and interactions with the prototypes when they were completing the tasks.
-
Method: Remote usability test(think-aloud protocol)
-
Participants: 5
-
Age: 20-40
-
Average time: 5 min
-
Task Complete Rate: 100%
Affinity Diagram
To better understand and analyze the observations from testing, I used an affinity map to synthesize my findings. This helped me better understand the different users experiences and draw connections and uncover key insights. These insights would help me identify the painpoints the users have and what improvements are needed in on my final design to help the users reach their goals effortlessly.
Pain Points
-
4/5 don’t read through the first section
-
3/5 are confused about what to do next when they reach the last section of the home page
-
2/5 were confused which page they’re on in the middle of the task
Based on the pain points I identified, I drew some key insights to help me identify what improvements I should prioritize on the design.
Insights
-
Users don't read through long paragraphs.
-
Users need clear guide to proceed to the next step.
-
The users want to know which page they are on.
Improvement Recommendations
-
Break down the long paragraphs to sections with visual guides
-
Add another CTA section with clearer guidance of where the page is addressing.
-
Clearer navigation indicator.
Major Revisions
After identifying specific imporvement recommendations, I started making revisions to my design to improve the design:
Clear Navigation - Current Page Indicator
Users get lost in which page they're on when they're jumping to different pages. To have a clear indicator for the users when they're switching pages, I bolded the button and added an underline to indicate the current page that the user is on.
Before
After
Increase Readability for Why My Influency Section
Users tend to scroll through long paragraphs and neglect them when they see one on the screen. To increase the readability of the Why My Influency section and grab the reader's attention, I split the content into three sections and added graphics accordingly.
Before
After
Clearer process guide to indicate next step
Users are confused about what are the next actions they should take when reaching the bottom of the home page. Therefore, instead of simply putting a subscription box on the bottom, I changed it to a "Want to Learn More?" section. Users who reached the end of the page either made up their minds to sign up or not, or they were interested to learn more before making a decision. Therefore, I included the three guiding buttons that lead to three different pages for business owners, influencers, or just general visitors who have more questions. I also added a CTA action box that has a clear message of what the users are signing up for.
Before
After
Reflection & Next Steps
Reflection
This is my first time conducting user research, designing, and building a website on my own. It was quite a challenge for me since I was the only person in charge of the re-branding and the website design for the relaunch of the company. However, I learned a lot throughout this project since I had a lot of freedom to decide how this project would turn out.
I explored different research and analysis methods to understand the user experience. I then implemented them into the structural design of the website, then represented the right brand voice with the visual designs. Overall, my design successfully met users' goals and attracted 300+ influencers to sign up for My Influency’s service.
Things I would've done differently
-
I would test the mid-fidelity designs before finalizing the visual design. This will put a focus more on the logical structure of a website’s design and make it easier to identify the roadblocks that users encounter. This would also make revisions a lot more effective.
Next Steps
Future Implementation
If I have more time, I wish to implement a page for influencer blog that not only would increase the engagement rate on the website but would also be utilized for SEO Marketing.
Design Hand-off
Since our development team was busy with the service products, they couldn't participate in the building of the website. If I had an opportunity to collaborate with the development team, I hope to implement some more complicated features, like a product carousel the could demonstrate the actual service to the users.
%20final.png)