For the low-fi wireframes, I began researching for other redesigns of this popular reselling site and found some references. Once I found my inspiration, I combined my style while referring to those references when I was stuck with deciding how to design each component. Here are the low-fi wireframes.
The first phase was the heaviest as it had most of the main pages. I started on the categories page. I wanted all the categories listed out while also having options for setting different filters like distance and price, so I allocated a space on the left for the submenu options and had the categories in the center of the page so it’s the focus. Then I added a hover effect for each category option. After I began creating content and found images for the page. Then I moved onto the next.
Next was the buying page. This was the one that had the most interactions. I started with the interactions, the scrolling listings frame, being able to like a listing, and a sliding carousel. I wanted the carousel to be the center of attention as it would feature all the sales for the day and the listings frame would include the recommended items. Also, within each listingI created a 3-dot menu so users can like, favourite, or report the listing. So, I placed the carousel on the left to middle side of the page while having the listing frame beside. Then, I created the content and found images and moved onto the home page.
The home page was much simpler. I wanted the page to show the categories and services that Craigslist provides in a neater fashion. So instead of listing all of them like the website currently, I categorized the services under a category and created large category buttons so users can click on them and not have to scroll through all of them. It was organized and in the center of the page as the center of focus. Now the selling page.
The selling pages has as many interactions and pages as the buying pages. I began with the first page where users want to sell things. I created an interaction where users can click an upload icon and it would give them an option to choose an image from their device and upload it. Then, I created simple text fields so when users click on it, a keyboard appears, and they can choose the title and description for the listing. After, I created a feedback animation when users successfully upload their listing, confetti fall from the top of the page, and they can proceed to view their listing on the next page. Once those were done, I made content and chose images then moved onto the second phase.
For this project, I redesigned Craigslist. I researched Craigslist redesigns and found inspiration as well as my own ideas. This project was to display UI skills learned from class and our design skills. The software used was Figma and the goal was to produce a high-fidelity prototype with interactivity. I began with the low-fidelity wireframes below.
The first phase was the heaviest as it had most of the main pages. I started on the categories page. I wanted all the categories listed out while also having options for setting different filters like distance and price, so I allocated a space on the left for the submenu options and had the categories in the center of the page so it’s the focus. Then I added a hover effect for each category option. After I began creating content and found images for the page. Then I moved onto the next.
Next was the buying page. This was the one that had the most interactions. I started with the interactions, the scrolling listings frame, being able to like a listing, and a sliding carousel. I wanted the carousel to be the center of attention as it would feature all the sales for the day and the listings frame would include the recommended items. Also, within each listingI created a 3-dot menu so users can like, favourite, or report the listing. So, I placed the carousel on the left to middle side of the page while having the listing frame beside. Then, I created the content and found images and moved onto the home page.
The home page was much simpler. I wanted the page to show the categories and services that Craigslist provides in a neater fashion. So instead of listing all of them like the website currently, I categorized the services under a category and created large category buttons so users can click on them and not have to scroll through all of them. It was organized and in the center of the page as the center of focus. Now the selling page.
The selling pages has as many interactions and pages as the buying pages. I began with the first page where users want to sell things. I created an interaction where users can click an upload icon and it would give them an option to choose an image from their device and upload it. Then, I created simple text fields so when users click on it, a keyboard appears, and they can choose the title and description for the listing. After, I created a feedback animation when users successfully upload their listing, confetti fall from the top of the page, and they can proceed to view their listing on the next page. Once those were done, I made content and chose images then moved onto the second phase.
The second phase was the creation of the favourites, messages, and profile page. The favourites page wasn’t the focus, so there weren’t as many interactions needed. I made two scroll frames, one for the liked listings and favourited listings, and placed them side by side. For those frames I created each listing’s content and chose images appropriate for them.
Next was the messages page. First, I created a scrolling frame with mocked up conversations. Then I made the interaction where users can scroll through this and click on any message. Once clicked, a conversation tab would slide up from the bottom. This was positioned on the left side of the page as people tend to read left to right. Finally, was the profile page.
The profile page was simple. It didn’t require much interactivity, so I put a simple hover effect for each setting button. I mocked up the address function in the profile page so users can change the address under settings. Then, I chose a profile picture for the page and positioned the setting buttons on the left side of the page. After, the second phase of pages was done. Overall, I didn’t run into any major obstacles with the creation of these pages.
The second phase was the creation of the favourites, messages, and profile page. The favourites page wasn’t the focus, so there weren’t as many interactions needed. I made two scroll frames, one for the liked listings and favourited listings, and placed them side by side. For those frames I created each listing’s content and chose images appropriate for them.
Next was the messages page. First, I created a scrolling frame with mocked up conversations. Then I made the interaction where users can scroll through this and click on any message. Once clicked, a conversation tab would slide up from the bottom. This was positioned on the left side of the page as people tend to read left to right. Finally, was the profile page.
The profile page was simple. It didn’t require much interactivity, so I put a simple hover effect for each setting button. I mocked up the address function in the profile page so users can change the address under settings. Then, I chose a profile picture for the page and positioned the setting buttons on the left side of the page. After, the second phase of pages was done. Overall, I didn’t run into any major obstacles with the creation of these pages.
The third phase focused on the loading animation and a simple search function for a product. I began with the loading animation as it took the longest to complete. The animation was to have an opening into the home page using smart animation in Figma. Smart animation is where Figma looks at all the components selected and its hierarchy and applies a suitable transition between them. Because I wasn’t familiar with this, it was an obstacle that stumped me.
Research wasn’t finding any solutions applicable for my desired animation, so I turned to the instructor for assistance. After experimenting in Figma, I resolved the issue. Because position plays a part in smart animation, I positioned my components too far apart which is why Figma applied the wrong transition. The resolution was to position them closer so Figma would animate them to open.
Finally, I began the search function for the category and home pages. When users clicked on the search field, it would open a keyboard and users would type their desired product in and click the magnifying glass icon to search. Once those were completed, I moved onto linking each main page together.
The third phase focused on the loading animation and a simple search function for a product. I began with the loading animation as it took the longest to complete. The animation was to have an opening into the home page using smart animation in Figma. Smart animation is where Figma looks at all the components selected and its hierarchy and applies a suitable transition between them. Because I wasn’t familiar with this, it was an obstacle that stumped me.
Research wasn’t finding any solutions applicable for my desired animation, so I turned to the instructor for assistance. After experimenting in Figma, I resolved the issue. Because position plays a part in smart animation, I positioned my components too far apart which is why Figma applied the wrong transition. The resolution was to position them closer so Figma would animate them to open.
Finally, I began the search function for the category and home pages. When users clicked on the search field, it would open a keyboard and users would type their desired product in and click the magnifying glass icon to search. Once those were completed, I moved onto linking each main page together.
After the third phase, I had to link all the pages together. Starting with the home page, I linked the menu buttons to all the correct pages and copied the same menu bar and applied that to all the main pages. After I linked the loading animation to the home page, the Craigslist redesign was done.
The result, a completed redesign of Craigslist. Although there are many versions of these projects, I think I’ve tried to focus on most of the issues of the interface and applied them in my redesign. But not everything is perfect, and I know improvement can always be made. Otherwise, this was a successful redesign, and I learned more skills in Figma during the project.
After the third phase, I had to link all the pages together. Starting with the home page, I linked the menu buttons to all the correct pages and copied the same menu bar and applied that to all the main pages. After I linked the loading animation to the home page, the Craigslist redesign was done.
The result, a completed redesign of Craigslist. Although there are many versions of these projects, I think I’ve tried to focus on most of the issues of the interface and applied them in my redesign. But not everything is perfect, and I know improvement can always be made. Otherwise, this was a successful redesign, and I learned more skills in Figma during the project.
