Craigslist

APP REDESIGN

Craigslist is one of the internet's most well-known classifields sites. We took some time to break down and evaluate this mobile application using Jakob Nielson's 10 Usability Heuristics, and crafted a quick redesign for future considerations.

 

Process           Duration           Tools

Task Flow                  3 weeks                         Figma                                             

Redesign                                                           InVision                               

Prototyping

Heuristic Evaluation

UI Libraries


Simple-Mockup-Free-Scene-1

PROJECT OVERVIEW

INTRODUCTION

Craigslist is one of the internet's first of many online classifieds advertisement websites, with roots dating back to 1995. As of the most popular classifieds listing pages out today, it has managed to expand to many major cities all around the world. However, it was only recently, as of Janurary 2020, that Craigslist released their mobile application onto both the iOS App Store and Google Play Stores.

Group-358

My partner James and I evaluated Craigslist’s app using the 10 usability heuristics defined by Jackob Nielson and took the time to redesign a chosen task flow within the app.

THE PROBLEM

Craigslist’s version 1.0.0 app was released in January 2020 and has not been given an update since. As one of the leading classifieds listing page and with society shifting to mobile devices, it was the right move for Craigslist to make the transition towards a more mobile friendly platform. But as big and popular Craigslist is, the ratings and reviews on their app seems to indicate otherwise.

Group-353-2
Group-357

User Ratings and Reviews from the iOS App Store

In order to determine why the ratings and reviews were so low, James and I evaluated the app using the 10 usability heuristics defined by Jackob Nielson. By doing this, it helped us understand the problems within the app and guided us towards a path towards our resdesign.

PROJECT CONSTRAINTS

Throughout the redesign of Craigslist’s app, we had to stay true to their design language. We decided that some things wouldn't be changed, such as the colour palette and the font (Arial).  In order to align with the company’s brand, we had to work around these constraints. However, we were still given the freedom to create a new UI library that best suits the redesign.

Group-366
Group-367

USABILITY HEURISTICS

There are ten usability heuristic defined by Jakob Neilson, which we will be using to diagnose our problems with the application. Here they are as follows.

Group-368

HEURISTIC EVALUATION

TASK FLOW

Through our research, we came to the conclusion that craigslist has two fundamental task flows. The first is searching or locating items, and the second is posting a new listing. After much consideration, we chose our primary task flow as creating a new posting, as it had a myriad of usability issues.

Logging In

The user starts on the home page where they can browse or make a new posting. Even if the user has an account already, it will still prompt the user to input an email to post. After that, they are prompted to confirm their email, which the user has to go and check their email inbox.

Group-369-1

One of the biggest violations we see is the violation to Flexibility and Efficiency of Use, as it doesn’t allow the user to resend an email, or even change their email that they wanted to send to. Users also have to click the back button multiple times to fix the issue, as well as being sent back home, which is unnecessary and redundant.

Creating a Posting

After navigating the lengthly login process, users are able to finally start composing a posting. Users are prompted to select images, choose the location of posting, and the type of posting.

Group-370

Picking Images
On this screen, there is an area of blank space present, which violates the Visibility of System Status heuristic, as it does not indicate to the users what this blank space is for. An indicator of some sort would help guide users to let them know that images can be added there.

Choosing Location
Location is everything. How far an individual is from the posting is a big indicator on whether or not the listing may be successful. In this screen, the user is prompted to drag the map around to indicate their location. However, it does not allow the user to indicate specifically their address, leading to confusion regarding the functionality of the process. This violates the Recognition Rather than Recall heuristic, as the address indicator does not change, resulting in confusion for the user.

Type of Posting
For the “Choose Type” screen, the text is fairly cramped and very informative. It’s hard to differentiate things due to the varying weights of the font.

Category and Posting Details

Continuing on with the creation of the listing, users are now prompted to choose a category and indicate any other posting details that potential viewers might find interesting.

Group-371

Choosing a Category
Similar to choosing the Type of Posting, the text here is also fairly cramped and there is a lot of information for the users to take in. The disorganization of the categories alongside the varied weight of fonts presents itself as violations towards the Help and Documentation and Aesthetic and Minimalist Design heuristics, impacting the overally usability as it does not properly inform users of its contents.

Posting Details
This screen is presented as one long form list for users to fill out. This got us thinking - why does the important details of the listing (such as title and price) appear so late into the process? There is room for improvement here, as all the screens previous can be condensed onto this singular screen; reducing the need to navigate back and forth between screens to edit their posting.

Posting Finalization

Once users are done with the posting details, its finally time to review and confirm the listing. Only then will the user see the listing go live.

Group-372

