Elegance should be accessible
BrainStation UI final, 2021. A semi-upscale restaurant site with a tight style guide, AA contrast, and pages guests can scan on a phone.
Context and role
Context
A restaurant site people can scan
BrainStation UI Design final, August to October 2021. Option 1: a site for a fictitious semi-upscale restaurant. Menu, specials, reservations and ordering were on the brief. I also wanted a blog guests would reopen for recipes, specials, and events.
I ran 3 interviews with people who eat out. Class projects make recruiting hard, so the sample stayed small. What came through anyway: they scan on a phone first, they hunt for hours and the address, and they bounce when contrast or chrome gets cute. Priority one stayed easy to read. Inspiration was Autostrada, Earls, Cactus Club, and Di6mond.
Role
What I owned
Solo visual design across about 10 weeks: brand wordmark, colour and type, sketches, wireframes, hi-fi for desktop and mobile, and Figma prototypes for both. Competitor pass against 4 Vancouver hospitality sites. No developer partner and no real client.
This sits next to myStop from the same BrainStation year. That one was UX. This one was UI and brand systems for a multi-page restaurant site.
Numbers
What I can actually count
3
interviews
Small sample. Class projects make testers hard to find.
10
weeks
August to October 2021
12
hi-fi screens
6 pages at 1440 and 390
4
competitor sites
Autostrada, Earls, Cactus Club, Di6mond
Interview count is from memory of the class project. Research folder I still have is competitor screenshots, not the raw notes. If I dig up the write-ups, these update.
Decision 01
AA contrast over fancy UI
The hard part was elegance without the usual portfolio tricks. No glass, no abstract layouts that look clever and fail contrast. I aimed for at least AA on the real backgrounds, and patterns guests could recognise instead of learn.
Cream surface #FAF8F5, charcoal #2A3E46, slate #48555A. Soft peach, mint, and powder blue as section tints only. Sharp rectangles for primary buttons. Text links with a chevron for secondary.
Decision 02
Small type system, reused chrome
Type locked early: Taviraj for H1 to H3, Poppins for H4, body, and captions. Serif carries the brand wordmark and page titles. Sans does the work on menus, forms, and nav.
The UI library stayed small on purpose: fill and outline primary buttons, secondary text links, a bordered input, and the boxed rare logo in light and dark. Enough to build every page without inventing a new control each time.
Decision 03
Blog shipped. Ordering did not
The brief asked for reservations and online ordering. I never shipped those flows in the hi-fi. What I did ship was a blog and events path, plus a contact form, because the pitch was: give people a reason to come back without calling the host stand.
Looking back, hours and address should have sat higher on Home and Find Us. Guests look for those first. Fancy photography does not replace a phone number.
Interface shots
Outcomes
What the final deck actually held
Full page set in hi-fi
Home, Menu, About, Blog, Blog post, Contact. Each at desktop 1440 and mobile 390. 12 screens total.
Style guide before polish
6 palette colours, 2 typefaces (Taviraj + Poppins), logo, buttons, and form controls documented before the final screens.
Clear regrets, written down
I would spend longer on sketches and wireframes, push hours and address higher, and stop calling the brand finished when it still felt generic.
School project, not a live restaurant. No booking metrics. The useful residue is the style guide, the 12-screen set, and a clearer sense of what I would cut next time.
Reflection
Wireframe earlier. Show the hours.
Biggest takeaway was early planning. Sketching and wireframing mattered more than I gave them. I would also be less generic, add ordering and reservations for real, and put opening hours and the address where hungry people look first.