Element 1: Navigation.

The navigation of Craigslist’s mobile website was all over the place. The location toggle, which dictated the scope of listings the user would see, was located in several portions of the home page. Additionally, the user cannot access other categories, subcategories, or other pages from any of the category, subcategory, or listing pages. The user has to go to the home page in order to navigate to another part of the site.

We examined several competitors for inspiration on how to execute the navigation of the site. The competitors that had the most applicable and user-friendly navigation patterns were OfferUp and Yelp.

For OfferUp, they had an easy-to-use vertical show/hides that were more stable and didn’t require user recall or a special way to go “back”. Additionally they used iconography and typography to distinguish first and second level navigation.

Yelp, on the other hand, was horizontally oriented but had a persistent and clean breadcrumb trail.

Proposed design:

Element 2: Global header and categories.

Craigslist’s mobile website’s global header currently only contains location and category toggles in a dropdown breadcrumb format that is not found anywhere else online. While functional, it is not intuitive and doesn’t follow standard practices that would make it easy to learn. Based on the similarities we saw between competitors, we decided on a structure that follows typical mobile web layouts, and groups like with like. Namely, a header with primary navigation and primary global features. Right below the primary global header is a header that displays your current physical location, along with the option to change your location and subsequent listings.

This article by the Baymard Institute validated our assumptions about featuring global breadcrumbs that illustrate the site’s hierarchy. Additionally, making the breadcrumbs obviously clickable gives the user an easy way to navigate amongst the hierarchical levels of the site without having to use the back button or the hamburger menu.

Our main concern was designing a global header that was both functional and visually appealing, while also providing accessible touch targets and clearly labeled icons. Both Target and Home Depot inspired our final design. Both included a flyout for all account-related pages, which made sense for pages like “hidden posts”, “favorited posts”, as well as sign-in and signup. We decided that the option to create a post, while not a place or a collection of listings, should exist on the header nav outside of the “account” flyout. Furthermore, we divided the “account” flyout with a horizontal line to differentiate between hidden/favorite collections and account options like sign in and create an account.

Additionally, we decided to opt for the logotype rather than their peace sign logo, as the title is otherwise nowhere to be seen.

Element 3: Primary and secondary navigation.

Currently, the mobile website has accordion-style show/hides for their primary navigation. Despite both levels of navigation being visible at once, there are so many subcategories that it forces the user to recall which greater category they are on. Based on competitive analysis, it turns out that the Craigslist native app actually seemed to get this one right. They include a 2-level vertical flyout where both levels are clearly visible at once, which allows for easy recognition and reduces the amount of recall on the user’s end. Normally, this style of primary navigation would not work on sites with 3 or more levels of navigation, but since Craigslist only has 2, we adopted it for our design.

Element 4: Footer and miscellany.

Element 5: Location display.

Element 6: Results refinement.

 Element 7: Category results view.

For all of the listings, regardless of the view option selected, we decided to display the time posted in a way that was more tangible and relevant to the user. Instead of a timestamp, where the user would have to refer back to their current time and date and do math in their head to approximate the time between, we simply phrased it as “posted [x] minutes/hours/days ago”.

Element 8: Listing details page.

Overall layout.

Based on secondary research from this article, we discovered that users typically overlook information kept in tabs. Therefore, we opted to keep all the information on the listing page as vertically stacked show/hides. In order for this layout to be optimally effective, we ensured to give each section a descriptive header, and to have it expanded by default. This way, users can easily navigate the listing details, while reducing the chance of overlooking a section.

According to this article, thumbnail images ensure that the user knows how many images there are, and gives them a preview of each image. This increases navigability and visibility of the images, which are incredibly important when deciding whether or not to purchase an item. Therefore, in addition to the carousel dots, we included thumbnail images below the main gallery image.

Element 9: Home page.

Setting up our file.

Before getting into the nitty gritty of  translating our sketched designs to Figma, we sat down together to determine the parameters, constraints, and specifications of the project.

We decided on a few things:

• The viewport would be at default 360px wide, which is the most common “small” size amongst phone’s today. Despite 320px being the actual smallest phone screen width, we designed at 360px since there is only a small percentage of users who have a phone that is smaller than 360px. We made sure to stress test our designs from 320px to 480px, which encompasses the widths of phones on the market today. 

• We set up our grid as follows:

  • Soft 8pt grid

  • 4 column fluid grid

  • 16 pt margins

  • 8 pt gutters

  • We chose to design based on the 8pt grid system because it makes scaling for a wide variety of devices much easier, and more consistent.

• We wanted to prioritize accessibility of design by following Material Design guidelines.

