Intro
The Museum of Jurassic Technology is located in Culver City, with a strong focus on the art and tools of the lower jurassic era.
[vc_empty_space height=”20px”][qode_in_device_slider device=”desktop” titles_on_hover=”no” navigation=”no” auto_start=”yes” timeout=”4000″][qode_in_device_slider_item target=”_self” image=”15585″][qode_in_device_slider_item target=”_self” image=”15689″][qode_in_device_slider_item target=”_self” image=”15688″][/qode_in_device_slider][vc_empty_space height=”20px”]
[vc_empty_space height=”20px”][qode_in_device_slider device=”phone-portrait” titles_on_hover=”no” navigation=”no” auto_start=”yes” timeout=”4000″][qode_in_device_slider_item target=”_self” image=”15582″][qode_in_device_slider_item target=”_self” image=”15687″][qode_in_device_slider_item target=”_self” image=”15686″][/qode_in_device_slider][vc_empty_space height=”20px”]
[vc_empty_space height=”20px”]
[vc_empty_space height=”20px”]
[vc_empty_space height=”20px”]
[vc_empty_space height=”20px”]
Challenges
The website currently has an array of usability and design issues from the navigation to the checkout process. It currently takes users too many clicks to find the information they’re looking for and purchase items on the website.
Goals
Make it easier for customers to navigate the website, purchase tickets online and buy shop items on any device with ease.
[vc_empty_space height=”20px”]
[vc_empty_space height=”20px”]
[vc_empty_space height=”20px”]
[vc_empty_space height=”20px”]
[vc_empty_space height=”20px”]
Role
UX/UI Designer
Platform
Web / E-Commerce
Deliverables
User Research, Competitor Analysis, User Flow, User Testing, Sketches, Wireframes, Prototype
Tools
Whiteboard, Pen and Paper, Sketch, InVision
[vc_empty_space height=”50px”][button size=”large” icon=”fa-arrow-right” target=”_blank” hover_type=”default” text=”View Prototype” link=”https://invis.io/Y3DNJPXWX” icon_color=”#cdcdcd” color=”#ffffff” hover_color=”#2e2e33″ background_color=”#2e2e33″ hover_background_color=”#ffffff” border_color=”#2e2e33″ hover_border_color=”#2e2e33″][vc_empty_space height=”50px”]
[vc_empty_space height=”75px”]
[vc_empty_space height=”150px”][custom_font font_size=”40″ line_height=”44″ font_style=”normal” text_align=”center” font_weight=”600″ text_decoration=”none” text_shadow=”no” color=”#ffffff”]DISCOVERY[/custom_font][vc_empty_space height=”150px”]
[vc_empty_space height=”75px”]
[vc_empty_space height=”20px”][vc_single_image image=”15794″ img_size=”medium” qode_css_animation=””][vc_empty_space height=”20px”]
[vc_empty_space height=”20px”][vc_single_image image=”15793″ img_size=”medium” qode_css_animation=””][vc_empty_space height=”20px”]
[vc_empty_space height=”20px”][vc_single_image image=”15792″ img_size=”medium” qode_css_animation=””][vc_empty_space height=”20px”]
[vc_empty_space height=”20px”][vc_single_image image=”15791″ img_size=”medium” qode_css_animation=””][vc_empty_space height=”20px”]
[vc_empty_space height=”20px”]
[vc_empty_space height=”40px”]
Competitor Analysis
I used this method to compare how other museums designed their e-commerce websites and what functionality they use. This process helped me understand the industry standard and what features need to be included in the redesign.
[vc_empty_space height=”20px”][vc_single_image image=”15663″ img_size=”large” style=”vc_box_rounded” onclick=”link_image” qode_css_animation=””][vc_empty_space height=”20px”]
[vc_empty_space height=”20px”][vc_single_image image=”15664″ img_size=”large” style=”vc_box_rounded” onclick=”link_image” qode_css_animation=””][vc_empty_space height=”20px”]
[vc_empty_space height=”50px”][vc_separator type=”normal” color=”#cdcdcd” thickness=”2″][vc_empty_space height=”50px”]
[vc_empty_space height=”20px”]
[vc_empty_space height=”20px”]
User Interviews & Persona
By interviewing users, I was quickly able to learn more about what they are trying to accomplish and who they are. A persona representing real users helped me to focus on the user goals and needs. I was able to better understand the world of my user to come up with a definitive problems and solutions they face.
[vc_empty_space height=”20px”]
[vc_empty_space height=”20px”][vc_separator type=”small” position=”left” color=”#2e2e33″ thickness=”2″][vc_empty_space height=”20px”]
[vc_empty_space height=”20px”]
[vc_empty_space height=”20px”]
Rachel Smith
27 Years old, West Hollywood, CA
Graphic Designer
“I love to visit small funky museums and underground art galleries”
Frustrations
– When it’s difficult to find the info she’s looking for on a website
– Too many steps to buy an item online
– Non mobile friendly websites
Goals
– Purchase tickets and gift shop items from her phone
– Easily find best selling or trending items
– To find the information she’s looking for on a website quickly and easily
[vc_empty_space height=”20px”][vc_single_image image=”15765″ img_size=”400×400″ style=”vc_box_rounded” qode_css_animation=””][vc_empty_space height=”20px”]
[vc_empty_space height=”50px”][vc_separator type=”normal” color=”#cdcdcd” thickness=”2″][vc_empty_space height=”50px”]
[vc_empty_space height=”20px”][vc_single_image image=”15783″ img_size=”medium” qode_css_animation=””][vc_empty_space height=”20px”]
[vc_empty_space height=”20px”][vc_single_image image=”15782″ img_size=”medium” qode_css_animation=””][vc_empty_space height=”20px”]
[vc_empty_space height=”20px”][vc_single_image image=”15781″ img_size=”medium” qode_css_animation=””][vc_empty_space height=”20px”]
[vc_empty_space height=”20px”][vc_single_image image=”15780″ img_size=”medium” qode_css_animation=””][vc_empty_space height=”20px”]
[vc_empty_space height=”20px”]
[vc_empty_space height=”20px”]
Task Analysis – Before Redesign
By giving users a task and observing their behavior navigating the website, I was able to quickly learn more about their goals and pain points. It became clear that users not only have trouble navigating through the website to find the information they are looking for, but a whole list of usability issues throughout.
[vc_empty_space]
[vc_empty_space]
User Pain Points
– Complicated navigation
– Unclear ticket purchase process
– No global header or navigation
– No responsive design
[vc_empty_space]
[vc_empty_space]
User Goals
– Fluid navigation
– Clear ticket checkout process
– Streamline information architecture
– Create a responsive design friendly for all devices
[vc_empty_space height=”20px”][vc_single_image image=”15666″ img_size=”medium” onclick=”link_image” qode_css_animation=””][vc_empty_space height=”20px”]
[vc_empty_space height=”20px”][vc_single_image image=”15665″ img_size=”medium” onclick=”link_image” qode_css_animation=””][vc_empty_space height=”20px”]
[vc_empty_space height=”50px”][vc_separator type=”normal” color=”#cdcdcd” thickness=”2″][vc_empty_space height=”50px”]
[vc_empty_space height=”50px”]
[vc_empty_space height=”10px”][vc_separator type=”small” position=”left” color=”#2e2e33″ thickness=”2″][vc_empty_space height=”10px”]
[vc_empty_space]
Information Architecture
To ensure that the structure of the site matches the target audience’s usability, I asked users to rank the site’s categories into order of importance. This helped to create the site map and the information architecture for the global header navigation.
[vc_single_image image=”15643″ img_size=”large” alignment=”center” style=”vc_box_rounded” onclick=”link_image” qode_css_animation=””]
[vc_empty_space height=”50px”][vc_separator type=”normal” color=”#cdcdcd” thickness=”2″][vc_empty_space height=”50px”]
User Flow & Process
By creating a user flow of key tasks throughout the site, I was able to see the navigational habits of users, their goals and pain points. Ultimately, the users are looking for an effortless way to purchase tickets and shop for items through the online store.
[vc_single_image image=”15640″ img_size=”large” alignment=”center” style=”vc_box_rounded” qode_css_animation=””][vc_empty_space]
[vc_empty_space height=”150px”]
[vc_empty_space height=”150px”][custom_font font_size=”40″ line_height=”44″ font_style=”normal” text_align=”center” font_weight=”600″ text_decoration=”none” text_shadow=”no” color=”#ffffff”]DESIGN[/custom_font][vc_empty_space height=”150px”]
[vc_empty_space height=”50px”]
[vc_empty_space height=”50px”]
[vc_empty_space height=”10px”][vc_separator type=”small” position=”left” color=”#2e2e33″ thickness=”2″][vc_empty_space height=”10px”]
[vc_empty_space]
Sketched Wire Frames
I started off the design process by sketching out the home, product list and product detail pages. I was able to then quickly test with users and get feedback to move onto digital mock ups. With user testing I was able to ensure all pages would have the necessary information, would be easy to navigate and not too busy or clunky.
[vc_single_image image=”15642″ img_size=”large” alignment=”center” style=”vc_box_rounded” onclick=”link_image” qode_css_animation=””]
[vc_empty_space height=”50px”][vc_separator type=”normal” color=”#cdcdcd” thickness=”2″][vc_empty_space height=”50px”]
[vc_single_image image=”15644″ img_size=”large” alignment=”center” style=”vc_box_rounded” onclick=”link_image” qode_css_animation=””]
[vc_empty_space height=”50px”]
[vc_empty_space height=”10px”][vc_separator type=”small” position=”left” color=”#2e2e33″ thickness=”2″][vc_empty_space height=”10px”]
[vc_empty_space]
Medium Fidelity Wireframes
With the feedback from users from the sketched wireframes, I began creating the low/medium fidelity mock ups. In this stage, it became clear from user testing that there needed to be an option to quickly add items to cart from the product detail page and to make purchasing tickets front and center on the home page.
[vc_empty_space height=”50px”][vc_separator type=”normal” color=”#cdcdcd” thickness=”2″][vc_empty_space height=”50px”]
[custom_font font_size=”60″ line_height=”66″ font_style=”normal” text_align=”center” font_weight=”600″ text_decoration=”none” text_shadow=”no” color=”#2e2e33″]
Hover or click to see transition between medium to high fidelity
[/custom_font][vc_empty_space height=”30px”]
[vc_empty_space height=”20px”][qode_crossfade_images initial_image=”15668″ hover_image=”15585″][vc_empty_space height=”20px”]
[vc_empty_space height=”20px”][qode_crossfade_images initial_image=”15669″ hover_image=”15689″][vc_empty_space height=”20px”]
[vc_empty_space height=”20px”][qode_crossfade_images initial_image=”15671″ hover_image=”15688″][vc_empty_space height=”20px”]
[vc_empty_space height=”50px”][vc_separator type=”normal” color=”#cdcdcd” thickness=”2″][vc_empty_space height=”50px”]
[vc_empty_space][custom_font font_size=”60″ line_height=”66″ font_style=”normal” text_align=”center” font_weight=”600″ text_decoration=”none” text_shadow=”no” color=”#2e2e33″]
Simplified User Flow
[/custom_font][vc_empty_space][qode_in_device_slider device=”desktop” titles_on_hover=”no” navigation=”no” auto_start=”no”][qode_in_device_slider_item target=”_self” image=”15690″][/qode_in_device_slider][vc_empty_space height=”20px”]
[vc_empty_space][icon_text box_type=”normal” icon=”fa-globe” icon_type=”circle” icon_position=”top” icon_size=”fa-2x” use_custom_icon_size=”no” icon_animation=”q_icon_animation” icon_animation_delay=”100″ title=”Global Header” title_tag=”h4″ separator=”yes” text=”By incorporating a global navigation header, users will be able to easily find the information they’re looking for on any page within the website” icon_color=”#2e2e33″ icon_hover_color=”#ffffff” title_color=”#2e2e33″ text_color=”#2e2e33″ separator_color=”#eeeeee” icon_border_color=”#2e2e33″ icon_background_color=”#ffffff” icon_hover_background_color=”#2e2e33″][vc_empty_space]
[vc_empty_space][icon_text box_type=”normal” icon=”fa-chevron-down” icon_type=”circle” icon_position=”top” icon_size=”fa-2x” use_custom_icon_size=”no” icon_animation=”q_icon_animation” icon_animation_delay=”300″ title=”Drop Down Menu” title_tag=”h4″ separator=”yes” text=”With the new drop down menu feature, users now have the option to dive deeper and select the exact information they’re looking for” icon_color=”#2e2e33″ icon_hover_color=”#ffffff” title_color=”#2e2e33″ text_color=”#2e2e33″ separator_color=”#eeeeee” icon_border_color=”#2e2e33″ icon_background_color=”#ffffff” icon_hover_background_color=”#2e2e33″][vc_empty_space]
[vc_empty_space][icon_text box_type=”normal” icon=”fa-list-ul” icon_type=”circle” icon_position=”top” icon_size=”fa-2x” use_custom_icon_size=”no” icon_animation=”q_icon_animation” icon_animation_delay=”500″ title=”Upgraded Product List” title_tag=”h4″ separator=”yes” text=”The redesign of the product listing page now gives users the option to filter the products and easily add items to cart from the list page” icon_color=”#2e2e33″ icon_hover_color=”#ffffff” title_color=”#2e2e33″ text_color=”#2e2e33″ separator_color=”#eeeeee” icon_border_color=”#2e2e33″ icon_background_color=”#ffffff” icon_hover_background_color=”#2e2e33″][vc_empty_space]
[vc_empty_space][icon_text box_type=”normal” icon=”fa-credit-card” icon_type=”circle” icon_position=”top” icon_size=”fa-2x” use_custom_icon_size=”no” icon_animation=”q_icon_animation” icon_animation_delay=”700″ title=”Seamless Checkout Process” title_tag=”h4″ separator=”yes” text=”By cutting down the amount of steps a user needs to take and incorporating a sign in for faster checkout feature, buying products is easier than ever” icon_color=”#2e2e33″ icon_hover_color=”#ffffff” title_color=”#2e2e33″ text_color=”#2e2e33″ separator_color=”#eeeeee” icon_border_color=”#2e2e33″ icon_background_color=”#ffffff” icon_hover_background_color=”#2e2e33″][vc_empty_space]
[vc_empty_space height=”50px”][vc_separator type=”normal” color=”#cdcdcd” thickness=”2″][vc_empty_space height=”50px”]
[custom_font font_size=”60″ line_height=”66″ font_style=”normal” text_align=”center” font_weight=”600″ text_decoration=”none” text_shadow=”no” color=”#2e2e33″]
Mobile Friendly
[/custom_font][vc_empty_space height=”30px”]
[vc_empty_space height=”20px”][qode_in_device_slider device=”phone-portrait” titles_on_hover=”no” navigation=”no” auto_start=”no”][qode_in_device_slider_item target=”_self” image=”15582″][/qode_in_device_slider][vc_empty_space height=”20px”]
[vc_empty_space height=”20px”][qode_in_device_slider device=”phone-portrait” titles_on_hover=”no” navigation=”no” auto_start=”no”][qode_in_device_slider_item target=”_self” image=”15584″][/qode_in_device_slider][vc_empty_space height=”20px”]
[vc_empty_space height=”20px”][qode_in_device_slider device=”phone-portrait” titles_on_hover=”no” navigation=”no” auto_start=”no”][qode_in_device_slider_item target=”_self” image=”15676″][/qode_in_device_slider][vc_empty_space height=”20px”]
[vc_empty_space height=”50px”][button size=”large” icon=”fa-arrow-right” target=”_blank” hover_type=”default” text=”View Prototype” link=”https://invis.io/Y3DNJPXWX” icon_color=”#cdcdcd” color=”#ffffff” hover_color=”#2e2e33″ background_color=”#2e2e33″ hover_background_color=”#ffffff” border_color=”#2e2e33″ hover_border_color=”#2e2e33″][vc_empty_space height=”50px”]
[vc_empty_space height=”50px”][vc_separator type=”normal” color=”#cdcdcd” thickness=”2″][vc_empty_space height=”50px”]
Like what you see? Let’s Work Together!
[vc_empty_space height=”40px”][button size=”large” icon=”fa-arrow-right” target=”_self” hover_type=”default” text=”Contact Me” link=”http://etaih.com/contact/” icon_color=”#cdcdcd” color=”#ffffff” hover_color=”#2e2e33″ background_color=”#2e2e33″ hover_background_color=”#ffffff” border_color=”#2e2e33″ hover_border_color=”#2e2e33″][vc_empty_space height=”40px”]
[vc_empty_space height=”40px”]
[vc_empty_space height=”40px”][portfolio_slider order_by=”menu_order” order=”ASC” separator=”yes” hide_button=”yes” enable_navigation=”enable_navigation”][vc_empty_space height=”100px”]