Pakdat

UI Design

Screen Shot 2021-02-09 at 2.16.59 PM.png

OBJECTIVE

Packdat was not just limited to the flight or train bookings or hotel booking, it aims at creating a customized experience for the users by offering destination suggestions within budget and safety concerns in mind, travel wallet which lets you save your boarding passes, debit, credit card etc.

MY ROLE

  • UX Designer

  • UX Researcher

DESIGN PROCESS

In order to design the application, we used a variety of UX methods. These methods allowed us to gain empathy for targeted user groups and collaborate creatively with one another. Each method informed the design of the application were used inform our design process in a convergent divergent process. We used the following methods in design process:

  • Inspiration Board

  • Competitive Analysis

  • User Flow Maps

  • Design Charrette / Lo-Fi Prototype

  • Personas & Use Case Scenarios

  • Mid-Fi Prototype & Contextual Inquiry

  • Hi-Fi Prototype

Inspiration Board

Our team initialized the design project by gathering creative inspiration. We gathered our inspirations and placed them on a Inspiration Board. This was shared amongst the team and inspired everyone think within the same design family.

Screen Shot 2021-02-09 at 12.08.43 PM.png
Screen+Shot+2021-02-09+at+2.59.48+PM.jpg
Screen Shot 2021-02-09 at 2.59.42 PM.png
Screen Shot 2021-02-09 at 12.08.49 PM.png
 

Competitive Analysis

After 1st creating some inspiration for the project, our team performed a competitive analysis. This allowed us to understand:

  • How other companies approached providing values to users

  • Strategize about an Minimum Viable Product

  • Strategize about some new feature

  • What type of device should we design for? ( Designed for a Web Application with mobile Capabilities )

Screen Shot 2021-02-09 at 11.44.01 AM.png
 

User Flow Map

Following the Competitive Analysis we created a user flow map for mobile and web version of the application. The map allowed our team to split the flow into team member design domains to make our work more efficient.

Mobile Version  User Flow Map

Mobile Version User Flow Map

Desktop Version User Flow Map

Desktop Version User Flow Map

 

Design Charrette

Our team transition next into a Crazy 8s exercise. Each team member performed a Crazy 8 for their domain of the user flow and selected their strongest design. These designs were then used to create a lo-fi mockup of our application.

Persona and Use Case Scenarios

Next, our team developed personas and Use Case Scenarios. These artifacts allowed us to gain more empathy for our targeted user groups and fine turn our Lo-fi Mockup to Mid-Fi Prototype. This prototype was used in a Contextual Inquiry with users to gather insight and fine-tune our application designs.

Screen Shot 2021-02-09 at 11.25.23 AM.png
Screen Shot 2021-02-09 at 12.35.21 PM.png
Screen Shot 2021-02-09 at 11.25.29 AM.png
Screen Shot 2021-02-09 at 12.35.28 PM.png
 

Mid-Fi Prototype and Contextual Inquiry

We develop Mi-Fi prototypes after establishing our Personas and Use-Cases. These prototypes were used in a contextual inquiry to establish the usability of

Objective: In order to test the effectiveness of our design’s user pathway

Three Guiding Research Questions: 

  • Are users able to easily find and navigate through the application to complete necessary tasks?

  • Is the user’s path to completion clear for users? 

  • Is there a clear purpose for each step/page of the user’s path?

Participants: 8

Recruitment: Snowball Method with classmates, family, and friends.

What we Discovered

Testing revealed three  areas of improvement:

  1. Information Overload on screens designs - The mid-fi prototype of our design was a little bit too clutter. This made it more challenging for user to find the information that they were seeking and to move on to the next step of booking process.

  2. Removal of Redundant or Unnecessary Steps - Removal of unnecessary or redundant steps. In some instances, felt that there was some overlap. 

  3. Create Clearer User Objectives - Make key interactions and each steps goal clearer to users through design ( noticeable and attention grabbing text, usage of colors, key buttons are identifiable

Mobile Application Design

Mobile Application Design

Web Application Design

Web Application Design

 

Hi-Fidelity Prototype

Our projected end with a Hi-Fidelity Prototype. We utilized the feedback from our Contextual Inquiry to inform the design of our hi-fidelity design.

Screen Shot 2021-02-09 at 2.16.59 PM.png
Screen Shot 2021-02-09 at 2.17.08 PM.png