Product Design Case Study
Background
Zeit is the first company to offer time travel tourism. People may travel back in time to enjoy an immersive, unique vacation.
This is a design assignment for school, based on a fictitious company.
My Role
User research, information architecture, user experience design, interaction design, wireframes, responsive design, logo design, brand development, visual design, icon design, visual storytelling, responsive user interface design, usability testing and test interpretation.
Project Scope
Create a brand identity.
Design a logo.
Make a responsive website that allows the public to either filter their search or browse for their vacation on a desktop, tablet and mobile platform.
Tools
Sketch, InVision, Marvel, Zeplin, Adobe Photoshop, Illustrator, Optimal Sort, Pinterest, Google Slides, Slack and Paper + Pen.
research > strategy > Design > test
Research
Methodologies
Secondary Research
Research traditional travel, travel packages and time travel. Research the psychology of travel and tourism.
Indirect Competitor Analysis
Analyze competitors websites information hierarchy, site flow, navigation and user interface design. Note design trends. Identify innovative and stunning solutions.
Primary Research
Conduct personal interviews with potential clientele.
Strategy
I created various deliverables to define my products demographic and develop my product strategy. Below are just a few of the visual artifacts from the strategy development phase.
Persona
In design thinking, empathy is key. I created a user persona; a realistic representation of my products key audience.
Sitemap
My sitemap shows the organization of the website; its pages, categories and content.
User Flow
My user flow is a map which illustrates a few of the paths the user takes as they navigate through the website in order to complete various tasks. It is a technical diagram which focuses on decisions, actions, navigation and flow.
Design
Wireframes
I created wireframes, the architectural blueprint of my website's design, to show the information hierarchy and lay out the elements of each page. I made a prototype with the wireframes which I tested repeatedly to confirm that my developing design was well organized and that task completion was successful.
Branding Elements
To create ZEIT's brand, I designed the logo, wordmark, color palette, vector icons, selected the font and collected photos.
UI Kit
An assortment of graphic files including user interface and user interaction design components as well as patterns.
User Interface
I implemented my branding, user interface and user interaction elements throughout my wireframes, turning them into high fidelity designs.
Responsive Design
The website was designed to render on three devices: desktop, tablet and mobile.
Test
Affinity Map
I tested the prototype of my website with potential users. An affinity map helped me see the patterns and visualize the feedback from the user test sessions. I returned to my designs and made improvements, catering to my user needs.
Next Steps
The user interface design elements could be incorporated throughout the remaining wireframes. Once completed, more user tests should be done to measure the success of task completion and UX of the website.