Note: ZEIT is a fictional company, created by DesignLab, however all of the research that went into creating this website is real.
Virgin's CEO, Richard Branson, has tasked me with creating a responsive website for his new time travel company, ZEIT. A total of 289 destinations all over the world have been approved and finalized. These destinations are selected because of their safety. Due to the need of control, destinations are only in the past. People will travel to controlled and extremely protected places. They are similar to what we know today as resorts, albeit with organized (and secured) trips to nearby cities and attractions, where interaction with locals will be limited. However, the travelers will be able to look at, and do things typical of the time, like workshop activities or attending shows.
Meet Jessica, an educated, 30-something, single professional who is interested in new types of travel. Where did Jessica come from? She is a direct result of the interviews and survey results collected during the research phase of the project. While conducting the interviews, I noticed some patterns that began to form. I took those patterns and organized them using sticky notes and analyzed them. It was from this that the archetype of Jessica emerged.
Based on our persona, this empathy map takes a deeper dive into understanding Jessica. Six quadrants provide insight into who she is. This data came from interviews and observations. They sum up how the user feels, thinks, hears, etc. It’s all about what matters to Jessica. Knowing her struggles and victories helped me to find ways for her to achieve her goal and remove or minimize any barriers to it. View the full empathy map.
This storyboard illustrates a specific scenario where our user might utilize ZEIT. Jessica wants to go on a unique, and adventurous vacation but she is at a loss of where to go. When she hears her coworkers talk about ZEIT, a new time travel tourism website, her curiosity is piqued. This storyboard was created using the artifacts and research that came before it. It comes from interviewees' stories and real life experiences, which resulted in this fictional account. This tool helps me better understand the circumstances from which Jessica would encounter and use ZEIT. View the full storyboard.
During this card sorting session, seven remote participants were asked to organize topics into categories that made sense to them using an online card sorting website called, OptimalSort. I used an open sort for this exercise because I wanted to get a feel for structure. From the results, I analyzed the data and found patterns/trends in both the quantitative and qualitative data, establishing the beginning of site's information architecture. View the full card sorting results.
Now that I have a basic understanding of the IA structure, I quickly ideated/brainstormed some design ideas. Here, I started with just the homepage in order to get a sense for where the major elements might fall on the page, keeping it very loose with the understanding it will change. The client liked the direction we were going in and I began to develop other pages in this way. View the full size sketches.
Next, I create a sitemap based on the results of our card sorting activity. Using categories that came out of the card sorting data, a sitemap shows the relationship between content on the site, starting with the homepage at the top, and then branching out into subsequent pages from there. View the full sitemap.
Task Flow
The task flow is the main flow our users will follow to complete the main task (in this case, finding and purchasing a trip), identifying key screens that will eventually fit into the larger flow. I used the storyboard as a guide through the main task flow. View the full task flow.
User Flow
I took the task to the next level and add in complexities and decisions to the flow. It also allowed me to explore how a user may come into the site (point of origin). Here, I also explored searching behaviors, what items they are likely to purchase, and the check out process. This represents the entire buying process from beginning to end, also accounting for the decision points along the way. View the full user flow.
These low fidelity wireframes take everything up to this point and organizes the information architecture into something more visual. I used the card sorting and the site map artifacts to help with this task to map out the main screens. I started with the desktop version. The numbers show annotations where interactions that are not obvious require some explanation. View the full size low fidelity wireframes.
I did not design this mobile first. While I understand why someone would want to do it that way (to understand which basic elements fit within the smallest screen size), it is not my preference. I designed the desktop first and here I am breaking it down into its smaller parts: tablet and smartphone viewports. Deciding what the user needs to see as the screen size shrinks is no easy task. I decided to keep the most crucial items visible while progressively disclosing the rest down to secondary menus. View the full size responsive wireframes.
I took the wireframes created in the previous step and turned those into a low fidelity prototype. The goal of this prototype was to get user feedback early on in the process. After collecting that feedback I made some changes to the wireframes and iterated on those. View the full size low fidelity prototype.
I gathered inspiration from around the Web for how the design for ZEIT might look and feel. I included potential colors, fonts/typography, textures, and anything else that might inspire me. This exercise helped the client to visualize what the site's elements and mood could look and feel like. This moodboard provided me with a jumping off point to create the site's branding. View the full size low moodboard
The logo is the flagship of branding. This process began with coming up with words that embodied what the company was about, followed by rough sketches, and finally into the version seen here. View the full size logo.
Using the mood board as a jumping off point, the style tile you see here is a direct result of that effort. The style tile shows the color palette, typography, logo usage, photo usage, and any components and how they will be used (search, menus, etc). Please note that this is only part of the style tile. View the full size style tile.
In this step, I did a more polished, high fidelity version of the low fidelity responsive design mockups done earlier. It’s the same concept, except I applied the aesthetics from the style tile. This version contains all of the fonts, buttons, components from the style tile. View the full size high fidelity responsive design.
From our responsive design and style tile comes the UI Kit. The UI kit is a standardized, comprehensive inventory of all the components and design patterns and defines how they should look inside of the site. It sets the standard for the developers to follow and for the design of subsequent pages. A UI kit also identifies navigation and button states. View full size UI kit.
An affinity map is created from the findings during the usability testing. The map helps sort, prioritize, and rank user feedback. For this, I wrote all of the feedback onto sticky notes and organized them into categories. From those results patterns emerged and from those patterns I was able to come up with what refinements should be made to the design. View the full size affinity map.
In a real world design project, I would make changes to the design and iterate through the prototyping and usability process all over again, collecting data and making more changes as necessary. Once the design is in a good place, I would collect all of the components, artifacts, and requirements and hand them off to developers. From there, it is a never ending process of iteration and communication with developers, stakeholders and users. As far as I'm concerned, a design is technically never "finished."
Whether it's a UX or LX project I have the breadth and depth of experience to bring it to life. Hire me for contract, freelance, or full time hire. Let's work together on YOUR next project!