Preview of Post / Posting Confirmation
In the preview and posting screens, Craigslists does a surprising job of highlighting the visbility of system status. Throughout the app, users are able to see pressed states and selected items, giving them clarity as to whether or not their actions were successful. For our own consideration, we suggested to change the tones of the greens a little bit, as it seems a bit distracting and off-brand.

Live Posting
On the last screen, is the Live Posting screen. On this page, some of the information displayed is (not fully) centre aligned, while the information of other pages are all left aligned. This violates the Consistency and Standards heuristic, as we suggest that all information should stick to one primary alignment system.

THE REDESIGN

GOALS

After evaluating all the heuristics on this specific task flow, we came to an agreement that consistency is one of Craigslist’s biggest issues. Therefore, we focused our improvements on that. Here are some of the things we wanted to tackle for the redesign of the Craigslist app:

Group-374-1

Here's what we came up with.

OUR REDESIGN

 Redesigned Login Experience

We first took a look at the login and onboarding section. Before the redesign, the login consisted of three primary screens, shown on the left. The login screens violated the Flexibility and Efficiency of Use heuristic, making it inefficient and inconvenient to use by requiring users to input their emails every time they wanted to make a new listing.

Group-375-1

 In our redesign, we simply made it so users, if they wanted to post, had to log into their accounts to do so. This simplifies the flow; making the process a lot more streamlined by reducing the amount of screens from three, to one.

Picking a Type of Posting

Looking at the original "choose type" page, we can all admit that it isn't the most aesthetically pleasing page out there. The page takes a lot of mental load for the user to process, as the categories are not in alphabetical order.

Group-379

Our solution: we decided to make it easier for the user to recognize the different types of posting, by adding icons for easier recognition. To improve the visibility of system status, we decided to add a progress bar at the top to indicate to users their current posting progress, so they do not feel lost.

Picking a Category

On a similar note to Picking a Type of Posting, the Categories page is also fairly congested. There is simply too much information for the users to take in, and coupled with the fact that there are so many different font weights and sizes, it just becomes a mess to read.

Group-378

Our revision: we decided to merge some of th categories together and put items under sub-categories for easier access, and to help users pinpoint what exactly they are trying to list. Not only does this look a lot cleaner than before, but it makes recognition a lot easier for the end-user in the long run.

Posting Details

The posting details page is actually just one long scrollable screen for users to navigate, with lots of fields to fill in throughout. There is no specific identifiable hierachy as to what information be prioritized first, and with the addition of inconsistent font sizes and weights, the screen comes off as fairly unorganized. 

Group-380

To fix this, we decided to cut down on a lot of the presented information, and instead, split off everything into subsections, starting with "Required Fields" at the top. Then, users will have the freedom to upload photos and location if they please. "Item Details" came next, and this section is not required for users to fill out - if filled out, this will provide extra details to any viewers who might be interested. Lastly, users will see the "Contact Information" section for any contact-related inquiries. 

Group-381

We also took the liberty to remove two redundant screens from the listing, which are the "Add Pictures" and "Add Location" screens. Instead, we incorporated them into the "Posting Details" page to fix the overall flow and efficiency, minimizing the overall set of screens.

Posting Preview

Visually, the elements of the preview page are hard to see. Theres a lot going on, and the users eyes are often drawn all over the place. There also exist many inconsistencies within the page; there are sections that are left aligned, while others are center aligned. 

Group-383

To remedy this, we decided to organize the information in a more clear and concise way - with options to edit on the preview page itself, rather than taking you to external pages. This newly designed preview page also serves as a quick "at a glance" view of the posting. 

Posting Confirmation

With the posting confirmation page being so small and disorganized in the original app, we decided to make a page dedicated solely on posting confirmation. By doing this, the user is easily notified of the visbility of system status and reassures the user that the action is complete.

Group-384

FINAL THOUGHTS

There is no question that Craigslist has been a widely successful web-service within the past two decades. But, as the world continues to advance, mobile interfaces are taking priority over web-based ones; and this is why we believe that the redesign of the Craigslist app will drive Craigslist's success forward. Through this process, we learned a lot as UX Designers, because we were able to dig deeper into the fundamentals of "why" rather than "how."

If you made it this far into this case study, I would like to offer my thanks to you. I would like to further extend my gratitutde to my partner, James Ahn, for undertaking this project alongside me. You can view his work at JamesAhn.co.

If it interests you, feel free to play around with our redesign! We'd love to hear any thoughts or feedback!

UI LIBRARY

Selected Works

Coastal ConnectDesign Sprint

Craigslist RedesignEvaluation and Redesign

CuppaCase Study