Memorisely Bootcamp 058
Product Design
Continuous Learning
DEV-READY SOON
I didn't do this bootcamp because I had to. I did it because I wanted to stay sharp, stay current, and prove something to myself. Memorisely's Design System Bootcamp was one of the most rigorous design exercises I've put myself through, and I came out of it with a full redesign, a living design system, and a working prototype. The project was to redesign Craigslist, which is probably one of the most-used but least-loved interfaces out there. The brief: just make it better.
Memorisely Bootcamp 058
Product Design
Continuous Learning
DEV-READY SOON
I didn't do this bootcamp because I had to. I did it because I wanted to stay sharp, stay current, and prove something to myself. Memorisely's Design System Bootcamp was one of the most rigorous design exercises I've put myself through, and I came out of it with a full redesign, a living design system, and a working prototype. The project was to redesign Craigslist, which is probably one of the most-used but least-loved interfaces out there. The brief: just make it better.
Memorisely Bootcamp 058
Product Design
Continuous Learning
DEV-READY SOON
I didn't do this bootcamp because I had to. I did it because I wanted to stay sharp, stay current, and prove something to myself. Memorisely's Design System Bootcamp was one of the most rigorous design exercises I've put myself through, and I came out of it with a full redesign, a living design system, and a working prototype. The subject? Craigslist. One of the most-used and least-loved interfaces on the internet. The brief was simple: fix it.
Memorisely Bootcamp 058
Product Design
Continuous Learning
DEV-READY SOON
I didn't do this bootcamp because I had to. I did it because I wanted to stay sharp, stay current, and prove something to myself. Memorisely's Design System Bootcamp was one of the most rigorous design exercises I've put myself through, and I came out of it with a full redesign, a living design system, and a working prototype.
058
Bootcamp cohort
Working
Design system built
Figma
Primary tool
2024
Year
058
Bootcamp cohort
Working
Design system built
Figma
Primary tool
2024
Year
058
Bootcamp cohort
Working
Design system built
Figma
Primary tool
2024
Year
CHALLENGE
Why Craigslist
Craigslist is an interesting design challenge. It works and millions use it, but it feels like using the old internet where you have to figure everything out yourself. There are outdated patterns, confusing navigation, no real visual hierarchy, and buttons that don't look clickable. All of these can be fixed, so I set out to do just that.
CHALLENGE
Why Craigslist
Craigslist is an interesting design challenge. It works and millions use it, but it feels like using the old internet where you have to figure everything out yourself. There are outdated patterns, confusing navigation, no real visual hierarchy, and buttons that don't look clickable. All of these can be fixed, so I set out to do just that.
CHALLENGE
Why Craigslist
Craigslist is an interesting design challenge. It works and millions use it, but it feels like using the old internet where you have to figure everything out yourself. There are outdated patterns, confusing navigation, no real visual hierarchy, and buttons that don't look clickable. All of these can be fixed, so I set out to do just that.
CHALLENGE
Why Craigslist
Craigslist is an interesting design challenge. It works and millions use it, but it feels like using the old internet where you have to figure everything out yourself. There are outdated patterns, confusing navigation, no real visual hierarchy, and buttons that don't look clickable. All of these can be fixed, so I set out to do just that.
BEFORE AND AFTER
Before
Sparse interface with no affordances. Users left guessing what's clickable.
After
Clear hierarchy, consistent navigation, and interactive elements that communicate their purpose.
Before and After
Before
Sparse interface with no affordances. Users left guessing what's clickable.
After
Clear hierarchy, consistent navigation, and interactive elements that communicate their purpose.
Before and After
Before
Sparse interface with no affordances. Users left guessing what's clickable.
After
Clear hierarchy, consistent navigation, and interactive elements that communicate their purpose.
Before and After
Before
Sparse interface with no affordances. Users left guessing what's clickable.
After
Clear hierarchy, consistent navigation, and interactive elements that communicate their purpose.
DESIGN PROCESS
How I Approached the Redesign
01
Audit existing UI
Identified usability failures before forming any design opinions.
02
Build the system first
Atoms before pages. Foundation before features.
03
Redesign core flows
Browsing, listing, viewing. The moments that matter most.
04
Prototype and present
Full interactive Figma prototype showing the redesigned experience end to end.
DESIGN PROCESS
How I Approached the Redesign
01
Audit existing UI
Identified usability failures before forming any design opinions.
02
Build the system first
Atoms before pages. Foundation before features.
03
Redesign core flows
Browsing, listing, viewing. The moments that matter most.
04
Prototype and present
Full interactive Figma prototype showing the redesigned experience end to end.
DESIGN PROCESS
How I Approached the Redesign
01
Audit existing UI
Identified usability failures before forming any design opinions.
02
Build the system first
Atoms before pages. Foundation before features.
03
Redesign core flows
Browsing, listing, viewing. The moments that matter most.
04
Prototype and present
Full interactive Figma prototype showing the redesigned experience end to end.
DESIGN PROCESS
How I Approached the Redesign
01
Audit existing UI
Identified usability failures before forming any design opinions.
02
Build the system first
Atoms before pages. Foundation before features.
03
Redesign core flows
Browsing, listing, viewing. The moments that matter most.
04
Prototype and present
Full interactive Figma prototype showing the redesigned experience end to end.
RESEARCH
Understanding What Was Broken
First, I audited Craigslist's UI to see where the experience was breaking down. I focused on usability, not just personal taste.
Navigation changed from page to page, breaking users' mental models. There was no consistent visual hierarchy to highlight primary actions. Interactive elements had no affordances, no hover states, and no cues for clickability. Users had to guess what to do next.
Outdated patterns
Interaction patterns hadn't evolved with user expectations, creating friction in core flows.
Inconsistent navigation
Navigation changed structure across pages, breaking the user's mental model.
No visual hierarchy
Users couldn't distinguish primary actions from secondary content, leading to decision fatigue.
No visual affordances
Interactive elements gave users no indication they were clickable. No hover states, no visual cues, no feedback. Users were left guessing at every tap and click.
RESEARCH
Understanding What Was Broken
First, I audited Craigslist's UI to see where the experience was breaking down. I focused on usability, not just personal taste.
Navigation changed from page to page, breaking users' mental models. There was no consistent visual hierarchy to highlight primary actions. Interactive elements had no affordances, no hover states, and no cues for clickability. Users had to guess what to do next.
Outdated patterns
Interaction patterns hadn't evolved with user expectations, creating friction in core flows.
Inconsistent navigation
Navigation changed structure across pages, breaking the user's mental model.
No visual hierarchy
Users couldn't distinguish primary actions from secondary content, leading to decision fatigue.
No visual affordances
Interactive elements gave users no indication they were clickable. No hover states, no visual cues, no feedback. Users were left guessing at every tap and click.
RESEARCH
Understanding What Was Broken
First, I audited Craigslist's UI to see where the experience was breaking down. I focused on usability, not just personal taste.
Navigation changed from page to page, breaking users' mental models. There was no consistent visual hierarchy to highlight primary actions. Interactive elements had no affordances, no hover states, and no cues for clickability. Users had to guess what to do next.
Outdated patterns
Interaction patterns hadn't evolved with user expectations, creating friction in core flows.
Inconsistent navigation
Navigation changed structure across pages, breaking the user's mental model.
No visual hierarchy
Users couldn't distinguish primary actions from secondary content, leading to decision fatigue.
No visual affordances
Interactive elements gave users no indication they were clickable. No hover states, no visual cues, no feedback. Users were left guessing at every tap and click.
RESEARCH
Understanding What Was Broken
First, I audited Craigslist's UI to see where the experience was breaking down. I focused on usability, not just personal taste.
Navigation changed from page to page, breaking users' mental models. There was no consistent visual hierarchy to highlight primary actions. Interactive elements had no affordances, no hover states, and no cues for clickability. Users had to guess what to do next.
Outdated patterns
Interaction patterns hadn't evolved with user expectations, creating friction in core flows.
Inconsistent navigation
Navigation changed structure across pages, breaking the user's mental model.
No visual hierarchy
Users couldn't distinguish primary actions from secondary content, leading to decision fatigue.
No visual affordances
Interactive elements gave users no indication they were clickable. No hover states, no visual cues, no feedback. Users were left guessing at every tap and click.
Design Solutions
Building the Design System First
I started by building out the design system first, before touching any UI. That came straight from my time at Zyte. If the basics aren't solid, everything else falls apart.
Starting from atoms, I built up a working component library in Figma. Colour tokens, typography scales, spacing rules, interactive states. Each component was designed with consistency and reusability in mind, so that by the time I got to full page layouts, every element already spoke the same visual language.
Design Solutions
Building the Design System First
I started by building out the design system first, before touching any UI. That came straight from my time at Zyte. If the basics aren't solid, everything else falls apart.
Starting from atoms, I built up a working component library in Figma. Colour tokens, typography scales, spacing rules, interactive states. Each component was designed with consistency and reusability in mind, so that by the time I got to full page layouts, every element already spoke the same visual language.
Design Solutions
Building the Design System First
I started by building out the design system first, before touching any UI. That came straight from my time at Zyte. If the basics aren't solid, everything else falls apart.
Starting from atoms, I built up a working component library in Figma. Colour tokens, typography scales, spacing rules, interactive states. Each component was designed with consistency and reusability in mind, so that by the time I got to full page layouts, every element already spoke the same visual language.
Design Solutions
Building the Design System First
I started by building out the design system first, before touching any UI. That came straight from my time at Zyte. If the basics aren't solid, everything else falls apart.
Starting from atoms, I built up a working component library in Figma. Colour tokens, typography scales, spacing rules, interactive states. Each component was designed with consistency and reusability in mind, so that by the time I got to full page layouts, every element already spoke the same visual language.
Design Solutions
Redesigning the Core Flows
Once the system was set up, I jumped into redesigning the main user flows: browsing listings, viewing a listing, and filtering. These are the key touchpoints for Craigslist users, and they were where most of the friction was happening.
I focused on three things for the redesign: making the visual hierarchy super clear so users always knew where to look, adding strong affordances so it was obvious what was clickable, and keeping navigation consistent so it always felt predictable.
Design Solutions
Redesigning the Core Flows
Once the system was set up, I jumped into redesigning the main user flows: browsing listings, viewing a listing, and filtering. These are the key touchpoints for Craigslist users, and they were where most of the friction was happening.
I focused on three things for the redesign: making the visual hierarchy super clear so users always knew where to look, adding strong affordances so it was obvious what was clickable, and keeping navigation consistent so it always felt predictable.
Design Solutions
Redesigning the Core Flows
Once the system was set up, I jumped into redesigning the main user flows: browsing listings, viewing a listing, and filtering. These are the key touchpoints for Craigslist users, and they were where most of the friction was happening.
I focused on three things for the redesign: making the visual hierarchy super clear so users always knew where to look, adding strong affordances so it was obvious what was clickable, and keeping navigation consistent so it always felt predictable.
Design Solutions
Redesigning the Core Flows
Once the system was set up, I jumped into redesigning the main user flows: browsing listings, viewing a listing, and filtering. These are the key touchpoints for Craigslist users, and they were where most of the friction was happening.
I focused on three things for the redesign: making the visual hierarchy super clear so users always knew where to look, adding strong affordances so it was obvious what was clickable, and keeping navigation consistent so it always felt predictable.
FIGMA PROTOTYPE
Key Outcomes
Clear visual cues
Increased efficiency
Better usability
Key Outcomes
Clear visual cues
Increased efficiency
Better usability
Key Outcomes
Clear visual cues
Increased efficiency
Better usability
Key Outcomes
Clear visual cues
Increased efficiency
Better usability
Conclusion
Staying Ahead on Purpose
This project was a good reminder of why I enjoy design. It's not just about clients or deadlines. I just like tackling interesting problems, no matter where they come from.
I joined the Memorisely bootcamp and signed up early for their AI Design, AI Design Systems, and AI Coding tracks. I wanted to stay ahead since things are moving fast in the field. I'd rather jump in and learn than wait and play catch up later.
Things are moving fast. I'd rather jump in and learn than wait and play catch up later.
Conclusion
Staying Ahead on Purpose
This project was a good reminder of why I enjoy design. It's not just about clients or deadlines. I just like tackling interesting problems, no matter where they come from.
I joined the Memorisely bootcamp and signed up early for their AI Design, AI Design Systems, and AI Coding tracks. I wanted to stay ahead since things are moving fast in the field. I'd rather jump in and learn than wait and play catch up later.
Things are moving fast. I'd rather jump in and learn than wait and play catch up later.
Conclusion
Staying Ahead on Purpose
This project was a good reminder of why I enjoy design. It's not just about clients or deadlines. I just like tackling interesting problems, no matter where they come from.
I joined the Memorisely bootcamp and signed up early for their AI Design, AI Design Systems, and AI Coding tracks. I wanted to stay ahead since things are moving fast in the field. I'd rather jump in and learn than wait and play catch up later.
Conclusion
Staying Ahead on Purpose
This project was a good reminder of why I enjoy design. It's not just about clients or deadlines. I just like tackling interesting problems, no matter where they come from.
I joined the Memorisely bootcamp and signed up early for their AI Design, AI Design Systems, and AI Coding tracks. I wanted to stay ahead since things are moving fast in the field. I'd rather jump in and learn than wait and play catch up later.