Git Product home page Git Product logo

cwux's Introduction

Alt text

The CWUX mobile first website

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.

The Problem we have to Solve

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 proposed solution

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.

How we came with our proposed solution?

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.

The project

  • Responive Website
  • Using flexbox
  • Have OOCSS to structure CSS
  • Formative UX techniques
  • Modern JavaScript application

Local development

Watch html files

  • 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.

Watch and compile css files

  • Using VsCode's terminal, run npm start, this will watch your sass file and auto compile at every change.

cwux's People

Contributors

jess2d avatar madnilo avatar mairalds avatar

Stargazers

 avatar

Watchers

 avatar  avatar

Forkers

mairalds

cwux's Issues

Home

Aceptance criteia

  • Home with background and buttons

Enable hot reloading for enhanced development experience

who/what/why

As a helping developer
I need to have the page refreshed in the browser at every file change
in order to improve local development experience

Acceptance Criteria

  • Page refreshes upon js, html and sass changes
  • Sass watches sass files using just npm start

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.