Redesign Craigslist website
The process of creating a new mindfull design for the Craigslist website
MY ROLE
Solo UI/UX Designer
PROJECT TYPE
Case Study
Introductory
Craigslist is a highly influential online platform that functions as a classified advertisements portal. This platform hosts an extensive array of sections catering to a diverse range of user needs and interests.
Problem
The site has not changed for a long time (since 1995) and now has outdated user interface and lack of modern user experience design for comfortable work with them.
The main problems with Craigslist:
• navigation system is overwhelming and lacks hierarchy
• narrow search functionality
• bland outdated and messy user interface design
• lack of modern user experience design
01 DISCOVERY AND RAPID RESEARCH
Progect Goals
First, we need to review our user, business, and technical goals to strike the right balance between all of these things and achieve the best results for our product.
Solution
To revamp the platform while retaining its core functionalities and simplicity for providing a user-friendly and efficient platform for buying, selling, and user interactions across diverse categories.
Competitive analysis
I analyzed the 3 main competitors and identified a number of their advantages and disadvantages that helped me in making decisions for my project.
Proto-Personas
I created two personas based on two types of users of the product. (the young person and the old person)
Insights from Personas
After analyzing main problems personas encounter with I decided to single out the main goals what we should accomplish:
• Improving navigation system (she should be quick and easy for users)
• Make easy the process of creating new ad for users
• Enhance the search functionality to provide more relevant and accurate results
• The interface should be comfortable for both young and older users
• Provide accurate listings with clear information
02 WIREFRAMING
Sketches
Before creating a wireframe, I created a simple sketch of the main page with all the services and categories of services.
Low-Fidelity Wireframe
Once I created sketch version of the main page with all services I started creating the low fidelity wireframe of that page.
03 DESIGN KIT
UI Kit
04 FINAL DESIGN
High-Fidelity UI Design
Using the atomic design approach I have created sets of components and produce a high-fidelity design for main page with all services.
Improvements
04 FINAL DESIGN
The final UI Design
05 CONCLUSION
Project summary
During the project I managed to perform a mini research, create a concept and low fidelity wireframe and build to high-fidelity beautiful UI design, using my own UI kit and components.
The redesign resulted in an improved visual hierarchy while retaining the basic functionality and simplicity of the platform to provide user-friendly interface and interaction.
Let’s
connect!
© 2023 Daria Shagina | Built with Framer