Yellow's Websites and Online Store Product

Yellow embarked on a new project that would enable thousands of small to medium businesses in New Zealand to set up an online presence in under 15 minutes. The product, called Online Store, allows users to essentially sign up for an account with Yellow, fill out a short form, and within moments get a beautiful, performant, and SEO-optimized website to showcase their products and services. The Online Store used Shopify as an e-commerce backend to host inventory and pricing information.

I was the sole front-end developer and product designer for this product.

I was tasked with designing this product offering and later developing the frontend for it. Leaning on e-commerce UI and UX best practices research, I developed a handful of themes that would suit a variety of common business types using Figma. I then developed the frontend client that generates a customer’s store site automatically using industry best practices for performance, search engine optimization (SEO), and accessibility. The site would also update when the customer updates their information on Yellow’s customer portal. The technologies used were GatsbyJS, which is a static-site generation (SSG) tool using the ReactJS library; TailwindCSS; TypeScript; and, HTML5. 

One of the themes was used by New Zealand actress Robyn Malcom, of Outrageous Fortunes fame, in launching her own undergarments online business. The site was part of a nationwide campaign by Yellow promoting the Online Store product. At launch, online store sites generated using this product received a score of 88 for the Google Pagespeed test. This score was far higher than any other competing online clothing store we tested. Google Pagespeed is an industry standard test that, amongst other factors, is heavily dependent on frontend engineering performance. Strategies such as image optimization and static-site generation helped in achieving this high score. The online stores generated also score higher than major online stores we tested in yet another widely used metric known as Google Lighthouse test. This metric measures not just performance but search engine optimization (SEO), accessibility, and other best practices as well.

As part of this project, I was also tasked with designing and developing a Website Builder product. This product was geared towards the service industry. It allowed users to easily set up a simple yet professional website to enhance their online presence, and leverage SEO benefits, without needing a store to sell inventory. From design to launch, the entire project comprising these two products was completed in under 4 months. I collaborated with the backend developers to consume a GraphQL API to generate the store sites. To consume this API, I had to write a custom Gatsby plugin to maintain certain performance advantages. 

The two products continued to thrive at Yellow, allowing the company to meet the needs of local New Zealand businesses that it has long had unique connections with.

In other areas at Yellow, I revamped the design of Yellow’s customer portal tool and developed a reusable component library (ReactJS, TypeScript, TailwindCSS). The component library was provided along with a Storybook.