Loop Digital Media Inc.
Responsive Web Design: Small business website re-design
B2C, Lead generation
.png)
.jpg)
Project Overview
About
Loop Digital Media Studio is a Social Media Marketing company. They have been in business for 10 + years, and focus on small to medium clientele.
The Problem
Originally branded as Loop Barbados, Loop Digital Media Studio started as a local travel booking website that would host travel information and advertising space on their site in exchange for compensation targeting travelers.
They updated their website some years ago to show that the business had since evolved. However, it does not show off their current work, and is not engaging enough to use as a portfolio to showcase to potential clients.
The Goal
Loop Digital Media Studio is seeking an updated website to reflect its current business offerings.
My Impact
They would like to have a site that is pleasing to the user with a clean UI that allows them to navigate quickly and intuitively. The would like to showcase new, crisp, and relevant images of their work. They will retain their logo and color selection.
Research
User Research Study
I sought out users who had sourced social media assistance in some kind of way, be it for their business, personal or other. Through user surveys, I wanted to understand with these users:
1.
2.
3.
How they go about in their search for social media assistance - do they choose based on an online search with reviews, word of mouth, a personal connection/trust, etc.
If online, what draws them in and what impresses them the most? Is it the amount of valuable information, the creative aesthetic, what the business offers? Is it all, one or a combination?
Concerns they had when searching for the ideal company to
work with and how they came to chose.
Here's what users said was most important to them:
1.
"Showcase examples of other accounts they do work for."
"Being able to view a portfolio of work is a plus."
"The most important information about services being offered should be easily accessible."
2.
"Client reviews."
"A clean well-organized aesthetic would catch my attention."
"Visually appealing."
3.
"Ease of access."
"User-friendly."
"Easy to use."
4.
"Nothing that takes long to load."
Competitive Analysis
Looking at other local advertising and social media sites, I narrowed down a selection of competitors with same to similar offerings and size of business.
Below are three companies that can be considered their direct
competitors with similar relevance.
.jpg)
Assumptions
Going into this research, I assumed that with these established businesses, their sites displayed a well-diversified portfolio of their work and a list of offerings. With some sites I discovered:
-
Not everyone had a portfolio or showcase of work
-
Companies with low-contrast or bright font in their logo tended to use the same colour throughout their page. Thus making it difficult to read some of the text.
-
Some links did not work
-
Some fonts and hover text were very, very light, and could be a concern for the visually impaired.
Define
Empathy Map
Through the user research, I could see that users were having
a variety of thoughts, feelings and concerns around the topic
of seeking social media assistance.
-
Would they understand my brand?
-
Would they be upfront with pricing?
-
Will this help my time management by delegating this task
to someone else? -
Should I go with the company that was suggested to me by
a friend, or find my own?
Here is how I summarized some of these thoughts and feelings into an empathy map:
The team was pleased to gain feedback on what users were thinking in order to consider ways to reflect the user's concerns in their business and on their site.
User Study & Persona
From here, I put together the below persona to reflect the average user in summary, along with their needs, frustrations and motivations surrounding this topic.
Task Flow
The task flow I focused on would be a user coming to the site with the
end goal of contacting the team in hopes of working together.
The user would initially take a quick look the services and work they
offer, and if they are impressed they would then send an email from the contact us page.
Design
Design objectives
With the redesign, the team used their original logo and colour palette of coral and turquoise but incorporate monochrome and strong pops of colour to satisfy a greater audience, rather than play with colours that could feel too feminine and specific.
Original website design
A snippet of the current site
UI Kit
The team wanted a font for the headings that would come across as more creative and unique.
I chose a font with the intention of conveying a relaxed and creative tone, and one that would blend well with the creative 'wispy' elements that would be dispersed throughout the site that would add an element of lightheartedness.
Vision Board
To get a better idea of how the team envisioned the new site, they sent over some ideas with abstract elements, and I searched for some portfolio sites that had a similar set of colours to what they had in mind and
added to it, to make a vision board with
mutual ideas.
Low Fidelity Wireframes
I started small, by iterating on the four web pages that the site currently had.
Mid Fidelity Wireframes
I added the colours and the fonts and played with the elements that would convey the businesses' creative side.
It was at first tricky to incorporate the brighter colours with the monochrome, so it took a few tries to blend them in harmoniously.
Initial Design
Version 1
Version 2
The team was pleased with the final version, so it was time to test and see what users thought of the colours, pages and flow.
Test
Iterations
The user feedback was very helpful especially in better understanding how to adjust the overall layout of the homepage, and where users felt it would be better to see the information presented.
I gained a greater insight with the CTA's that users wanted to see more of, and where they go when they want to use them when navigating around the pages.
Original Iterations
I added the values to the about us page, and broke it up with colour and elements, and made this page more of an information based page.
Users said the message confirmation page
was too busy and colours were too distracting.
I simplified this page and used more
subtle versions of the colour palette.
Users said there was an overload of information on
the home page and it was too dark.
They felt that the company values should have their own page, or be featured alongside the about us page, intertwining with learning more about the business.
A few users pointed out that there was only one CTA.
I shuffled things around,
and simplified the home page,
to keep it inviting and the information
light.
I broke up the monochrome,
used more from the colour palette
and added simple welcome text
where most of the information was
before.
I added another CTA closer
to the top of the page.
I edited the header text here to
make it more engaging.
.jpg)
Reflections
1.This was my first opportunity to working alongside clients to bring to fruition new ideas for a project. These clients were trusting when it came to understanding their vision for the site, and how to make it satisfying from the user’s point of view.
It took a few iterations to balance what the clients desired and the feedback received from the users to find a harmonious medium and land on a final design and layout. The clients greatly valued hearing from the community of users the impact it had when re-creating the site.
2. It is important to decipher the difference between constructive feedback and opinions. With each iteration, there was more and different feedback creating a continuous and timely desire to constantly want to improve the UX/UI. Ultimately, it was to decide which iterations would bring about the greatest improvement to the user experience, and satisfy the team and users as much as possible.
Next Steps
The site is not currently live, but this would be a great opportunity to practice developer hand-off to ensure the successful implementation of the design in the final product.
.png)
© 2023 Alexa Bourne