Yad2 App
The new application is helping millions find apartments, cars, jobs, pets, and other important and exciting things.
The in-app content personalization ensures that the user receives only the relevant offers.
B2C
RESEARCH
UX DESIGN
UI DESIGN
MOBILE APP
My role in the project
Leading the UI/UX design process end-to-end, including managing the team of designers
Facilitating and running the usability testings on the Beta version
Creating and implementing the visual design language in the app layouts
Running weekly design quality assurance reviews (QA) with developers
Core values
We defined the three core values of the system to guide all the design decisions in this project.
Personalization
Tailoring the app experience through interactive design to meet the specific needs of every user
Focus
Pushing distractions and interruptions to the side helping the user to focus on what's at hand.
Simplicity
A clean visual and animated language to help users accomplish the goal faster, more easily, and more efficiently.
simplicity
A clean visual and animated language to help users accomplish the goal faster, more easily, and more efficiently
Targeted audience
Individuals and businesses searching for and publishing classified ads in multiple categories, such as cars, real estate, second-hand products, jobs, studies, and other fields.
Average age: 35-40
Visual clutter and high cognitive load
Challenge #1
A large amount of content produced messy graphics, overloading the screen. In addition, the flooding of banners in various places caused the user to feel confused and frustrated.
Solutions
01
Soft visual language, and cleanliness of the dominant colors, like bright orange, help remove the clutter. A more "airy" design conveys the messages better and allows the users to focus.
Homepage
After
Before
Login screen
Before
After
02
Effective website navigation through "tags" and "personalized suggestions".
Search screen
Before
After
User profile
Before
After
03
Drawers and overlays produce a gradual and moderate exposure to the contents. Using drawers creates a quick and intuitive process with fewer interruptions.
Implemented for the most common user actions and flows
Messages, empty states
Search results filtering
User-friendly search filters to help you find the best apartment for you based on your specific preferences.
These solutions reduced the load and created a light experience. In addition, removing the banners from the home page helps eliminate distractions and focus the user on performing the relevant action.
Creating a new and young visual language while maintaining the brand identity
Challenge #2
We developed the design language for the digital world by refining the color palette and adapting the iconography. In addition, we maintained consistency in the design, reducing the user's cognitive load and making the experience more comfortable and straightforward.
Representative screens
Chat
Liked ads
Categories
My ad
Home page
Search results feed
Challenge #3
Fast-speed, agile UX/UI design work integrated into the continuous-delivery environment
We had to start creating a language from the available screens (login/registration screens), not from the main layouts. We had to make this and similar decisions due to the tight schedule and to allow developers to start working as quickly as possible.
Challenge #4
Personalization and sense of acquaintance with the user
The application adapts itself to users and knows how to offer relevant classified ads to what interests them, an experience that brings a personal feeling.
Solutions
01
Using "tags" that tailor the "feed" based on user history and location. It creates a personalized experience and helps users better navigate and understand what is happening on the home page.
Homepage
We made "sticky" tag-based navigation so that it is available to a user at any given moment during scrolling.
02
We introduced new avatars that follow the "hand" (yad) motif and the illustration style of the application to create a personalized and fun experience.
A cool visual design language with the hand motif
We used illustrations to amplify the UX/UI design - helping the user focus and perform actions efficiently, easily and quickly.
Evolution of the visual design language
Created different illustration concepts that evolved based on user testing results and project stakeholders' feedback.
Following are different concepts with the feedback from the key stakeholders
01
"The problem is that there is no depth in... but we will go with the motif of the hands because it creates more interest even though it can be challenging..."
02
"There is no additional color, everything is too orange... and adding the background with the fade effect doesn't help..."
03
"A combination of an illustrative style with a "cutout" image looks cool but far from the original visual language of Yad2"
04
Final version
"I feel a connection to this visual design language... very young, cool... let's present it to the client "
Onboarding
Onboarding contribute to the user’s understanding of what value he can receive from the app before using it.
To add interest and uniqueness to these screens, we created subtle micro-animations for the illustrations in collaboration with the animator.
Usability testing
The Beta version is out - it's time to run tests on real users...
The users perform use-case scenarios while we observe, record and analyze their actions and responses during the test.
The test took place at the Yad2 offices
We prepared detailed user instructions and scripts.
We focused on navigation processes, UI design, call to action, intuitiveness and more. The goal was to get a clear and comprehensive picture of the user's journey.
Example of the use-case scenario with steps and additional tasks
Instructions for users, facilitators and analysts
At the end of the test, we interviewed the participants using a questionnaire to get general feedback on the application and the testing. What went well? Were there specific unclear things, or was something significant overlooked?
Collecting the feedback
After a week, a professional and detailed report would present the test findings, our conclusions and concrete recommendations for improvement.
