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.
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.
Based on the complaints, I grouped them into categories to identify the root of all problems.
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.
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.
As a group, we drew many sketches of different platforms, which were based on site map and user stories.
We digitised sketches and put them into device frames to review the size of elements.
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.
We developed a style guides and applied them in our wireframes.
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
After the user testing, we iterated one more time according to the feedbacks.
You can see the prototype here
We created a video to help people visualise how they can our prodcuts to book and manage flights to Mars.
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.
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.
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.