This is UX Design Summative Assessment for a Diploma in Web & UX Design from Yoobee College of Creative Innovation. Our team were responsible for developing a proposal for one of the traditional cafes in Wellington New Zealand.
Improve customer engagement and sales of some of their more unique offerings by providing table ordering via digital devices. Customers will be able to use touch screens at their table or booth, tablet type devices mounted at the bar or on phones anywhere in the venue. They require a system that enables customers to easily order and see the progress of their order, view deals and make suggestions.
Our proposal for this problem is the development of a responsive application using the mobile-first methodology. In this methodology, the design is made thinking about mobile devices first and then the other devices. In other words, an application that has a design that promotes the best user experience on mobile devices and also on any other type of device. In this way, we meet the main requirement of the business by providing table ordering via tablet and mobile devices.
We used a 6D UX Process model:
- Discover
- Define
- Design
- Develop
- Deploy
- Drive
We conducted interviews with users and stakeholders. From these interviews, we built a user flow for our application. Our first step to ours solution was sketching out our wireframes, then we moved into Figma and created lo-fidelity wireframes. Following the user journey map, we chose a single ‘happy journey’ and mapped out the different designs. The second step was submitted these wireframes to tests, and from the results obtained we built our prototype. By validating the prototype with the client and testing with the user, we developed this website which is in beta version 1.0.
- Responive Website
- Using flexbox
- Have OOCSS to structure CSS
- Formative UX techniques
- Modern JavaScript application
- Using VsCode, install the
ritwickdey.liveserver - This extension will run a live server locally.
- It will watch for changes in your files and automatically refresh the browser.
- Using VsCode's terminal, run
npm start, this will watch your sass file and auto compile at every change.