Edgar Deiner
2022

On it - Cooming soon

via GIPHY

Close window icon

Fillo

Skyrocket conversion with powerful responsive websites

Fillo - Webdesign. UX / UI case study thumbnail
project name : Fillo
platform : Mobile & Desktop
Duration : July - Sep 2020

Video

The mission

Starting Point

I took part in a super exciting project that allowed me to help two inspiring human beings express their passion creating their online storefront from scratch

The challenge

• align a value proposition to users main needs & desires while communicating professionalism and personality
• strong clients lead generation
• responsive design
• measurable achievements

Credits

Erik deiner ( mentorship & consulting )

About the client

Who are they ?

Michal and Dan ( husband & wife ) work together passionately to help people in the online world. Michal is a product designer and a developer while Dan is an SEO specialist.

Their vision

Form a boutique company that will provide accurate solutions for business owners by designing and developing websites with strong "SEO" strategy implementation.

Success definition

Generating trust and strong leads while conveying their personality and solutions

Target audience

Who are they ?

My client clients AKA the users:
business owners on any scale seeking for a online solution for their business

Their needs

Effective solution to their business requirements; a website that works from a conversion perspective.

Success definition

Measurable outcomes, usually numbers that show if the main goal was achieved

My approach:

Market research

Competitor analysis

- Who are the main competitors ?
- How they speak ?
- What visuals are they using ?
- What features they have ?
- Do they have a niche ?
- What's their value proposition ?
- How we can differentiate ?

Analysis discovery

Different agencies use different strategies and language but they all have one thing in common: they start with a strong value proposition that communicate their main focus or niche :
for example, some aim for design sprints while others on long and hand-by-hand strategy and implementation process.

Value proposition

How do our competitors speak?
Here is a mood board with snippets from popular companies' main value propositions.

Strategy summery

Alignment on the goal

Our goal in this stage is clearly to communicate a clear value of our services by focusing strongly on conversion from our user's perspective.
Make it clear that we are the right selection for the job while picking a niche of web design & SEO as a strong winning package

Content Development

Context

What is the actual content that will help us achieve the goal of this project ?

Popular types of
content

• Products / Services
• About the company ( Story, Team, Vision, Careers )
• What we do / how we do it
• Contact ( reach out ways )
• Benefits ( Value Proposition )
• Resources ( Downloadbles )
• Updates ( News, Blog, Pr )
• Our customers / Testimonials
• Signup for newsletter
• Case studies
• Social Media

Content Architecture

One-pager Vs Multiple Pages

Content Hierarchy

At this stage, I worked on the structure of content from top to bottom, what's more important from the user's perspective

Planning a site-map

Sitemaps are organized lists or flow chart diagrams that shows connections between web pages and helps decide what actual pages will be created

Creating Wireframes

Wireframes serve multiple purposes:
by connecting the site layout to the information architecture and displaying the paths between the various site pages. Clarifying how to display various types of information in the user interface.

Responsiveness

Responsiveness in mind

The goal of responsive design is to create content that adjusts smoothly to various screen resolutions. Size elements in relative units and apply media queries so their designs can automatically adjust to the browser space to ensure content consistency across devices.

Visual design

Visual language

Creating a consistent visual language is a strong differentiating factor, consistency creates trust and trust create bonding

How visual language
was created

• Build a Color Palette.
• Create a Typographic Hierarchy.
• Establish a Grid.
• Create a Library of Components.
• Emphasize an Image Style.
• Build Rules for Animation.
• Match Words and Visuals.
• Create iconography.

Color psychology

Selecting a color is crucial but fun stage,
different colors evoke different fillings

Choosing color and creating a style guide

I went with purple as a primary color for its calming, creative and trustful features
and created a color palette around it

Main components :

Created smart components in "Figma" to achieve better workflow and consistency across the whole project, here are some of the main ones I've used

Main Takeaways

Working on “Fillo” was a challenging yet exciting experience, I got to create the full product from strategy to design to an actual working responsive website. I got a ton of feedback that helped sculpting and polishing the solution

I learned a lot from this project but mostly:
• How important is to define a clear structure, sticking to it while sharing the process, that actually was a breakthrough for me
• Linking business goals with users needs
• How to iterate with modification
• The importance of workflow and structure

Thank you for your time

Jump to next project

Group-task Mobile

View Case Study
Group task - UX / UI case study mobile thumbnail

All-fit- Mobile

View Case Study

Reach Out To Me !!!

Go ahead... Don't be shy

Lets Chat

"Alone we can do so little
together we can do so much." – Helen Keller

Thank you !!!
Your submission has been received !!!
Oops! Something went wrong while submitting the form.