JetStellar


Final Mockups

Design Brief

The company JetStellar is a space travel company that offers flights to Mars. Their catalogue includes oneway flights for explorer, return flights for visitors, and holiday packages for vacationers. The company has its own space ship designed and manufactured with highest standards of safety and comfort.

I worked as interface designer to design an online booking interface for JetStellar with human-centered design approach with Soul and Naiyu, my teammates. The products are designed to be on mobile application mobile web and desktop web.

My role: I participated in design research and executed the final interface for mobile web.


Process

Design Process

Online Ethnography

I collected reviews from app store, comparison sites, product reviews to gain insights into the good and bad points of existing products from users’ perspectives.

Online Ethnography

Based on the complaints, I grouped them into categories to identify the root of all problems.

Paint Points

Design Principles

Based on insight gained from background and user research, we developed a framework of design principles to guide us through the various decision-making points in the project.

Design Principles

User Stories

Based on the design principles above, we created a set of user stories and map them to different screens in our application. This helps us audit our deliverables in the end of project more easily.

User Stories

Site Map

Site Map

Sketches

As a group, we drew many sketches of different platforms, which were based on site map and user stories.

Sketches
Final sketches of important screens

Wireframes

We digitised sketches and put them into device frames to review the size of elements.

Wireframes

Challenges on Mobile Web UI

The frame of mobile browsers reduce the visible view of website. We, therefore, decided not to use fixed bottom navigation bar. Also, the initial view of any screen will have top and bottom bar so we take these into consideration to maximise the visible content initially on page load. This include having clear guide text and title at the top.

Mobile webs need to adapt to different platform such as iOS, Android and Windows OS. Instead of relying on iOS or Android Material Guideline, we designd mobile web to be neutral and stay true to native web elements as much as possible. There are no native iOS or Android elements in our designs.

High-fidelity

We developed a style guides and applied them in our wireframes.

Mockup-1

User Testing

We conducted user testing with 5 users to figure out usability issues, as well as how people perceive the concept of travelling to Mars via our products. We used the user stories as test scenarios to look into how people completed these task.s

User Testing results

Final Mockups

After the user testing, we iterated one more time according to the feedbacks.

Final Mockups
Final Mockups

Final Prototype

You can see the prototype here

Walkthrough Video

We created a video to help people visualise how they can our prodcuts to book and manage flights to Mars.


Reflection

Ideas

One of the mistake I did during this wire framing is not have many more ideas. The team move a bit fast for having explored different idea, which cost us time near the end of the project. I saw some better idea to solve our problem and adopt it a bit late. It should have happened earlier during the process.

Team Collaboration

As we chose to work on different part of user flow on different platforms in this project, our critique to each other other are limited. It is challenging to work on my user flow and then give critique to some one else’s flow. Working on our own part gives us freedom, which cause inconsistency sometimes among our works. We then needed to standardise a few things.

A better division of work is to design the same flow on all platforms. The insight of user testing can help us improve everyone’s work.

User Testing

It’s not advisable to test with less than 5 users as 5 is the optimal number of people to find most of the problems in interface (Jacob Nielsen).

It’s actually still objectve to test with friends. The initial doubt is that friends may give positive feedbacks but I avoided that by saying the design is done by a team mate. It solved the bias and reluctance to give negative feedback well.