ZEIT is a fictional enterprise that managed to make time travel tourism available to all by providing 289 safe travel destinations all over the world. ZEIT hired me as their UX designer to help them establish in the travel industry. They want me to establish their brand identity and design a responsive website for their business.
Responsive Website, Branding
Figma, Adobe Illustrator, InVision, Zeplin
UX Designer (Research, Visual Design, Interaction Design, User Testing)
Self Directed, with feedback from the mentor and peers
4 Weeks (160 Hours)
In organizing the content of ZEIT's website, I conducted a n open, individual, remote card sorting to understand how users are classifying items. The summary from card sorting will shed lights on the Information Architecture and sitemap of ZEIT.
Some key findings include:
Based on these findings, I generated insights that are applicable to the website:
To further establish the brand identity, I generated logo concepts. I first started brainstorming adjectives around the brand attributes I established and sketched as many logo options as I could. I then digitized a few shortlisted options, and finalized my 6 top choices by examining their legibility at different scales.
I further developed the visual style of ZEIT through the style tile. It serves as a synthesizing document of the brand ideas and inspirations gathered, incorporating logo design, color palette, typography, and imagery that guides UI design later.
I created responsive UIs by applying established styles. It further lets me to examine the overall aesthetic feelings and visual balance of the website.
In the Prototype phase, I build scaled-down versions of the product for testing. It helps me uncover false assumptions, identify UX frictions, eliminate errors before investing too much in developing the product.
I used invisionApp to create the prototpye using the pages that are necessary for users to finish each task.
I then conducted both in-person and remote usability testing with 5 participants, and created transcripts for each participant based on my observation of their interaction with the prototype. I jot down their mistakes, slips, and confusions they expressed in the process. This transcript is a perfect raw material for summarizing the patterns of user’s interaction with the prototype.
As the time and resources we have is limited, I made revisions based on the priority level I set up for each recommendation in the affinity map.
The first-tier edits I made is on the filters. Users found the filters on the sidebar is inconvenient to use as they have to scroll up and down to view filters. I changed the filters to an accordion, and added a section at the top where users can see what filters they have applied.
The second tier edits I made is on the homepage. While customers were aware that the service is about travel booking, they didn’t realize it is about time travelbooking. They also found the wording in the navigation bar a bit confusing. Therefore, I edited the hero quote to include time travel directly, and added a line of description of the service. I also reworded the department’s name in the navigation bar.