Case Study

London Listing: UI Design & WordPress Development for a Local Business Directory

London Listing is a directory for finding local businesses, from restaurants and hotels to garages and nightlife. 99WebSol designed and built its WordPress website.

About the client

London Listing is a local business directory that helps people explore the best places nearby, from restaurants and clubs to cinemas and galleries. Businesses can add their own listings, and visitors can search by keyword and region or browse by category.

The brief

A directory lives or dies on how quickly someone can find what they are looking for. The site needed search front and center on the homepage, a clear way into each category, and listing cards that answer a visitor’s first questions (is it open, how expensive is it, what do other people say) without opening every page. It also had to give business owners an obvious route to add their own listing.

How we built it: design, HTML, then WordPress

Like every custom WordPress project at 99WebSol, this one moved through three stages, each signed off before the next began. Separating them means design decisions are settled before any code is written, and the front end is tested in the browser before it is tied to a CMS.

1. UI design

We designed the full interface first: the homepage search with keyword and region fields, the category shortcuts, the featured listing cards, and the About, blog and article templates. Designing every page before development fixed the layout of the listing cards, the order of information on them, and how the navigation handles listings, videos, login, registration and “Add Listing”.

2. HTML, CSS and JavaScript conversion

The approved designs were then converted into responsive HTML, CSS and JavaScript. This is where the listing cards, search form and category grid were built as reusable components and checked on phones, tablets and desktops, so the directory works just as well for someone searching on the move.

3. Custom WordPress theme

Finally, the HTML templates became a custom WordPress theme. Pages, blog posts and site content are managed from the WordPress dashboard, and the front end matches the approved design because it is built from the same markup, not rebuilt inside a page builder.

What we delivered

  • Homepage with keyword and region search and quick links to seven categories: food, shopping, beauty and spa, hotels, automotive, real estate, and nightlife
  • Featured listing cards showing opening status, price level, category, and comment count
  • About page
  • Blog and blog article pages
  • Navigation for listings, videos, login and registration, and “Add Listing”

Platform and stack

  • UI design for every page
  • Hand-coded, responsive HTML5, CSS3 and JavaScript
  • Custom WordPress theme in PHP, built from the approved HTML
  • Content managed from the WordPress dashboard, with no page builder

The result

London Listing launched with a directory interface built around search and categories, on a custom WordPress theme the client manages from the dashboard.

Building a directory or listings website? See our UI/UX design, front-end development and WordPress development services, or get in touch to talk about your project.

Ready to start your project?

Tell us about your goals and timeline. We'll follow up with next steps and a straightforward proposal — no pressure, no obligation.