Khanh Tran




User Experience Designer.
Currently at QookIT.
Based in San Francisco Bay Area.




ZEIT

E-commerce Responsive Website

Company: Fictional Company (ZEIT)

Role: UX/UI Designer (Research, Design, Prototype, and Testing) under Designer Mentorship

Duration: 1 month


✨ Part of DesignLab’s briefs, the challenge was to design a responsive website to book time-traveling experiences. In order to do so I referred e-commerce and responsive design best practices under the guidance of a UX designer mentor





💼 The Brief 

Zeit is looking at you to create their new brand, and set up an ecommerce responsive website in which they can sell travel packages to different times.

A total of 289 destinations all over the world, up from prehistoric times through today, have been approved and finalized to receive people any moment. These destinations are selected because of their safety: separate from critical historical turning points, and relatively isolated from populated areas

Wait... why time traveling?




The brief was set out with an imaginary product in order to introduce more unknown variables. It was the hardest among the briefs.


⚡️ Problem

Through user interviews, I discovered that users tend to travel to see family and friends as well as travel along with them. Since they were more concerned about their connection rather than the destination I, therefore ask myself: 

How can we make time traveling more a social experience?



💫 Solution

I designed an e-commerce website (per brief) where users have the ability to include people into their itineraries and share their experience.





➡️ ➡️ ➡️

Process


Research - Define - Ideate - Prototyping - Refine









🔍  

Research


User Interview, Competitive Analysis, and Market Research
While doing Market Research, I found out that escorted adventures were the most simliar to ZEIT’s time-traveling packages, and provided more or less detailed accomodations with set time frames (1 week, 2 weeks or even montly packages) which was different from ZEIT’s ability to choose a time.

I also handpicked 5 users avid travelers (from friends and acquaintances) to uncover their motivations and pain points as experienced travelers.


Insights


  1. The user’s primary visit focused on visiting family and friends and not necessarily by the appeal of the location. User’s avoided tours and requires flexibility to travel beyond their itinerary.
  2. They value independence and freedom. Some of their worst experiences related to accommodations, flights, and stay rather than its destination.





📌 Defining the Problem


Affinity Mapping, User Journey, User Persona, Empathy Mapping
To get a bigger context I constructed a user persona Charles Kim, along with a story board to get a bigger context.





Buisness Requirements

I also had to take into consideration of ZEIT’s business requirements, I assume for an e-commerce site, it’s main goal is to gain foremost crediblity (time-traveling is uh.. quite futuristic concept) and gain revenue through acquiring more users.



With that in mind, I defined goals and success metrics:


Design Goals                         

  1. Create a seamless checkout flow
  2. Provide relevant information for users to assist them on their travels and booking experience 
  3. Improve my design skills

Success Metrics                     

  1. Completion rate of checkout flow (from selecting a product to confirmation of order)
  2. Observe user's reaction and overall experience 


💭 Ideate


Sketches, User Flow, Site Map
I tackled each design list by mapping out the larger user flow and important components needed to display.

1. Create a seamless checkout flow


Before jumping into the design, I made sure that I created a user journey to understand the user flow.

Plus, I wanted users to keep the same mental models and followed the same e-commerce kit.



2. Provide relevant information for users to assist them on their travels and booking experience


Using personal travel experience, user interviews, and painpoints of user journey, I mapped out information that often went missing for users to book their trips. From the interviews, some were fairly intuitive - 




🖌 Design


Low-Fidelity Wireframes, Wireframes Kit
Keeping with these features, in mind, I quickly sketched up some lofi mockups. After series of review from other DesignLab members, I created a responsive homepage along with product catalogue, and product details. 







🤖 Prototype


UI Style Kit, User testing, Identifying core problems, Reiteration
Another challenge was to keep in mind with UI Style Guide Kit  based on National Geographic’s site to create a mood of discovery and excitment. 

First reiteration



I went to HiFi to test out with 3 users script to determine whether or not users managed to finish their task without much hinderince:


Design Goals                         

  1. Create a seamless checkout flow
  2. Provide relevant information for users to assist them on their travels and booking experience
  3. Improve my design skills


Success Metrics                     

  1. Completion rate of checkout flow (from selecting a product to confirmation of order)
  2. Observe user's reaction and overall experience

Second reiteration

I updated the imakes to make the site much brighter and easier to read. Furthermore, I have increased the mapping of these products that allow users to easily discovered their tools.








🎬 Conclusion


Overall, it was a good lesson to learn the fundamentals of User Experience Design. I noticed that there was a lot of features that I could have improved. The hardest part was remaining focused and not being distracted by other problems. 

Most importantly, I would have focused more on the functionalities rather than occupying myself with the looks and pixels perfection (although those are equally important)