Blog post

The Soup Place

The Soup Place was a final project which was designed to be ADA (Americans with Disabilities Act) compliant, accessible, usable, and viewable on both Mac and Windows desktops and mobile devices. Content of The Soup Place is compatible with desktop, mobile and tagged for ADA accessibility. Acceptance criteria was created for this project and was fully tested by myself and another user to validate the functionality of the site.

This project was inspired from the Seinfeld episode “The Soup Nazi”. Fake commissioned by the "The Soup Nazi himself, the objective was to present information clearly without frills.

After meeting with the fictional client a statement of work was created to document the work to be done.

Statement of work:

Client: Yev Kassem aka The Soup Nazi, who is a demanding perfectionist when it comes to his soup and will probably be just as demanding as a client.

Objective:
  • Inform users of restaurant’s strict ordering procedure and rules to follow, soup menu, location, hours, phone number.
  • Site and content must be designed and developed for usability, accessibility, and ADA Compliance.
SEO:
  • Create user centric content instead of focusing on keywords
  • Design easy and clear navigation
  • Keep media file sizes small to insure site speed is faster
  • Design site responsively
  • Write title tags utilizing relevant keywords but also keeping in mind they should be written for users
  • Describe images accurately in alt tags
Technology:
  • Operating Systems: iOS, Windows 10 (will be first developed on Windows 10)
  • Browsers: Chrome, Firefox, Safari
  • Mobile devices: iPhones, and Androids
  • Visual Studio Code (code editor for development)
  • Bootstrap, HTML, CSS, JS framework
  • Github (for version control)
  • Hotjar (for heatmaps, tracking user sessions, user forms, user surveys, getting user feedback)
  • NVDA (to test ADA usability)

Testing Plan: Enlist friends and family to test my site and for UAT as well, with devices that I don’t personally own. I will need to create acceptance criteria and have my testers test against it.

Web Hosting Platform: Altervista, free hosting service with ad free domain

User Stories:

As a I Want So that
User to find the Soup Menu I can see what soups are available at the shop
User to locate vegetarian soup options I can quickly find and decide which vegetarian soup I want to order
User to find the Location & Hours I can see where the shop is located and the hours
User to find the Ordering Procedure and Rules I don't get kicked out of the shop and get soup
Admin/Shop Owner the user to see a custom 404 page with a link to get back to the main site When users mistype a URL or try to get to a missing page on the site they do not get frustrated and leave
User to navigate the site on a mobile device I can easy find what I am looking for on the go

Sketches:

Sketches are a great way to quickly visualize everything needed to go on a page. These were created in InVision.

Development:

Normally I would have mocked up the pages with branding, however I felt I had a clear enough visualization of how the UI should look I hopped straight into development. Screen reader classes were developed specifically for those with visual impairment.

Find project on Github:

https://github.com/vw-works/theSoupPlace

Validation:

Once development was finished, The Soup Place was tested in QA against the Acceptance Criteria created before work on the project began. The project also passed HTML, CSS and Web Accessibility Checkers.

PDF of Acceptance Criteria: Download

Finished Project:

Find Project Here: https://soupplace.altervista.org/

Technology:

InVision, Bootstrap4, CSS3, HTML5, GitHub, Hotjar, NVDA

Role:

Sketches, Requirements, Acceptance Criteria, User Stories, Wireframes, Mockups, UI Design, Branding, Front-End Code

Published Here:

The Soup Place

Previous Project

Next Project