Cafe de l'Orangerie

Deliverables: redesigned site here

Cafe de L'Orangerie is NOT your average neighborhood restaurant. With to-die-for masago spaghetti, rice dishes, and baked goods, this Japanese-French fusion cafe is my favorite place for a comfort meal. Their site, however, is rather outdated with opportunities for multiple visual and usability improvements. This project serves to redesign then develop the homepage based on usability and accessibility considerations.

Finding Problems
In general, people visit a restaurant's website to learn more about their story & offerings, checkout the menu, and find out their location/hours/contact info. Where should I start..? First, to find problems regarding the site, I performed an audit focusing on various aspects of usability, which include: learnability (how easy the website is to learn), memorability (how easy the website is to remember), and efficiency (how well the website does what it should do). I also used WebAIM WAVE to detect any possible accessibilityconcerns and how the website is interpreted by screen-readers. My findings are summarized in the annotated homepage & table below:

Now, what's the best way to tackle all these 10000 problems? Using Balsamiq, I decided to put my ideas into the annotated wireframes below: (embedded as a Figma file for interactivity) - p.s. you can freely zoom in/out

With this design, I consolidated sections including as "contact" & "hours", created new sections including "about" and a slideshow, as well as redesigned sections such as header & footer & "what's new". I removed redundant sections/wordings, as well as refreshed the overall layout and visual appearance, with the goal of improving the original site's aspects listed below:

To concretize my ideas, I turned my low-fi wireframes into the hi-fi prototypes below using Figma: p.s. you can freely zoom in/out

As shown, I annotated various elements to facilitate development process. This would also enable a smoother transition for handing off the design to an engineer. I planned to use flexbox for larger containers to ensure responsiveness. For interactive elements, I also created a style guide (elaborated in the next section) that documents how they will change visually based on click/hover actions.

Style Guide
Of course, visual consistency is key! To keep the development process and user experience coherent, I created the visual design style guide below that displays the main colors, typography, and reusable components’ different states.

Finally, it is time to create the webpage! Using my hi-fi prototypes and style guide, I developed and deployed the homepage with HTML/CSS. Feel free to visit it here! Note that all interactive elements (e.g. buttons, nav items...) are simply dummies - they do not link to external pages. To ensure responsiveness, I used the Chrome Developer Tools to test the site on various screen sizes and enlarged/minimzed font sizes.

To ensure accessibility for various screen sizes, I used WAVE to test the site with desktop, tablet, and mobile screen sizes. The only probelm I found was color contrast issues with the two arrow controls on my slideshow section. However, this was difficult to fix due to the fact that the contrast issue only appears for certain images. (The two arrow controls are overlaid on top of images). In the future, given more time I will tackle this issue by finding a universal accesible color for the two arrows.

Future Steps
Of course, I recgonize that there exist various additional opportunity areas in this project. If given the chance, I would love to interview the restaurant staff about their ideas & goals, as well as restaurant guests about their needs & preferences regarding the website to gain more actual insights. Moreover, I would also love to develop alternative designs and conduct A/B tests to find out more about user preferences and behaviors.