24 Hours Interaction

24 Hours interaction was one day design hackathon where I picked two complex interaction problems and tried solving them for a web experience. The goal was to exercise and focus on the defining the problem, building research and then mocking up a few user journeys for the solutions. Most of the documentation below is intial sketchs and wireframes. The two problems I picked were : Image organizer and a booking platform for a circular journey ticket.

Select an interaction problem to view the research and designs.

Project Research : Image Organizer


Today, anyone with a digital camera will end up with thousands of images on their computer within a short span of time. If the photos are not organized properly, it is difficult to find the needed photograph. All digital photographs have date and time information. Design a photo viewing and organizing software that solely works on date on time information available in digital photographs. The main goal was to design an image viewer and management application that could either be a desktop client, or a RIA application hosted online. Another important specification of the brief required me to design the application such that it solely works on date and time information that every digital image carries.


For this project I used a bunch of UX techniques like: Content audits , Competitor analysis, Heuristics Analysis, Mental models, Affinity diagrams. I decide to design a desktop client for the same. The main task of this project involved defining the information model of the application. I started defining the task in the following manner: Primary: 1. General application layout and navigation. 2. Layout for image sorting based on date information. 3. Layout for image sorting based on time information. Secondary: 1. Basic operation modeling. 2. Detailing the primary and secondary features. 3. Defining additional features. 4. Refining the visual components.

Design & Visuals

Application Launch
Import Screen
Import Screen - In Action
Image Library - Event Based
Image Library - Sorted By Date
Image Library - Wireframe
Image Library - Sorted by Date (Sub section/folder)
Image Library - Inline Edit
Image Library - Sorted by Time
Image Library - Sorted by Time (Wireframe)
Image filters
Image Library - Calendar view
Image Library - Location view
Incomplete search option
Image viewer
Image viewer (Fullscreen)

Project Research : Circular Journey


The task at hand was to design an application to book ‘Circular journey’ tickets offered by the Indian Railways. I have ensured that while meeting the specifications and requirements of the design brief, I have also extended the brief to incorporate more details and a rich user experience. The main goal was to design an application that users could access in order to book circular journey tickets offered by the Indian Railway. Based on this core requirement, I decided to design a module of the IRCTC website that could offer an option to book these tickets.

The project involved designing interactions and data visualizations for several aspects of the system. I broke the entire project into several smaller tasks in the following order: Primary: Understand the existing offline booking process. Understand the working, benefits and details of a circular journey. Define a set of personas and scenarios that could serve as potential users. Ultimately map the offline booking process to an online process. Secondary: Building the workflow based on scenarios. Placing real content in the design to gauge it’s usability. Building better data visualization. Improving the overall user experience and interactions. For this project I used a bunch of UX techniques like: Content audits, Competitor analysis, Heuristics Analysis, Mental models, Affinity Diagrams, Use cases & Personas


The first step involved understanding what exactly are these circular journey tickets. Having absolutely no clue of how they work, I spent a while with a travel agent who willingly explained the whole procedure to me. Once I broke down the concept of a circular journey, I quickly analyzed parts of it, like Costing factor Validity factor Distance factor I was prepared with my business requirements as well as the user requirements. At this stage I also defined low-level personas. I realized there were generally 2 kinds of users that opted for this journey. 1. Families and groups travelling on a holiday / pilgrimage. 2. International tourist wanting to complete an entire tour of India commonly refereed to as the ‘Great Indian Circular Railway Challenge’. Content audits and heuristic analysis helped me understand and categorize the features, primary operations, secondary operations, functionality and usability related components of online booking systems. This gave me insights into simple aspects like not bothering a user for personal details unless he is content with his journey selection and costing. My objective was to first, define a new information model, build a rich data visualizations and enhance the interactions. Even after laying out the design on wireframes and sketches, I iteratively improvised on each page layout to help refine its content and functionality. Key players here were, affinity diagrams that helped me sort logic, data and functionality. Apart from that mental models helped me shape a sequence diagram and define a general workflow for the system.


