Basa Seafood Express

UX, Web, Visual Design

Basa Seafood Express is a small seafood shop and restaurant in San Francisco. They wanted a strongly branded, personalized website to increase their web presence and attract more customers.

The Process

From start to finish, I was personally responsible for the design and development of the website. I started by defining what the goals of the website were:

  1. To attract more customers through a stronger web presence
  2. To provide an online menu for easy reference
  3. To inform people about the shop’s history, values, and offerings

With these in mind, I discussed with the owner what sort of information was necessary to include. I sketched out UI designs in order to figure out how best to organize this information, then created several wireframes.

The wireframes ensured a consistent yet individually optimized look across various screen sizes. Visualizing the UI in this more concrete way helped further determine the proper placement of sections and division of information.

For example, while the location and contact information were initially located right underneath the home page carousel (because I felt that this was one of the most critical pieces of information, so I placed it near the top first), in the end they became footers across all the pages. This solution also falls in line with design convention.

The restaurant menu also had a different design at first. The categories all had their own pages—this was a solution I already knew how to implement, and dividing the menu meant that the user would not have to scroll through a long list. However, this meant that the user would have to click through many different pages to explore the whole menu. However, I challenged myself to pursue the more complex yet efficient solution. The final design used one display and toggled through the different sections through a conveniently located navigation bar at the top.

Visual Identity

Once the wireframes were finalized, I created a visual identity for Basa Seafood Express. I thought about the atmosphere of the shop and what aesthetic would best suit them. The shop aims to provide quality seafood at affordable prices and with a quick turnaround. Thus, I tried to evoke an image that was friendly and casual, but also neat and simple. This is reflected in the colors, layout, and typefaces I chose. And while the majority of the site is warm in tone (which imparts a friendly feeling and stimulates the appetite), there are splashes of turquoise throughout, as a reminder of the ocean—after all, it’s a seafood shop.

These are just a few of the type combinations I tested.

Complete Responsiveness

The website neatly adjusts for optimal display across any screen size. Because many customers would like the convenience of viewing the menu from their phones, it was important that the large menu remained well-organized and easy to navigate on the smallest screen sizes.

Convenient Restaurant Menu

On a large screen, all the restaurant menu tabs are laid out in a neat navigation bar, so that people can instantly jump from section to section. However, on a small screen, displaying all the tabs would take up too much screen space. Thus, I opted for a dropdown menu that collapses after selection, so that customers can quickly and easily browse the offerings.

Accessibility in the Details

When users hover over a menu item, the correlating price is bolded. I included this feature in consideration of users who might have difficulty following long rows, making it easy for them to tell at a glance.

Packed with Tricks

The feature I’m proudest of is the dropdown menu that appears on mobile. In order to implement this feature, I learned how to:

  • Organize a list of items into a dropdown menu
  • Toggle between multiple displays according to the selected menu item
  • Make the menu collapse after the user selects an item
  • Animate an icon to rotate whenever the menu opens or closes