• We wanted to be thoughtfully preemptive about styles, components, variants, and auto-layout. We therefore combed through our sketches and audited all of the instances of styles, components, variants, and any elements that could benefit from auto-layout.

Collaboration strategy.

 Creating our component library.

Next, we set to work cranking out wireframe components of recurring elements in our design. We built our design atomically, starting with the smallest elements first, working our way up to more molecular, nested components, and finally landing on larger page layout components.

Additionally, we continuously made micro-adjustments to our components since moving our designs from sketches to pixels presented us with more fine-detail decisions, such as the placement and orientation of icons like carets, chevrons, and the magnifying glass.

We split up the components that we would work on, with each teammate taking half of the components. This eliminated tandem decision-making and allowed us to create components on our own for more efficient discussion later on.

 Determining the new branding.

We selected a preliminary set of colors and tested them for contrast accessibility. Every time we adjusted colors, we also retested contrast.

For the typography, we visually compared several slab and sans typefaces. We rejected several for being too futuristic and trendy. In the end, Roboto Slab and Inter were the finalists. We examined all combinations of Roboto Slab and Inter and agreed that an all Inter approach looked clean, readable, and modern, without looking old-fashioned or too futuristic.

 Visual styling.

For the visual styling, we wanted to emulate the brand keywords laid out in the previous section. We decided to approach the visual styling element by element, performing a collaborative design studio on each and reconvening to narrow down on which iteration we liked the best.

We knew right off the bat that we wanted a flat visual styling, as opposed to a flashy graphic styling like glassmorphism. We wanted to convey a sense of simpleness and approachability that Craigslist is known for.

We went in a global, top-down order, starting with the header nav, and primarily explored color, spacing, and shapes. After narrowing down each visual treatment to ones we both thought worked well, we put components in context and tweaked from there. For example, for the search bar, I explored the shape and orientation of the search bar while Lauren explored the possible color combinations. We then discussed each iteration together to decide on which version was most visually appealing and communicated Craigslist’s brand personality. 

Main hamburger menu.

Location flyout.

We made this flyout more consistent with the other flyout styles, while adding tabs to conserve space.

Reply modal.

Since the reply modal is much simpler than the other flyouts, menus, and overlays, we decided to go for a simple composition and visual styling. For instance, unlike the filter menu, there is no confirmation or multiple inputs needed.

View options.

For the various view options, we experimented with displaying the listings as cards vs. as a list. We found, through creating and comparing several iterations side by side, that cards with a slight elevation made the listings cleaner, more distinct, and more visually attractive. Furthermore, for gallery view, we adopted Airbnb’s use of transparent icon overlays for our secondary actions. We also made the gallery images a 16:9 aspect ratio because that is the common proportions of cell phone cameras nowadays.

Listing details layout.

While cards worked well for the category and subcategory results pages, they looked too cramped when we attempted to apply them to the various sections of the listing details page. To remedy this, we eliminated the cards and decided instead to separate each section with a thin grey line.

Home page.

Lastly, for the home page, we came to sort of an impasse with Craigslist’s existing IA. Since there are so many subcategories within certain main categories, it was not possible to create a design that both kept the current IA and eliminated recall strain. The options for us were to either fix the IA or not, and we chose not to due to time constraints.

Since most of our competitors sell new items, they focused on promoting specific items on their home page, whereas Craigslist’s content is all user-uploaded. We therefore needed a way to display the categories and subcategories without promoting any category, subcategory, or listing in particular. 

We experimented with color and hierarchy and landed on this design:

 Now that we had completed our components, styles, and page layouts, it was time to create a design kit so that designers and engineers can easily navigate our design file and make consistent designs of their own. 

You can view our design kit file here.

Before we shifted into high gear, we collected several examples of good design kits from Figma Community. The design kits we found most easy-to-navigate, comprehensive, and aesthetically appealing were: The Pegasus Design System, a sticker sheet file from Config 2021 made by Angela Pinzón and Santiago Camargo, the Material Baseline Design Kit, and the design system from Atlassian.

We then took our components and made them into layout sticker sheets for each page type: home page, category page, subcategory page, and listing details page. We put the sticker sheets on a separate page to differentiate them from their more atomic components. 

After this, we went through each component to ensure that there were no unnecessary overrides. When we encountered them, we reset that specific override to the main component property. This ensured that any changes made to the main component would be reflected in their instances. 

Lastly, we ensured that each component was fluid by stretching the component horizontally to see if it would retain its proportions. This ensures that whenever the component is used in a fluid grid design, they will behave correctly regardless of the screen width.