GroupTraVote Project

Introduction

GroupTraVote was designed when I studied interaction design at Northeastern University. It was a 12-week group project. Three of us designed a group vote trip application for audiences who are problems with deciding where to go.  Those audiences could be family, friends and college students, or any group plans to travel together. Based on users’ scenario, we designed the website with process guided users to reach out to their goal. I worked with my two other teammates released the project-GroupTriVote in 2016.

 

Design process

User scenario –> Wireframe –> UI Elements (logo, icons, typography, colors, etc) –> UI Interfaces –> Development –> QA –> Release

What did I do?

Front-end Developer|Application strategist|Wireframer

Front end developer: I mainly work as a front-end developer, developed the whole website by using language HTML, CSS, and jQuery. I led the development efforts to evolve the interaction and user interface experience of the site.  I am responsible for implementing visual elements that users see and interact with in the web application.

Experience Strategist and Vision: I created sketches to share the vision and content strategy. This helped to evangelize ideas, gain alignments and drive decision making.

Responsive wireframe: I designed responsive mobile size wireframe, translate the application for each platform context. Since it is a web-based project, we considered the responsibility and designed the mobile version which ensured users would see the website correctly when it is on the small screen.

You can find the release application here: https://belannazhou.com/djm-finalproject/finalproject/index.html

Wireframe and User Flow

Our application began the design with the wireframe. In the wireframe, we skethed13 main screens and flow of each screen. You can the detail below:

Mobile Application Wireframe for GroupTraVote

My teammate and I designed the mobile wireframe when we signed off the web functions and layouts. The navigation of this app is located at the bottom. All the screens were designed matched with the web version. You can find all of the screens below.

 

 

Preview real website in here: https://belannazhou.com/djm-finalproject/finalproject/index.html