DineIn
An one stop restaurant management application
OVERVIEW
Our Project aims to be an all-in-one restaurant management application for managers to smoothly run their restaurant and manage daily operations such as make reservations, keep track of food orders, view waitlist status, table management, staff schedules, etc. Managers don't have to consult any other external tools anymore because DineIn can accomplish them all.
MY TEAM
CaseyNitz
Suzy Kong
Jimmie Plautz
Kameron Young
Kass Chupongstimun
Bryan Suzan
MY ROLE
UX/UI Designer
Front-end Developer
Visual Designer
DATE
METHODS
Competitive Analysis
Brainstorming
Storytelling
User scenario
Jan. 2018 - May. 2018
BACKGROUND
One of my teammates worked at a restaurant on campus and have long hated the scheduling
application that the manager used. On top of that, they also used a completely separate
system for actually managing the day-to-day operations of the restaurant and the user experience is terrible.
COMPETITIVE ANALYSIS
We compared 4 restaurant management applications in the market: HotSchedules, Dinetime, 7shifts and When I Work
As you see below, NONE of them offer all the essential features a restaurant needs to finish the necessary tasks.
FEATURE DESIGN
As a manager, I should be able to:
-
Log in as a manager
-
See and modify the graphical overview of the restaurant’s tables
-
Manage waitlists and reservations
-
See an overview of all employees and manage payroll information
Restaurant manager
As an employee, I should be able to:
-
Log in as an employee (waiter/waitress/bartender etc.)
-
Punch in arrival and leave time
-
Check my payroll information
-
Tap on a table and perform actions:
-
Assign table to themselves, Mark table as “order took”, Mark table as “order served”, Mark table as “paid”
Restaurant Employees
USE CASES
Log in
Log Out
Add a Reservation
Modify Table Layout
Seat Party at the Table
Free a Table
Punch in/Out
Add Party to Waitlist
Remove Party from Waitlist
View Employee statistic
WORK FLOW
Then we walk through the procedure of using the application and below is the sequence model.
Prototyping & Testing
We asked the peer group as our users to test the initial prototypes in InVision. They gave us very meaningful feedback.
Then we moved into the development phase.
I was responsible for front-end development. The technologies we used was:
HTML5, CSS and SCSS, TypeScript
We used Ionic framework since it targeted at building hybrid mobile apps.
Database Entity-Relationship Model
FINAL PROJECT DEMO
DineIn
REFLECTION
Demo day Team Photo
User Experience perspective:
-
Minimalist Approach
-
3-4 colors
-
-
Darker Themes are better for user’s eyesight
-
Don’t clutter the UI when you don't need to
What was successful?
-
Implemented all primary features
-
Drag and Drop table was successfully implemented
-
Unit testing for separate modules
-
API hosting on Heroku
-
Backend construction
Lessons:
-
Spend time really learn the frameworks you are using
-
Start testing early, isolate units better
-
Things work well separately, they break when we try to put them together
-
Using git “properly”
-
Plan CSS styling ahead of time keep it organized
-
Communicating, always update the team on what’s going on (helps with reducing git merge conflicts too)
To check out our code, visit the Link from GitHub:
MY OTHER PROJECTS: