As part of a pro-bono initiative by Web Impact at the University of Washington, I collaborated on a project to build a website for Bugis from scratch. Bugis is a locally-owned Korean restaurant located in the University District of Seattle.

Bugis lacks a website and online presence. Their presence is solely through third-party sites like Yelp and Grubhub.

Bugis has a website that includes all of their information related to their menu and their story.

Prospective customers can easily view their menu on the website to explore available options, check pricing, and make informed dining choices

Visitors can explore Bugis' story, mission, and values, gaining insight into the brand's purpose and vision, while also understanding how they align with Bugis' core principles.

We first looked at the interior and exterior of Bugis looked like and their signature food to draw inspiration for our mood boards. We identified two potential design vibes for the website: Neutral and Classic or Lively and Fun.
‍

With these two vibes in mind, we scoured the internet for visual inspiration to create two distinct mood boards reflecting each vibe:

Board 1: Neutral and Classic

Board 2: Lively and Fun

We opted for a simple hierarchical structure that showed distinct sections where specific information can be found on the website. The main webpages we wanted were:

• Home
• Menu
• About
• Contact

We created a sitemap detailing Bugis' key pages and the information contained on each page. Below is the mapped-out experience of the Bugis website.

After creating those initial mood boards and site maps, it was time to meet with the owner of Bugis for the first time. This is where we ran into our first challenge:

The owner spoke mainly Korean and was busy as the head chef when we arrived at Bugis to discuss with him. He kept sending his daughter to answer our questions, but we needed to hear directly from him about how he wanted the site to look and feel.

To solve this, our design lead managed to bribe some of her Korean-speaking friends to sprint to Bugis and be our personal translator. :)

After 20 minutes of back-and-forth between English and Korean, we were finally able to get the owner's input on the website design. The owner didn't want something too colorful or too bland, but rather a mix between the two.

"Too stale. Needs more personality"

"Too much color and
playfulness"

"Love how clean this looks"

After that first meeting, we were met with our second challenge:

Due to the owner’s long hours and early shifts, he couldn’t meet regularly to be part of the design process or confirm our designs.

We decided that the Design Lead would become the main contact for approvals and decisions from the Bugis owner. We based design choices on our initial meeting and adapted our process to fit his constraints while seeking feedback at key milestones.

Even with those roadblocks, we went ahead and started sketching out low-fidelity wireframes the homepage. For every website page, we came up with multiple layout ideas. Here are the scrapped wireframes that didn’t make it:

Here are the final wireframes that will serve as our foundation as we start prototyping and refining our designs. We decided to scrap the Contact Us page and shifted the key contact info to the footer. This simplifies navigation while still providing easy access to email, phone, and address in a spot users expect.

We began by developing multiple initial concepts to explore different creative directions. We tried to tie in the pink pickled cabbage that was a reoccurring color throughout all the dishes served at Bugis. Here are a couple fonts and color palettes that didn’t make it:

Pink pickled cabbages

Initial fonts and colors

Prior to handing off our designs to our programmers, we documented our components to ensure clarity as to how each element was created, how they should appear, and how they should be used.

Here is the final prototype that was handed off to the coding to start the development of our pages. :)

Our website hasn't been deployed yet, but you can interact with our final pototype with the Figma below!