Contents
I organize my personal design system and case studies using the five phases of the Stanford Design Thinking Process.
Responsive website design and branding from scratch for a theoretical travel company
Problem
High Level Design Goals & Objectives
Even though Zeit presents a unique form of travel, it would still function within the online travel booking industry and have a similar customer base as current large booking sites. I recorded major takeaways from my research to give me context about market trends and competitors to inform my design process, viewable in my research debrief.
In order to better understand potential competitors and gain valuable insight into what makes online travel booking platforms successful, I performed a competitive analysis of 3 direct competitors and 2 other major players in the industry.
I conducted 2 rounds of interviews with 3 users in each round, with round 1 focusing on their experiences booking travel on other platforms and round 2 learning from & building upon Round 1, and asking more specific questions about their preferences in planning & booking travel excursions.
I then transcribed all the interviews so I could identify patterns and key insights in the responses.
How might we design an intuitive and navigable user experience, an engaging user interface, and an attractive brand identity that not only capture the essence of time travel and inspire brand loyalty but also motivate users to book experiences with Zeit?
When considering how to organize the information architecture of the project, I wanted more insight into how users might categorize the experiences Zeit offered. Patterns emerged as participants created some similar categories as each other, such as sorting by general themes like art and ancient empires. This validated my assumptions about the intuitiveness of organizing the trips in this manner.
Creating this crucial document of information architecture allowed me to outline and validate the pages I would need to design and how they related to each other.
A task flow helped me visualized a linear path a user might take to book a trip. I then expanded on the task flow to build a user flow, mapping out different choices a user could make to how users will navigate the site, further validating my sitemap and the pages and elements needed. View the user flow here.
Beginning with low fidelity sketches, I tried several ideas for structuring the website. Using pen and paper allowed me to explore different ideas quickly and efficiently.
I digitized my home page design into mid-fi wireframes, keeping the pages modular for easy conversion to tablet and mobile sizes.
Mocking up a prototype in Sketch allowed me to better evaluate the usability of my mid-fi designs and validate the logic of the user flows.
Different approaches I tried for the nav bar and an Experiences drop-down menu
Thanks to the modularity of my designs, it was simple to translate them to mobile and tablet versions. I annotated major elements to explain functions that weren't obvious from just the wireframes themselves.
Due to the paradoxical nature of a company using futuristic technology but selling journeys into the distant past, my guiding idea for Zeit's branding was to convey a subtle flair of science fiction yet retain a sense of timelessness.
A modern, minimalist take on a timekeeping device used for centuries fit my vision perfectly. A sleek hourglass would represent the passage of time and double as a Z for Zeit. The logo could also be animated, rotating clockwise 180 degrees to symbolize the turning back of time.
An ultra bold, wide Acme Gothic font with some slight negative tracking had the perfect balance of modernity and classicality.
Since Zeit is a travel company, I wanted the main focus of the site to be the photos. Keeping this in mind, I chose a calm, muted dark blue-grey for the primary color to use for large components like the nav bar and footer. I also used this color for the any text on the white background to give high contrast and good readability instead of using a harsh black.
In a similar vein, I chose a bright mango orange for the highlight color so that call-to-action buttons or other important components would stand out on busy pages full of colorful pictures. I faded this into a lighter tangerine to make a subtle but interesting gradient.
Finally, we come to the hi-fi designs! After some more iterating on my wireframes, I landed on using a uniform card system for experiences, categories, and testimonials. Using a system of distinct cards had the benefits of both keeping information neatly grouped together and making the sections more cohesive with each other.
This was the last page to come together in its final form. I originally used the experience category cards from the Home page, but this design was very plain on desktop and made the Experiences page redundant. It didn’t add much value and didn’t give the user any more info on what the specific experiences themselves were or what they might be like. However, I still thought the Experiences page was an important part of the user flow, so I redesigned the page.
The new design showed 5 experiences within each category using a card system that keeps with my intention of putting focus on the photographs. I stuck with the original design for mobile since the new card system would be too busy in 2 columns and too vertically lengthy in 1 column on a small screen size.
I chose to design the page using the category browsing method since it was the most consistent with how the research participants sorted the experiences during card sorting. If I had more time and/or resources to use on this project, I would have liked to build out the location and time period variants of the Experiences page organization.
The simplest and most straightforward to design, this page uses Philosophy & Religion as an example category, with the specific experiences laid out in cards.
Plato's Greece, 368 BCE used for an example. The tabs in the tab bar (Overview, Itinerary, etc) link to their respective sections of the site, and the bar is sticky, so it will stay in the window as the user scrolls past it.
On desktop, the "Purchase tickets" box is also sticky, staying with the user at all times since getting potential customers to book tickets is the main goal of the site.
Using the Hi-Fi designs, I built a basic prototype in Invision.
I tested the prototype with 5 potential users, recording them on video and then writing out their actions and any verbal or nonverbal communications they made during the trials. Using these results, I generated some main observations about successes and pain points.
For example, none of the 5 participants scrolled down on the home page past the first hero image. When asked about this afterwards, participants said that they didn’t realize there was more to the page and that it looked like a complete page already.
In order to improve the designs, I ranked the pain points by importance and time required to revise. I needed to make optimal use of the little time I had left to complete the project.
A major change I made was to address the hero image problem mentioned above. Making the banner photo on every page shorter was an easy solution to implement and would make it more obvious to the user that there is more content below it.
According to the Nielson Norman Group, visitors often leave web pages within 10 to 20 seconds. Decreasing the height of the hero image will push the Featured section up above the fold, showing them the most popular experiences in hopes of grabbing users' attention within that crucial time frame.
Another issue I noticed during testing was that since the Experiences page exactly mirrored a section of the home page, it was a little redundant. I decided the Experiences page would add more value and possibly save users a click if specific experiences were displayed for each category. Similar to the Features above the fold idea, showing users trips that may interest them could increase retention and click-through rate.
If I had more time, I'd make a drop down menu, build out other pages and features like the checkout process,
The project's goals have been met. Zeit now has:
At this point, I would usually give the pages and other necessary deliverables to developers to build, most likely using a software like Zeplin to facilitate the handoff efficiently.
If I had more time and resources to use on this project, I would:
