Cappsool Websites
Cappsool Technologies is a B2B marketing company dedicated to matching high-intent users with partners in multiple industries.
Cappsool gives each user a unique comparison experience determined by things like their geolocation and search query.
The first thing the user sees when they land on one of our comparison sites is a chart of the top brands in that industry. Cappsool's sites also contain brand reviews, and informative how-to guides and articles.
Years
2016 - ongoing
My Role
Lead Product Designer User research, wireframing, prototyping, and final product design
Tool Used
Figma
Photoshop
Illustrator
Dynamic Design System
Working in web development and design, we need to ship our product on a multitude of platforms and devices. Keeping features and designs synchronized takes significant effort, often requiring products to be made in a scalable and repeatable way across all of these platforms.
That's why we decided it would be better to use a design system; a cohesive experience is more easily understood by our users, and faster because it gives us a common language to work with.
Our use of color and visual language should help bring attention to what matters most in the specific industries and should support the purpose of the content.
Special Projects
In addition to the regular chart websites we do, we like to try new things, and we always try to improve and test out websites and let the users decide. By changing layouts, implementing videos, and different content, we create new experiences that help the user decide.
How do the Cappsool websites work?
Step 1
The user searches for one of our industries: dog subscription boxes
Step 2
The user browses the site and receives information about all the companies
Step 3
The user chooses a company he likes and goes directly to her website
UI Design
Color Palette
The color themes are designed to be harmonious, ensure accessible text, and distinguish different industries from one another. I placed a higher value on clear communication. Our use of color should help bring attention to what matters most, support the hierarchy of the page, and should keep the purpose of the content.
Typography
I wanted to present the design and content as clearly and efficiently as possible with a clean and clear font. The font chosen was Lato, a sans serif font which allows for high legibility even at smaller sizes. I created a clear visual pattern and consistent hierarchy for users to follow while interacting with our websites.
The Iconography
I used icons to provide the user with adequate information.
The user interface icons represent ideas, objects, or actions.
They can communicate messages at a glance, afford interactivity, and draw attention to relevant information.
Responsive Design
The chart layout encourages consistency across the different industries, platforms, and screen sizes by using uniform elements and spacing. The users can see the structure and understand how the sections relate.
In the limited card space, we needed to pay attention to the spacing between the information that we needed to group and present variable, transient content that users might want to interact with. Every industry has different content and legal obligations, so we needed to create a responsive card that could adjust to any industry.
New website UX process
#1 Research
Together with the product team, we’re trying to understand the industry and the target audience more.
#2 Principles
Creating basic principles to help guide the project and ensure alignment amongst the team.
#3 Design Exploration
Exploring the range of solutions for each industry's needs ( legal, content, visuals) and target audience.
#4 Design Refinement
Preparing the chosen direction final designs and preparing it for handoff.
#5 Handoff
Working closely with the engineering and product teams to ensure a successful process.
#6 Monitoring
We all monitor the website’s performance and think about ideas for improvement.
The Best Streaming Providers site exposes you to all movies and TV shows out there. Got some free time or want to catch up on your favorite series? Find it all here.
The Opportunity
Covid-19 lockdowns raised the use of TV Streaming services worldwide. The searches for different TV shows or movies are growing. Time spent streaming increased by almost 75% during covid-19.
Proposed Solution
Creating a library of TV shows and movies, the user can browse and find content that interests him.
Design
To provide the maximum amount of cleanness and simplicity, all the screens we designed with a light background. The home page screen contains less data, and the TV shows/movies visuals are more prominent.
Performance
To monitor the website, we used Hotjar and looked at the heat maps and user recordings to get feedback and ideas for improvements.
Business Impact
The users didn't engage the website as we had hoped. The users were overwhelmed by the choices that they overlooked the companies and didn't click on the CTA's.
Meals & More is a foodie website dedicated to the meal delivery industry in the USA. Every user can find a great variety of websites, recipes, and articles about his preferred diet.
The Problem
The food industry is usually very visual. Users and especially foodies need visual stimulation. All users have different needs and preferences in the food they eat. A regular chart is not enough to help the user make a decision.
Proposed Solution
We decided to create a website with many visuals of the different products and add unboxing videos to see the ingredients, the cooking process, and the result.
Design
I had to look at the chart in an all different way and think about the best way to add the video to the chart. There was another essential piece of content that would challenge the other information.
Performance
To monitor the website, we used Hotjar and looked at the heat maps and user recordings to get feedback and ideas for improvements.
Business Impact
There were not enough conversions as we had hoped. The users watched the videos, overlooked the companies, and didn't click on the CTA's.
TV Streaming Library
Meals & More
One of the final unboxing videos.
Meet Tim :)