General rules & assumptions:

  • Traveler must start and end at the same city.
  • User cannot define his own circular journey route.
  • User can select a maximum of 8 break journeys or destinations on his route.
  • The Southern railway zone offers fixed circular journeys too. (This contradicts the IRCTC offline booking rules, which states – Southern Railway doesn’t offer a fixed circular journey.)
  • While selecting his locations, the route listing automatically modifies to display the routes with a closest match to his entries.
  • When the user selects the number of break journeys it AFFECTS: a. Distance factor. b. Ticket Validity factor.
  • When the user selects the number of break journeys it DOESNOT affects: a. Cost Factor. (Cost is charged for the entire circular journey.)
  • Ticket validity is defined as sum of: a. No. of Journey days. b. No. of Break journey days. (For every destination the traveller stops, the ticket validity accounts for the fact that a user may spend 3 days at this location. Regardless of whether he opts to stay for those 3 days or less.)
  • Journey distance is defined as the sum of: a. Journey days (400km equals 1 day) b. Break journey days (200km equals 1 day)
  • Cost factor is affected by: a. Class of travel. b. No. of seats. c. Senior citizens can avail of a discount (Male 40% & Female 50% on every 1000km) d. Incase the passenger is upgraded to higher class (Pays the difference)
  • Should be able to modify and adjust his journey after the costing and schedule has been displayed.
  • Have a schedule along with the invoice mailed to him after the payment So far I have listed all my thoughts, assumptions and research.

Design & Visuals

On this page the user can browse through the various packages and predefined trips offered by the Indian Railway. Assuming the user is currently viewing the circular journey option, he can either choose to understand more about it or directly proceed to booking the tickets. Important aspect here is the page needs to be appealing. This page could directly affect the number of bookings and overall revenue generated via domestic as well as foreign travellers.
Now the user can either create an account for the first time or login using his details. Generally IRCTC requires you to log in even while booking tickets via other travel websites.
The user now selects a city, which is the start and end of his circular journey. The user also has 8 destination slots. He can either fill all 8 or less. This will directly modify the available routes to provide the user with a more refined listing. Based on his choice a route can be selected. This is the same scenario, which explain the user’s workflow for this page. Below this I have also attached a low fidelity wireframe, which I built upon to design the page.
Journey - Route selection (Tips)
Journey - Route selection (Wireframe)
There is no hard and fast rule that the user needs to visit all 8 destinations on the selected route. He can choose which destinations he would like to break his journey at. At the same time the right section of the page provides a real time summary of his route distance, ticket validity and a map route. This is the same scenario, which basically explains how the user can modify a defined predefined route to suit his needs. Also a high fidelity wireframe which basically is a mix of the mockup with an additional layer of details and real content.
Journey - Route over view (tip)
Journey - Route over view (Wireframe)
All the factors that affect the journey cost are on this page. The main factor is the number of travellers and the class. Apart from that the data visualization on the right allows the user to select a train and date for each leg of his journey. The first step is the user selects a departure date. Then he selects a train based on the seats status, class availability and arrival date. When a user selects a train he can also preview the arrival date for the next leg of the journey. In this way the user completes selecting all the trains for his journey. This scenario shows how a user selects the class first, followed by the travellers and then proceeds to the train option. When a user selects a train, he must check for the arrival date, the status of the seats and whether the selected class of travel is available.
Journey - Passenger + train details (tip)
This is the page where the user can preview every detail of his circular journey. The page consists of the traveller details, journey details and overall schedule. The page also consists of sections detailing the costing as well as tips a user is given to optimize his journey and make the best of it. The scenario details the traveller information and also the journey information. This helps a user understand whether he can extend his journey without exceeding his journey validity. Also the calendar layout helps him understand his complete journey with regards to the train details etc. Finally costing determines the journey cost. The tips section allows the user to optimize his journey and make it more comfortable by using all the valid days or by selecting a train that has confirmed seats. Also if you notice all the pages have submit and reset buttons on the top of the page which would work as a floating bar. This is to ensure the user doesn’t keep scrolling excessively while filing, adjusting and reviewing details.
Journey - Complete over view (tip)
This is the most crucial page in terms of its position in the workflow. Never bother a user for transaction details unless he has confirmed his approval of the journey. There is a possibility a user may not want to carry on with the booking if the journey doesn’t meet his needs. In such a case taking the transaction details earlier would appear as a waste of time. There could be several payment options but I have focused on the credit/debit card option. Generally when it comes to filling out the details of the card, the user has to search for them and then also fill them accurately.
Journey - Payment (tip)
Journey - Closure
©2018 - Jonathan Pimento