Turbine
My Role
UI designer - designing all UI elements from conception to delivery
Duration
March 2023 - May 2023
Responsibilities
Paper and Digital Wireframes
Low Fidelity and High Fidelity Prototypes
Iterating on designs
Tools
Pen
Paper
Figma
Photoshop
Illustrator
The Product
Turbine is a social and entertainment application designed to keep people entertained while they are flying.
The Problem
Many airlines offer wifi and some entertainment however these is no way to connect with other people on other flights or engage in multiplayer games during a flight.
The Goal
To create an application that allows users to chat and play games with other people in the air at the same time.
Project Overview
Starting the Design
User Flow Chart
To begin this project I needed to create a user flow chat for the application. Not only would this help me to define the user journey but it would also help me when designing the application
Site Map
The second step of this project was to design a site map. This helped me define the organization of the application.
Paper Wireframes
After I had the site map and the user flow charts completed I could move on to creating the paper wireframes for this app. I started with a general login screen and designed pages for home screen, search and for the chatroom page,
Digital Wireframes
Taking the paper wireframes I created digital wireframes and iterated on the design while I was working in Figma. I updated the homepage to include more information and updated the button layout on the login page.
Digital Wireframe (cont)
For this project there will be no UX research. However, I created a low-fidelity prototype that connected the user flow. This let me build off of the user flow and site map that I created earlier.
Refining the Design
Mockup 1:
Wireframe to mockup
Mockup 2:
Wireframe to mockup
Impact:
When shown the final mock up my friends and family who I asked to do usability studies were super excited to see how far I had come in the course as well as saying “if this was a real website/application I would love to use it”.
Going Forward
What I learned:
This project helped me to learna number of differnt technquies and tools for buidling wireframes and building mockups. I found that creating a style sheet helped to keep my application cohesive in style. Using Figma’s team feature was also another great way to learn how to collaborate with other designers.
Next Steps
Since this project was part of a UI design class, my next steps would to be conduct UX research for this application. I would hope to learn what users think of the application and most importantly if they would find an application like this one useful. If I completed UX research I would hope that this application would be created by a company or parts of its ideas be incorporated into other apps.