MacBook-Pro-16-2
Harry's Singapore Chilli Crab

I reached out to my previous employers to redesign their website and give it a fresh new look

Overview

Harry's Singapore Chilli Crab is a high-end seafood restaurant. The value that comes from visiting high-end restaurants is the customer service, fine dining and presentation. I wanted to give the website a fresh new look that would convey that fine dining idea.

The Challenge

Being my first project I wanted to apply what I had learnt. Finding out the target audience was step one, step two is asking the purpose of visiting the website to not lose.

The website currently lacks a logo, lacks consistent font/branding, and readability of text suffers in some areas. The mobile version of the website is pretty rough.

Goals
  • Re-design the website to be responsive and easy to use and view
  • Ensure website is mobile friendly
  • Create a logo
  • Establish brand guidelines while following WCAG guidelines to ensure accessibility for older adults
Role

Website Designer

Duration

75 Hours
Mar - May 2021
June - July 2021

Scope

Responsive Website
Visual Design
Branding
WCAG 2.0 Compliant

Tools

Adobe XD
Illustrator
Notability
WIX

Who is the target audience?

The primary customer base ranges from 25 - 70 and older; people who have a stable source of income that can afford expensive dinners. Bookings make up a large chunk of income for Harry's. Special occasions like anniversaries, Valentines Day, New Years Eve, business dinners, meeting a life long friend who's in town for the week. Harry's has a lifelong customer base who know the restaurant can accomodate large venue bookings aptly, rearraging large amounts of seating to accomodate 16, 24, 32 person bookings.

Why visit a restaurants website?

I created a survey that I gave to my friends, a mixture of college students, part-time, and full-time employees. The data produced was neither conclusive or helpful. I learnt why quality feedback and one on one user research is highly valued in the field of UI/UX over raw quantity.

Surveying friends who had partners and more disposable income produced data that was more applicable as they were more in tune with the customer base of Harry's.

The top 3 main reasons didn't deviate from the previous survey (seeing menu, prices and pictures). Online booking and opening hours were tied in importance as they typically booked for special occasions. They also much preferred online booking over making a phone call, it's less stressful and less prone to error (some recalled miscommunications leading to wrong dates or times). Gauging the ambience ranked higher in importance than the previous group as people booking high end wanted to see the vibe of the restaurant or venue in case it didn't suit the occasion (romantic/classy).

Applying data

The home page is the first impression, it's important to convey as much as possible whilst maintaining visual clarity. Since seeing the menu is a top reason I wanted to feature a CTA on the initial landing. Making a booking is the last step after seeing the menu, seeing the pictures and gauging the vibe so I felt that it was appropirate to add a CTA in the footer.

When asked people generally did not care for the About Us section and was typically the last in terms of priority. I didn't take it as a sign to omit it completely but rather not have an entire page dedicated to it as it still serves an important purpose in telling people the values and promise of the restaurant. 

Site Map / Navigation Bar

Web-1920-–-1@2x-1
Iterations

I've redesigned the website a couple times now, once when I first read up on UI/UX then applying what I had learnt and seeing what design elements are available in WIX. Another after I asked for advice from Xue, my teacher at TAFE during my UI/UX Course. And a final time after buying a book about design, applying what I learnt from the book, creating a logo, then creating branding around the logo.

The original website
Comp
Second Iteration

I thought the opening note was important but since it wasn't temporary I later moved it to the opening hours. I fixed up alignment of opening hours to two seperate boxes so the times could be left aligned.

After asking for advice

I created a pdf version menu for phone accessability as the photos were a blurry mess on mobile devices. I'm not too sure what my original thought process behind the pastel red/blue buttons, I assume I intended to make them stick out a bit more. I changed them to match the yellow/red.

The navigation bar was re-ordered after asking Xue for advice/input.

<--- Highest value to lowest value--->

Home | Menu | Reservation | Gallery | Contact

 She also suggested adding a slideshow of pictures, I added a slideshow that didn't have crab as the first image and a button that directed to the gallery. After another round of feedback I changed the first image of the slideshow to a picture of the crab which I realise in hindsight made a lot more sense. The button was changed one that directed people to the menu as it's usually what people are after.

