Tina Claussen
UX/UI Designer
Van Gogh's Eeterie UI Refresh
Overview
This project involved creating a design system for the website of a local business. Another aspect of the project was to create elements in the design system for desktop, tablet and mobile devices. The deliverables for this project include:
​
-
Component library
-
Color palette
-
Typography
-
Style tile
-
Mockups of the website for desktop, tablet and mobile
Key Drivers
Having a design system in place for a website serves several purposes. First of all, it ensures a unified look across all areas of the site. Secondly, it helps with alignment and consistency issues, and finally, it saves time and effort on the part of the designer. For the business, a design system, like a branding system gives customers a more positive experience with your business.
For this project, I chose Van Gogh’s Eeterie, a restaurant specializing in Indo-Dutch cuisine in Springfield, MO. The business is successful, but the website is disorganized and does not have a cohesive design aesthetic.
Research
Heuristic Analysis
The first step in this process was completing a heuristic analysis of the current website.
This process revealed the following issues:
​
-
the design of the various pages was not consistent.
-
typography was inconsistent/not reflective of the brand
-
the forms and site map break typical web conventions
-
some features of the website are difficult to discover
Outcomes of Heuristic Analysis
There were three major changes to the structure of the website.
​
-
the contact form was reconfigured into a more standard format to make it easier to use for the user.
-
the old menu was simplified putting only menu categories on the main page using a card system. Each category then had its own page with item description and pricing.
-
the header, nav bar, footer and social media icons were standardized and put into a format that was easier to understand and use.
Nielsen’s Usability Heuristics
Visibility of System Status
menus are difficult to read and navigate
2. Match System and Real World
use of Dutch could be confusing to users
why the reference to Cafe Cusco-not the same establishment?
4. Consistency and Standards
difficult to see “reservations” and “about“ sections-those are ususally their own page/section
home page does not follow CRAP principles
email form in non-standard format
the Van Gogh portrait is where the social media links are, but you have to hover and there’s no affordance to tell you to hover.
5. Error Prevention
email form isn’t laid out in a traditional manner-could lead to errors
6. Recognition Over Recall
menus are very difficult to digest-information overload
8. Aesthetic and Minimal Design
design, especially on home page is busy and uses inconsistent typefaces
Process
Style tile
Creating the style tile solved many of the problems uncovered in the heuristic analysis. The style tile featured the color palette, refreshed logotype and logomark, and typography.
Typography
The website features many different typefaces-serif, sans-serif, hand lettered, italic, multiple sizes and weights. Text may use any brand color, pure black #00000 or pure white #FFFFFF so long as proper contrast is maintained for accessibility.
Color Palette
The color palette was chosen based on images of Holland, including tulips, delft blue dinnerware, and Dutch eateries. I also did some in-person research and looked at the colors of the restaurant (menus, paintings, décor items, and the menu) to help choose colors for the website.
Logo redesign
The logomark was actually a strength in the old design. The only flaw was the single color made it look more like a lotus than a tulip. A simple re-color solved that problem.
Component library
The component library featured the most commonly used features of the website: buttons, navigation bars, headers, footers, image sliders, menu cards and a contact form. A larger or more complicated website would have many more elements to the component library, but this was a fairly simple website with easy-to use features and limited functionality.
Deliverables
Contact page
Menu page
Home page
Learning Opportunites, Takeaways and Outcomes
Learning Opprotunities
Designing for multiple devices was both one of the more difficult challenges and one of the richest learning opportunites in this project. Two of the skills I learned that were most helpful in this process are working with
Apple’s Human Interface Guidelines, grid systems and Figma’s grid tools and best practices for sizing on various devices.
I also learned to check early on for how the screen will appear on the mockup/actual device if you have a screen that scrolls. My early designs had elements that were too large and it made the screen view look really odd.
I found both of these tools difficult to grasp conceptually at first, though I am very comfortable in working with both now. Components were easier of the two, but I learned early on the pitfalls of not making the components first. Learning variants was also a helpful skill.
Autolayout was more difficult to grasp. I quickly learned how to build simple components, like buttons, but it took watching several videos on YouTube and talking with my classmates to grasp how to build more complex components like cards and contact forms.
Takeaways and Outcomes
This project really helped me learn a number of skills and tools.
Design systems, including have great power as a way to both codify a design scheme and save time for designers and coders.
Autolayout and components are great time saving tools that help with consistency in a design.
Heuristic analysis is a powerful research tool.
Networking is helpful for learning skills, tips and tricks, and support.
