CirrusLED
Design a digital signage software company website for a better user experience.
Seeing through the customer’s eyes and designing the website interface according to the research result
Overview
Digital signage is a huge market – many organizations either have already adopted it or are planning to soon. It is a powerful visual communication tool that engages audiences, improves efficiency, and reduces operating costs. With digital signage, businesses can streamline communication with their employees and customers. This improves engagement, productivity, and profits.
Today, we continue to seek new and innovative ways to develop simpler products and services that are adaptable and evolve with any business and maintain our commitment to quality and affordability.
Cirrus LED was built on the idea of creating a better, more cost-effective way of engineering and manufacturing high-quality, cutting-edge modular display systems for outdoor digital signage.
The client reached out to me and asked me to design a website that aligns with users’ needs and provides a better user experience. So, I set out to fix the usual users’ typical issues by developing Cirrus LED site with an interactive layout and user interface.
After getting the overview of the problem, I stepped into the findings of the user’s pain points.
Cirrus LED website must fit all screen resolutions and provide a better user experience. I must ensure that the website is functional, intuitive, reliable, user-friendly, and easy to navigate. These factors increase the pleasurability of interacting with the site and make browsing a more pleasant experience.
Objectives
The main objective was to build a website where users could view the products and estimate their ad revenue.
Design the website from scratch and incorporate smart solutions by learning directly from the users - what/why they use the website for, what is causing problems, what are they looking for, etc.
Make sure that it is an easy-to-use web application and the customer experience is built for convenience. In addition, Users should find the process simple and intuitive.
The proposed website design should also meet several dimensions that enable the essential services and enhance users’ experience.
I also wanted to use a few predictive technologies to help users find important contextual features. The concept will address the user’s pain points, resulting in a better experience.
Challenges
The main challenge was to understand the user flow; since I designed the website from scratch (not redesigned), there were no existing users.
Create a design better than existing/competitors’ websites that attract users through a simple and accessible experience.
Figure out the ways to enable users to understand the website at a glance and easily achieve their goals.
Role
Ux/Ui designer in a team of 4
Tools
Figma
Figjam
Jira
Teams
Mircosoft Suite
Timeline
Start: January 2023
End: April 2023
Process
Discovery
Define
Design
User Testing
Reflection
Process
Discovery
Discover and Understand
The first step in a website design is the understanding phase. I started by studying the existing similar websites. I then identified the areas that need improvement and introduced enhanced solutions.
Competitor analysis
To understand the competitive landscape and site architecture, I looked at direct competitors like Optec, lighthouse-tech, Lcf-led, silicon-core, vantage-led.
The competitive analysis helped me validate my hypothesis and see what competitors are doing in the current market. In addition, data from competitive analysis and user research will help me identify user pain points and gaps in existing solutions that I may not be aware of.
To better understand users’ needs and pain points, I defined a series of questions and researched the problem.
Which competitors address user pain points?
What are the competitor’s strengths and weaknesses?
The goal was to compare and identify common features across the competitor’s websites.
Findings
Use a sentiment selling approach.
Make an open-content layout. Build zero to no hidden content on the products page.
Highlight key product features.
Highlight Social proofs such as case studies and top brand clients.
The most important takeaway from this activity was learning how different websites organized their content and the overall layouts.
User & Audience
The property owns and entrepreneurs who want to make more money with advertisement.
Market research
It is essential to get a big picture of the market to understand what we don’t know yet, the recent trends, rules & Regulations, news, etc.
Growing market & Scope
Digital signage used in public venues has a broader reach, with up to 10% of American residents aged above 12 seeing the content compared to 41% on Facebook or 43% on the internet.
The global digital signage market reached $23.5 billion in 2021. It should see a CAGR of 6.3% between 2022 and 2031, reaching $63.3 billion by 2031.
The adoption of digital signage solutions is on a steady rise, with 60% of enterprises without digital signage in their stores planning to invest in the technology within the next two years.
80% of brands that use digital signage record an increase in sales, up to 33%, with a greater appeal towards epicurean product purchases instead of planned purchases.
Define
User research
I conducted qualitative information research and quantitative data research to better understand users' needs.
Research enabled me to dig deep into my understanding of users – not only their immediate frustrations but also their hopes, fears, abilities, limitations, reasoning, and goals.
User Interviews
I conducted in-person interviews with targeted users to better understand under what circumstances they will trigger issues and how effective the existing solutions are. I also figured out why they use the competitors’ websites, what they look for, what they need, trying to learn and understand their user experience and pain points.
During interviews, I gathered qualitative data about their goals, needs, frustrations, and motivations. Here are the questions I asked during the interview:
What kinds of issues are you facing right now?
When interacting with digital signage websites, what are some of your most significant pain points or gripes?
How would you describe your typical experience with a digital signage website for a seamless experience?
What do you think can improve the overall journey and experience?
The qualitative information research helped me confirm invalid assumptions about users and their expectations regarding the website.
Qualitative information research
Firstly, I performed qualitative information research to give myself some direction. For example, I find out how often users have encountered difficulties performing different tasks. What are their current pain points, fears, and needs? I also figured out what motivates or demotivates them from using the competitors’ websites.
Quantitative data research
After qualitative information research, I performed Quantitative data research to learn user behavior.
Findings from interview
All participants stated that they often visit digital signage websites on smartphones, but unresponsive designs cause difficulties.
Most of the time, the product pages take a long time to load.
No policy and social proof were mentioned; hence the customers were afraid to do the business for the first time.
Persona
I developed a user persona to address the major needs of the targeted audience. Persona would guide the process and evolution of developing user flows. I referred to it throughout the entire designing process.
John
Bio
John is a young professional baker and entrepreneur. Enjoys watching cooking channels and often experiments with recipes. John is a tech savvy. John is looking for an efficient way to display special offers to his regular customers and potential customers.
Pizza Shop Owner & Baker
35 years old
Brooklyn, NYC
Goals & Needs
Display special offers on the window of the shop where they are fully visible to the potential customers that are passing by.
Affordable device or display.
Makes quick updates or adjustments to the poster suck as correct typos, update photographs, update special offers etc.
Have a way to automatically update content such as schedule for a certain time or period such as holidays.
Wishes to captivate the attention of people passing by since the restaurant is located on a rather busy street.
Frustrations
Having to constantly print and replace posters.
Posters leave glue marks on the window which take some time to be fully cleaned.
Needs a device smaller than a TV screen but larger than a tablet.
Traditional TVs don’t allow people to view the content if the display is in direct sunlight.
Printed media lacks movement and easily blends into the background no matter how colorful and visually attractive it is.
Brainstorm
I promptly designed a user flow diagram, keeping the interview users and different scenarios in mind, to understand how users will navigate through the website and browse product subscription, industry, and resources pages. This helped me align the website’s goals and prioritize the essential features in the prototyping phase.
Card sorting
I used card sorting to evaluate the information architecture of the website. I organized topics into categories that make sense to them and labeled these groups. The insight allowed me to understand how users would expect to see content grouped on a website and how they might see these groups labeled.
Card sorting didn’t show me the final information architecture or menu for the site, but it helped identify trends and how many potential categories there could be.
fast
food
food
drive-thru
takeaway
food
coffee
shop
coffee
to go
drinks
winery
bakery
restaurant
comedy
club
sport
events
movies
food
festival
open mic
night
amusement park
theater
concerts
video
games
entertainment
User flow
After consolidating all issues and prioritizing them according to their frequency, the data’s outcomes and brainstorming enabled me to narrow down the approach.
Homepage
Products
Subscriptions
Industries
Resources
About
Blog
Digital billboards
Digital signs
Outdoor
Indoor
Screenhub
Book a call
User Journey map
I analyzed and mapped out the user journey to find the redundancies in the competitors’ websites and see how I could simplify their journey and help them reach their most important goals. I constantly referred back to the customer journey map and user flow diagram as I sketched out concepts.
John: Pizza shop owner
Scenario: John wants to update data on posters that are hanged around the shop. Since the shop is located on a busy corner street, John hangs 3 posters visible from the outside and another 4 visible inside.
Expectations
Posters need to be visible, have an easy-to-read text, bright colors, no typos, correct prices.
Phase
Activity
Thought
Emotion
Opportunity
Placing an order
Receiving order
Updating the price
Taking down old posters
Putting up new posters
Gets in touch with local agency and asks for a poster design.
Needs to go pick up the posters from the agency.
Gets in touch with local agency again, as there was a math error in the final price.
Needs to take down the current posters, wash the glue and hand prints off the window.
Uses transparent tape to glue the new posters on the windows.
“I like working with this agency. Customers notice the posters they design.”
“I need to go pick up the order. I can also ask them to deliver it.”
“I forgot to double-check. Now I have to reprint everything.”
“I need to do this before I open the shop. I wish there was a faster way to do this.”
“The sunlight might make the poster hard to read. The colors might also fade away.”
Allow the user to place the other directly from the app.
Allow the agency to upload the poster on the app. Allow the user to preview it.
Have validations and error prevention methods that will limit issues.
Allow the users to make instant and live updates on all / individual screens.
Information should be clearly visible in direct sunlight.
Design
After specifying the issues and analyzing each pain stage, I was prepared to produce solutions. I was also able to think about what design principles are important to carry through the product.
Sketches
I quickly developed how the potential solutions address the user’s needs using sketches.
Wireframe
I started building screens, buttons, and all sorts of other artwork, trying to create something that looks clean, modern, and simple to use. Then I defined functionality, content, and navigation through wireframes.
I designed the wireframes for product subscription, industry, resources, homage pages, blog, and about page to visualize the layout of the overall website. It helped me conceptualize the basic blueprint of the website early in the design process.
Logo
Item
Item
Item
Item
Item
Item
Photo gallery header
Logo
Contact information
Go to top
Location
Section 1
Link
Link
Link
Section 2
Link
Link
Link
Section 3
Link
Link
Link
Logo
Item
Item
Item
Item
Item
Item
Section header
Section description
Example 1
Benefit 1
Benefit 2
Benefit 3
Example 2
Software
Photo gallery
Contact form
Logo
Item
Item
Item
Item
Item
Item
Section header
Our history
Benefit 1
Benefit 2
Benefit 3
FAQ section
Timeline
Careers
Logo
Contact information
Go to top
Location
Section 1
Link
Link
Link
Section 2
Link
Link
Link
Section 3
Link
Link
Link
Prototypes
I created clickable prototypes using AdobeXd, maintaining interaction and visual consistency to communicate the design strategy effectively. This is considerably quicker than diving into the complex website build.
Test
I conducted usability testing with ideal users to verify the design and quantitatively review the usability assumptions.
To measure how ‘usable’ the website is, I measured three things:
Effectiveness - Whether users can complete a task;
Efficiency - How long it takes them to complete a task;
Satisfaction - How users feel about the task.
The outcome of the usability testing
My prototype tested exceptionally well during the last round. Users were thrilled by such an accessible way to find relatable information and enjoy a seamless browsing experience.
Projects outcomes
Coming out with a design based on user research helped me understand a lot. So luckily, I designed a responsive, simple-to-use, and interactive website for Cirrus LED to make user’s life more delightful.
I followed a light design style because I wanted the project to come off friendly and ultimately not give off a technical “database” vibe. Instead, the design will give users a familiar and delightful experience.
Reflection
A quality and simple-to-use site can make a world of difference between a customer browsing and a customer purchasing. A simple, intuitive website design lets customers comfortably browse on any device.
“Beauty” is a highly subjective assessment. However, when it comes to web design, “good looks” usually mean a convenient layout, aesthetically pleasing typography and iconography, crisp visuals, and other on-site design elements that differentiate your site from competitors.
Contact
Let’s Connect
Do you have a product idea, want to discuss a project, or need a designer? Drop me an email!
Enter your email
Your name
Write your message here....
Submit
Work
Resume