I added a CTA at the end of the image to people making a booking after learning about the purpose of call-to-actions.

Smaller changes

The main button really bugged me and I kept changing it around, it just kept looking strange or out of place.

I started applying consistency between page titles like OPENING HOURS and MENU. I created a web friendly version of the menu which was a painful process even with WIX, the menu is incredibly long with many sections. I made the mistake of removing the original menu which some people later requested to be readded. It was also slightly too spaced out making viewing the menu pretty annoying in hindsight, I added buttons that scrolled to each section when clicked as there's no functionality to create 'tabs' within WIX.

I redesigned the menu but it was way too spaced out and a terrible experience to view. I added anchor links thinking it would solve this problem but it really did not. I should have prototyped the menu properly.

Post UI/UX Course

Originally I just added 'Harry's Singapore Chilli Crab' in Poppins Semibold in the top left. During my course I also asked a graphic design student who did some freelance branding work, what she thought and she commented that it looked a little placeholdery. That comment stuck with me for ages. I couldn't think of anything to do with Harry's Singapore Chilli Crab, anything that embodied the restaurant.

After the TAFE UI/UX course I redid the website as a proper case study, wireframing and all. The logo came to me one night when I was absolutely fixated on adding a cocktail glass in the place of the 'Y' in 'HARRY'S'. If I was any better at art I would try create vector art of Harry holding up the wine glass similar to Leonardo Dicaprio in Great Gatsby as that's an idea I've also had.

I ended up rounding the button as the sharp corners just wasn't looking right.

I changed the alignment so the days are right aligned against the times which are left aligned. The graphic design book suggested it once but there's no support or reasoning for doing so anywhere online. It looks nicer right aligned but I think it's more readable left aligned, ultimately I'm unsure which is better.

The current menu is now 3 columns a section instead of just two.

Existing website analysis
Note-26-May-2021
Page5
Page6
Page7
Wireframing and layout planning
Page2
Page1
Page3
Logo sketches
Page1-1
Page2-1
Artboard-1@2x-non
Artboard-1@2x
inverted
Web-1920-–-2@2x
Adobe XD Mockup

I played around with font pairings for body, display and buttons till I found ones that were suitable for a line motif I was looking to create. Titles underlined, a strip of white seperates the navigation bar and page. Raleway and Monsterrat are the main two fonts, each with their own unique characteristics whilst having thin stroke and carrying a slightly elegancy.

Wine-Sticker
Branding

I redesigned the branding as the previous logo and branding didn't suit or fit the themes or ideas that I wanted to be expressed in the website. The font doesn't deliver really give me the feeling that the restaurant is fancy or upscale. It's a stretch but maybe it was intended to maybe somehow allude to the hawker centres of singapore? But at the same time that is not what you would want your branding to say about you if you are an upscale restaurant.

 

Colour

Having worked at the restaurant I wanted to evoke the same feeling I have when inside. The website has a darker theme for a dark and mysterious but fancy allure I hoped to achieve. During an interior design phase, I learnt that when dark opposing walls are a darker colour than the roof and back wall it can make a space feel more narrow. Seeing it applied in Harry's restaurant to achieve a cozy comfy feeling despite the wide open floor plan was interesting.

FDC921
FF3333
14151A
000000
Final website design

After discussion with the restaurant manager this is the final design and the special offers section they've created for the July lockdown period.

FireShot-Capture-132-CONTACT-Harrys-www.harryasdfschillicrab.com_.au_
Gallery
Booking
Menu-2
Contact-1
Closing thoughts

When I first learnt about UI/UX I thought I could get away with not doing any wireframing on the website as I didn't think it was a project big enough to require it. I did however learn a lot about WIX  and how many things I could and couldn't do.

Making a website WCAG compliant is lot more work than had I originally thought, I tried the best I could to make it so with the tools available within WIX. Which is to say, not great.

I'm really happy about how it came out and how it looks currently, however I would personally redesign their marketing/special offers for them if they permitted me to tie up the design nicely.

Let's Connect!