Case Study: Design Methods – XXL | UI UX Designer

Case Study: Design Methods

posted in: Post, UX | 0

In this post, I’m going to elaborate some common UX design methods with a brief case study for an itinerary planner. I’ll touch on some subjects such as comparative analysis, happy path and edge cases.

Understand

To start off, let’s make sure to clarify the challenge statement, which was “to come up with a slick user experience for a free Itinerary Planner without worrying too much about resources and technical constraints.” Here goes the user story that provided by clients,

As a customer, I have my flight and hotel booked through the site. I would like to create additional itinerary events on top of the fixed schedule. (event examples: visit a museum, dinner at SoHo.) So I can have a comprehensive travel plan to share with my travel companions.

And here are the acceptance criteria for this design task,

  • Primary view is a calendar: Yes
  • Can easily add, copy and move itinerary event to another date/ time: Yes
  • Calendar time zone can switch between origin and destination: Yes
  • User can share the itinerary with friends: Yes
  • User can collaborate and edit with friends: No (future backlog)
  • Is touch friendly: Yes
  • Is small mobile screen friendly: Good to Have

Research

To make sure that the design decisions are supported by user research and feedback, let’s start with competitive analysis. The initial research is focusing on understanding the competitive landscape of the popular travel planning calendar, including their interaction flows and feature spectrum.

The direct competitors are products that offer itinerary planning services with calendar view. The biggest competitor comes to Inspirock‎, which has over 10,000 users from 150 countries building plans covering 3000 destinations (reported by forbes.com in AUG 5, 2015). Another competitor TripHobo is an Indian travel planner which has more than 70,000 itineraries (reported by Tech in Asia in Mar 31, 2015).
After narrowing down the competitors, competitive analysis is supposed to be conducted from a usability evaluation perspective. Most of the time it is done in conjunction with an “expert” review only to keep an eye on trends in the industry, but also to understand how the major competitor is handling usability and where your product stands in reference to its competition.

 

Feature / Area Inspirock‎ Rating TripHobo Rating Testers Opinion
Choose Location Auto complete is provided. Press down arrow key to select the last option of the auto complete list. Press tab key when typing to become out of focus. 2 Auto complete is provided. Press down arrow key to select the first option of the auto complete list. While typing the location, press tab key to focus on the “Plan My Trip” button. 4 Keyboard event is critical in data input. Press down arrow key to select the first option and tab key to focus on the call-to-action button.
Choose Datetime Auto close date picker panel after select start date and end date. 3 No need to select datetime before itinerary generation. Defaul select next Sunday for user in a 3 day trip. User can change start date and duration. 2 Choosing the pair of “start date and end date” is more intuitive than choose “start date” and “duration” separately.
Itinerary Generation Itinerary is auto generated in route view. After generation a first-time use guide is provided to introduce helpful tips. 4 Auto recommend accommodation after itinerary generation. Itinerary is auto generated in day-by-day calendar view. 3 First time use guide is efficient to get user familiar with some key features.
Calendar View Simple and clean layout. Event color can only tell whether it is an existing activity or custom event. 3 Calendar view is very informative. Easy to tell from accommodation, restaurants, attraction and transportation. 4 Event type icon can help user categorize different events.
Add Event Both clicking available time slot and “Add Activity” button can add event. Event types only include attractions and custom activities. 4 Click “Add Activity” button to add.Event types only include places, restaurants, tours and custom places. 3 Clicking available time slot to add event is more intuitive.
Edit Event Drag and drop to change activities order and duration (can cross date, PC only). 5 Drag and drop to change activities order (can cross date). Activity duration can only be changed by using selection menu. 3 Dragging to change activity duration is more intuitive.
Copy Event No. 0 Accommodation can be duplicated(generate a same accommodation in the same day). 3 Duplication is good for repetitive activities.
Validation Conflict activites at the same time are highlighted in red. 4 No conflict validation. 0 Conflict validation can help user avoid mistakes.
Switch Time Zone No. 0 No. 0
Share Itinerary Share via link, email, printable .pdf file and .ics calendar file. 4 Share the trip with friends via Facebook, Twitter, Google+ and email. 3 The extensibility of .pdf and.ics is higher.
Collaborate Editing Co-traveller can also be invited to the itinerary. 4 Group planning and chat is also available. 4 Wait for further investigation.
Mobile View Mobile version is not touch friendly, activities creation modifications are not allowed on mobile. 3 No mobile version. 0 Information in mobile view can be trimmed down.
OVERALL RATING 36 29

 

Here are some good UX practice that we learned from this competitive analysis.

  • Keyboard event is critical in location input. Auto focus to the text field, type key words, press down arrow key to select from the first option and tab key to focus on the call-to-action button.
  • Clicking available time slot to add event is more intuitive.
  • Conflict validation can help user avoid mistakes.
  • Drag and drop to change activities order and duration.
  • Duplication is good for repetitive activities.
  • Information in mobile view can be trimmed down.

 

Design

Low Fidelity Interactive Wireframes:

Before jumping into the final design, we create low fidelity wireframes to get more focus on the process flow first. This simple prototype was roughly created on Axure within 2 hours. The purpose of rapid prototyping is to quickly get the ideas tested and iterated.Normally we will pull in stakeholders to evaluate those ideas, bring in engineering partners to get a gut check on feasibility. If that goes well, we’ll iterate more before getting another gut check from a higher-level PM.

Happy Path Testing

During the iteration, we often start with happy path, a scenario where everything goes as expected (i.e. no errors). It is used to do use case analysis at the very early stage and it is also applied to some automated testing during implementation phase.

Here is the happy path of this prototype:

  1. Choose Origin & Destination(Country, region, city), Start & End Date
  2. Itinerary is auto generated in a day-by-day calendar view
  3. Adjust settings (Event name, origin and destination country/city). start and end date)
  4. Add activity (search existing activities, add custom event with note)
  5. Click activity to edit (duplicate, change, remove, add note, see nearby, see details)
  6. Drag and drop to change activities start and end datetime, order and duration
  7. Share the itinerary with friends

Other techniques like sad path, A/B test are also used before high fidelity prototype design depending on different product features. Let’s explore them in the future with other case study.

High Fidelity UI Mockups:

After iteration, the final high fidelity prototype is as follow with large destination photo background to provide a immersive atmosphere for user with brightly coloured action button. Activities types are also highlighted with colourful icons in order to make different activities stand out.

Web View:


Mobile View: Information in mobile view is trimmed down in order to provide a clear layout with key information. User can access activities in week view focusing on each day’s itinerary planning. Pink to orange theme gradient color is also used in mobile to provide a consistent user experience with web view.

Edge Cases

When creating a user interface, it’s easy to assume that everything will turn out as expected. Checking edge cases can let us take a step back every so often to question your assumptions. Here are some typical edge cases we cater during user interface creation. Most of them are from the perspective of user inputs validation. Other perspectives such as responsive layouts, accessibility to colour-blind users, keyboard-only users, users on slow internet connections should also be accommodated.

  1. If event block size not enough for event content, overflow y scroll
  2. If multiple events are allowed to be assigned into the same time, events should share the date width equally. Max 3 events in the same time slot is suggested.
  3. Calendar body width should have a min width e.g. 1000px to ensure to have enough space for more than one event in the same time period of one day
  4. Text overflow & action panel show up behavior: show up to the bottom of the event block. If there is not enough space to show on the bottom, show on top of the event block.