Lucas N.Lucas Neumann
PLACE
São Paulo
YEAR
2017
DESIGN TEAM
Lucas Neumann
ROLE
Design
Front-end
Back-end

GoldenArt website

A 30-year-old company's web catalog

This project is a very simple catalog, but I'm proud of it because it's the first full-stack website I've built and shipped while learning to code. It uses Airtable as the CMS, where the client can update the products' information and actually became the source of truth for the company's inventory. It was a steep learning curve and got me a decent understanding of Javascript, Node, and Express.

Problems with the old version

The client and I walked through the old website together and listed main issues that needed a fix. Visually, they felt like the website was too dark, and that functionally it was clunky, had many bugs, and was hard to maintain and update. The product pages opened in a lightbox, which made it difficult for users to save and share specific pages. Also, the website was not responsive, which increased a high mobile bounce rate.

  1. We found various legibility problems with the colors used in some fields.
  2. Submenus and links were added with time on top of the original structure, which created a very questionable information architecture.
  3. The main banner was a static image with flattened text, which was hard to update and read on mobile.
  4. The bottom menu was fixed, which occupied too much real estate.
  5. The client had little control over the order in which the products were displayed.

Backend

GoldenArt has over 500 products in their catalog. The old Wordpress website was painful because it required the company to keep the CMS up-to-date with their in-house catalog system, which was an Excel spreadsheet. In researching solutions to this problem, I found Airtable, and the client and I fell in love with it.

It is a very friendly platform, and it became the internal source of truth for all the information about the product lines, which gets shared with their partners and clients. As they change the info on Airtable, the website is updated in real-time.

Results

The new website has a much more coherent structure, with products divided by line and type. This makes it easier for a user, such as an architect, to find the kind of product they're looking for. It's easier for the client to add and change details about each product, attach technical drawings and 3D files, and now each product has dedicated shareable page.

To me, this was a challenging and fulfilling side project that quickly elevated my knowledge of web design and development. After working long hours to ship the website and after the multiple times I accidentally took it down, I'm now much more comfortable having technical discussions with folks in the product teams at work.

Get in touch

Feel free to shoot me an email , which I check more often than social media. When I need a dopamine fix, I usually check Twitter and Instagram. Dribbble is where I shoot pretty images that solve zero real problems. Check Linkedin to see my full CV.