[av_section min_height=’100′ min_height_px=’500px’ padding=’default’ shadow=’no-border-styling’ bottom_border=’no-border-styling’ bottom_border_diagonal_color=’#333333′ bottom_border_diagonal_direction=” bottom_border_style=” id=” color=’main_color’ custom_bg=” src=’http://uxdezigner.com/wp-content/uploads/2018/10/Smiling-girls-bg-1030×687.jpg’ attachment=’105′ attachment_size=’large’ attach=’fixed’ position=’top left’ repeat=’stretch’ video=” video_ratio=’16:9′ overlay_enable=’aviaTBoverlay_enable’ overlay_opacity=’0.8′ overlay_color=’#0a0a0a’ overlay_pattern=” overlay_custom_pattern=” av_element_hidden_in_editor=’0′]
[av_image src=’http://uxdezigner.com/wp-content/uploads/2018/10/Britax-Logo-Color.png’ attachment=’93’ attachment_size=’full’ align=’center’ styling=’no-styling’ hover=” link=” target=” caption=” font_size=” appearance=” overlay_opacity=’0.4′ overlay_color=’#000000′ overlay_text_color=’#ffffff’ animation=’fade-in’ admin_preview_bg=”][/av_image]
[av_one_fifth first min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ padding=’0px’ border=” border_color=” radius=’0px’ background_color=” src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=”]
[/av_one_fifth][av_three_fifth min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ padding=’0px’ border=” border_color=” radius=’0px’ background_color=” src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=”]
[av_textblock size=’30’ font_color=’custom’ color=’#ffffff’ av-medium-font-size=” av-small-font-size=” av-mini-font-size=” admin_preview_bg=”]
As manufacturers of car seats, strollers, baby capsules, and nursery goods, the company protects children all over the world with its safe, comfortable, and easy-to-use products. They are global safety leaders in the category.
[/av_textblock]
[/av_three_fifth][av_one_fifth min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ padding=’0px’ border=” border_color=” radius=’0px’ background_color=” src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=”]
[/av_one_fifth]
[/av_section]
[av_section min_height=” min_height_px=’500px’ padding=’huge’ shadow=’no-shadow’ bottom_border=’no-border-styling’ bottom_border_diagonal_color=’#333333′ bottom_border_diagonal_direction=” bottom_border_style=” id=” color=’alternate_color’ custom_bg=” src=’http://uxdezigner.com/wp-content/uploads/2018/10/Smiling-girls-bg.jpg’ attachment=’105′ attachment_size=’full’ attach=’fixed’ position=’top left’ repeat=’stretch’ video=” video_ratio=’16:9′ overlay_enable=’aviaTBoverlay_enable’ overlay_opacity=’0.8′ overlay_color=’#ffffff’ overlay_pattern=” overlay_custom_pattern=” av_element_hidden_in_editor=’0′]
[av_one_fifth first min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ padding=’0px’ border=” border_color=” radius=’0px’ background_color=” src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=”]
[/av_one_fifth][av_three_fifth min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ padding=’0px’ border=” border_color=” radius=’0px’ background_color=” src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=”]
[av_textblock size=’24’ font_color=’custom’ color=’#000000′ av-medium-font-size=” av-small-font-size=” av-mini-font-size=” admin_preview_bg=”]
The team
This project was the result of a team collaboration project I completed with two colleagues (E.G. and T.V.).
[/av_textblock]
[/av_three_fifth][av_one_fifth min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ padding=’0px’ border=” border_color=” radius=’0px’ background_color=” src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=”]
[/av_one_fifth]
[/av_section]
[av_section min_height=’100′ min_height_px=’500px’ padding=’default’ shadow=’no-shadow’ bottom_border=’no-border-styling’ bottom_border_diagonal_color=’#333333′ bottom_border_diagonal_direction=” bottom_border_style=” scroll_down=’aviaTBscroll_down’ id=” color=’alternate_color’ custom_bg=” src=” attachment=” attachment_size=” attach=’scroll’ position=’top left’ repeat=’no-repeat’ video=” video_ratio=’16:9′ overlay_opacity=’0.5′ overlay_color=” overlay_pattern=” overlay_custom_pattern=” av_element_hidden_in_editor=’0′]
[av_heading tag=’h1′ padding=’10’ heading=’The Challenge’ color=” style=” custom_font=” size=” subheading_active=” subheading_size=’15’ custom_class=” admin_preview_bg=” av-desktop-hide=” av-medium-hide=” av-small-hide=” av-mini-hide=” av-medium-font-size-title=” av-small-font-size-title=” av-mini-font-size-title=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=”][/av_heading]
[av_textblock size=’24’ font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” admin_preview_bg=”]
The average time spent on our website was decreasing continuously. The increased bounce rate of the website traffic was showing that something is not working for the website visitors. Sales of the products were dropping as well.
We had to find out the reasons behind it and how to provide consumers with a great experience while they discover the range of amazing products by Britax.
[/av_textblock]
[av_image src=’http://uxdezigner.com/wp-content/uploads/2018/10/Britax-2014-15.jpg’ attachment=’111′ attachment_size=’full’ align=’center’ styling=’no-styling’ hover=” link=” target=” caption=” font_size=” appearance=” overlay_opacity=’0.4′ overlay_color=’#000000′ overlay_text_color=’#ffffff’ animation=’fade-in’ admin_preview_bg=”][/av_image]
[/av_section][av_section min_height=” min_height_px=’500px’ padding=’default’ shadow=’no-shadow’ bottom_border=’no-border-styling’ bottom_border_diagonal_color=’#333333′ bottom_border_diagonal_direction=” bottom_border_style=” id=” color=’main_color’ custom_bg=” src=” attachment=” attachment_size=” attach=’scroll’ position=’top left’ repeat=’no-repeat’ video=” video_ratio=’16:9′ overlay_opacity=’0.5′ overlay_color=” overlay_pattern=” overlay_custom_pattern=” av_element_hidden_in_editor=’0′]
[av_heading tag=’h1′ padding=’10’ heading=’Research’ color=” style=” custom_font=” size=” subheading_active=” subheading_size=’15’ custom_class=” admin_preview_bg=” av-desktop-hide=” av-medium-hide=” av-small-hide=” av-mini-hide=” av-medium-font-size-title=” av-small-font-size-title=” av-mini-font-size-title=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=”][/av_heading]
[av_one_half first min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ padding=’0px’ border=” border_color=” radius=’0px’ background_color=” src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=”]
[av_textblock size=’24’ font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” admin_preview_bg=”]
Analytical Data Learnings
We carried out our first set of research using Google Analytics and HotJar.
- We discovered that over 35% of the users were visiting the website using a mobile device (tablets and mobile phones).
- Resolution of most devices was from 280px to 1024px. However, we were only testing the website on desktop computers.
- Most popular brand being used was Apple with Safari browser. Flash banners on the websites with most key messages were not loading on these devices.
These three issues above were most obvious issues for the website performance. There was more to discover.
[/av_textblock]
[/av_one_half][av_one_half min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ padding=’0px’ border=” border_color=” radius=’0px’ background_color=” src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=”]
[av_image src=’http://uxdezigner.com/wp-content/uploads/2018/10/Britax-Website-Old.jpg’ attachment=’117′ attachment_size=’full’ align=’center’ styling=’no-styling’ hover=” link=” target=” caption=” font_size=” appearance=” overlay_opacity=’0.4′ overlay_color=’#000000′ overlay_text_color=’#ffffff’ animation=’right-to-left’ admin_preview_bg=”][/av_image]
[/av_one_half]
[/av_section]
[av_section min_height=” min_height_px=’500px’ padding=’default’ shadow=’no-shadow’ bottom_border=’no-border-styling’ bottom_border_diagonal_color=’#333333′ bottom_border_diagonal_direction=” bottom_border_style=” id=” color=’alternate_color’ custom_bg=” src=” attachment=” attachment_size=” attach=’scroll’ position=’top left’ repeat=’no-repeat’ video=” video_ratio=’16:9′ overlay_opacity=’0.5′ overlay_color=” overlay_pattern=” overlay_custom_pattern=” av_element_hidden_in_editor=’0′]
[av_one_half first min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ padding=’0px’ border=” border_color=” radius=’0px’ background_color=” src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=”]
[av_textblock size=’24’ font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” admin_preview_bg=”]
Listen to learn
We organised surveys using Survey Monkey to do quantitative research which helped us find the demographics, interests and behaviour of our audience.
For the qualitative research, we did interviews to discover users’ thoughts, feelings, actions and pain points when conducting contextual inquiries and user testing.
[/av_textblock]
[av_image src=’http://uxdezigner.com/wp-content/uploads/2018/10/Survey-age.jpg’ attachment=’146′ attachment_size=’full’ align=’center’ styling=” hover=” link=” target=” caption=’yes’ font_size=” appearance=’on-hover’ overlay_opacity=’0.4′ overlay_color=’#000000′ overlay_text_color=’#ffffff’ animation=’fade-in’ admin_preview_bg=”]
Survey Results
[/av_image]
[av_image src=’http://uxdezigner.com/wp-content/uploads/2018/10/Survey-word-map.jpg’ attachment=’147′ attachment_size=’full’ align=’center’ styling=” hover=” link=” target=” caption=’yes’ font_size=” appearance=’on-hover’ overlay_opacity=’0.4′ overlay_color=’#000000′ overlay_text_color=’#ffffff’ animation=’fade-in’ admin_preview_bg=”]
Survey Results
[/av_image]
[/av_one_half][av_one_half min_height=” vertical_alignment=’av-align-top’ space=” margin=’0px’ margin_sync=’true’ padding=’0px’ padding_sync=’true’ border=” border_color=’#eaeaea’ radius=’0px’ radius_sync=’true’ background_color=” src=” attachment=” attachment_size=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=”]
[av_textblock size=’24’ font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” admin_preview_bg=”]
Research to understand
We did market research, competitive analyses and heuristic evaluation to learn about the market, products and consumers.
Stakeholder interviews helped us understand the business goals.
We discovered the future of the business and where it was being seen in future. E-commerce was a new addition to the website with more advanced ‘where to buy’ retailer. The business relied on B2B for 100% of the sales however in the near future it was going to change with B2C sales.
[/av_textblock]
[av_image src=’http://uxdezigner.com/wp-content/uploads/2018/10/sticky-britax-1.jpg’ attachment=’162′ attachment_size=’full’ align=’center’ styling=” hover=” link=” target=” caption=” font_size=” appearance=’on-hover’ overlay_opacity=’0.4′ overlay_color=’#000000′ overlay_text_color=’#ffffff’ animation=’fade-in’ admin_preview_bg=”]
Survey Results
[/av_image]
[/av_one_half]
[/av_section]
[av_section min_height=” min_height_px=’500px’ padding=’default’ shadow=’no-shadow’ bottom_border=’no-border-styling’ bottom_border_diagonal_color=’#333333′ bottom_border_diagonal_direction=” bottom_border_style=” id=” color=’main_color’ custom_bg=” src=” attachment=” attachment_size=” attach=’scroll’ position=’top left’ repeat=’no-repeat’ video=” video_ratio=’16:9′ overlay_opacity=’0.5′ overlay_color=” overlay_pattern=” overlay_custom_pattern=” av_element_hidden_in_editor=’0′]
[av_one_fifth first min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ padding=’0px’ border=” border_color=” radius=’0px’ background_color=” src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=”]
[/av_one_fifth][av_three_fifth min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ padding=’0px’ border=” border_color=” radius=’0px’ background_color=” src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=”]
[av_textblock size=’24’ font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” admin_preview_bg=”]
Problem Validation
We discovered the issues with the current website. It was clear that the website needed to be structured according to our users’ expectations, it must load quicker and work on all the modern devices.
Competitor’s of Britax had adopted the latest technologies to address their users’ needs.
The current platform was not suitable for future development. Current information architecture was confusing to the new parents and the terminology used was a bit too technical for the target audience.
The findings were presented to our stakeholders and the next steps of the process were explained. New opportunities were briefed as well.
[/av_textblock]
[/av_three_fifth][av_one_fifth min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ padding=’0px’ border=” border_color=” radius=’0px’ background_color=” src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=”]
[/av_one_fifth]
[/av_section]
[av_section min_height=” min_height_px=’500px’ padding=’default’ shadow=’no-shadow’ bottom_border=’no-border-styling’ bottom_border_diagonal_color=’#333333′ bottom_border_diagonal_direction=” bottom_border_style=” id=” color=’alternate_color’ custom_bg=” src=” attachment=” attachment_size=” attach=’scroll’ position=’top left’ repeat=’no-repeat’ video=” video_ratio=’16:9′ overlay_opacity=’0.5′ overlay_color=” overlay_pattern=” overlay_custom_pattern=” av_element_hidden_in_editor=’0′]
[av_heading tag=’h1′ padding=’10’ heading=’Analysis’ color=” style=” custom_font=” size=” subheading_active=” subheading_size=’15’ custom_class=” admin_preview_bg=” av-desktop-hide=” av-medium-hide=” av-small-hide=” av-mini-hide=” av-medium-font-size-title=” av-small-font-size-title=” av-mini-font-size-title=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=”][/av_heading]
[av_one_half first min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ padding=’0px’ border=” border_color=” radius=’0px’ background_color=” src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=”]
[av_textblock size=’24’ font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” admin_preview_bg=”]
Synthesize to define
Over 70% of the target audience was 25-44 years old women, however, men played a major role in the final decision-making process.
We modelled representative experiences, scenarios, tasks and mindsets to articulate the users’ goals, and define and frame the problem.
- Personas
- Empathy Maps
- Mind Maps
- Experience Maps
- User Needs Analysis
- User Journeys
[/av_textblock]
[/av_one_half][av_one_half min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ padding=’0px’ border=” border_color=” radius=’0px’ background_color=” src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=”]
[av_image src=’http://uxdezigner.com/wp-content/uploads/2018/10/Personas-Britax.png’ attachment=’134′ attachment_size=’full’ align=’center’ styling=’no-styling’ hover=” link=” target=” caption=” font_size=” appearance=” overlay_opacity=’0.4′ overlay_color=’#000000′ overlay_text_color=’#ffffff’ animation=’right-to-left’ admin_preview_bg=”][/av_image]
[/av_one_half]
[/av_section]
[av_section min_height=” min_height_px=’500px’ padding=’default’ shadow=’no-shadow’ bottom_border=’no-border-styling’ bottom_border_diagonal_color=’#333333′ bottom_border_diagonal_direction=” bottom_border_style=” id=” color=’main_color’ custom_bg=” src=” attachment=” attachment_size=” attach=’scroll’ position=’top left’ repeat=’no-repeat’ video=” video_ratio=’16:9′ overlay_opacity=’0.5′ overlay_color=” overlay_pattern=” overlay_custom_pattern=” av_element_hidden_in_editor=’0′]
[av_heading tag=’h1′ padding=’10’ heading=’Conceptualization and design’ color=” style=” custom_font=” size=” subheading_active=” subheading_size=’15’ custom_class=” admin_preview_bg=” av-desktop-hide=” av-medium-hide=” av-small-hide=” av-mini-hide=” av-medium-font-size-title=” av-small-font-size-title=” av-mini-font-size-title=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=”][/av_heading]
[av_one_full first min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ padding=’0px’ border=” border_color=” radius=’0px’ background_color=” src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=”]
[av_textblock size=’24’ font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” admin_preview_bg=”]
Generating concepts
We collaborated with our stakeholders to start the ideation process. It included:
- Problem Framing
- Sketching
- Storyboards
[/av_textblock]
[/av_one_full]
[/av_section]
[av_section min_height=” min_height_px=’500px’ padding=’default’ shadow=’no-shadow’ bottom_border=’no-border-styling’ bottom_border_diagonal_color=’#333333′ bottom_border_diagonal_direction=” bottom_border_style=” id=” color=’alternate_color’ custom_bg=” src=” attachment=” attachment_size=” attach=’scroll’ position=’top left’ repeat=’no-repeat’ video=” video_ratio=’16:9′ overlay_opacity=’0.5′ overlay_color=” overlay_pattern=” overlay_custom_pattern=” av_element_hidden_in_editor=’0′]
[av_one_full first min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ padding=’0px’ border=” border_color=” radius=’0px’ background_color=” src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=”]
[av_textblock size=’24’ font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” admin_preview_bg=”]
Design and visualization
Our visual design process started with rapid prototyping and then moved on to low and high fidelity prototypes. It enabled us to test and get the perspective of our users and get feedback from our stakeholders.
The feedback from the testing drove the iterative process, giving us essential insight into refining the prototype and rethinking the interaction.
[/av_textblock]
[/av_one_full]
[/av_section]
[av_image src=’http://uxdezigner.com/wp-content/uploads/2018/10/Wireframes-Britax.png’ attachment=’166′ attachment_size=’full’ align=’right’ styling=” hover=” link=” target=” caption=” font_size=” appearance=” overlay_opacity=’0.4′ overlay_color=’#000000′ overlay_text_color=’#ffffff’ animation=’right-to-left’ admin_preview_bg=”][/av_image]
[av_section min_height=” min_height_px=’500px’ padding=’default’ shadow=’no-shadow’ bottom_border=’no-border-styling’ bottom_border_diagonal_color=’#333333′ bottom_border_diagonal_direction=” bottom_border_style=” id=” color=’main_color’ custom_bg=” src=” attachment=” attachment_size=” attach=’scroll’ position=’top left’ repeat=’no-repeat’ video=” video_ratio=’16:9′ overlay_opacity=’0.5′ overlay_color=” overlay_pattern=” overlay_custom_pattern=” av_element_hidden_in_editor=’0′]
[av_heading tag=’h1′ padding=’10’ heading=’Production and launch’ color=” style=” custom_font=” size=” subheading_active=” subheading_size=’15’ custom_class=” admin_preview_bg=” av-desktop-hide=” av-medium-hide=” av-small-hide=” av-mini-hide=” av-medium-font-size-title=” av-small-font-size-title=” av-mini-font-size-title=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=”][/av_heading]
[av_textblock size=’24’ font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” admin_preview_bg=”]
We used Sketch and Photoshop to create user interface design of the website. Which was developed by our team of developers. The website was launched as a beta version and improved after further usability testing.
Analytical data showed that our customers were engaging with the content twice as much as they were previously.
[/av_textblock]
[/av_section]
[av_image src=’http://uxdezigner.com/wp-content/uploads/2018/10/Britax-new-website.jpg’ attachment=’153′ attachment_size=’full’ align=’center’ styling=” hover=” link=” target=” caption=” font_size=” appearance=” overlay_opacity=’0.4′ overlay_color=’#000000′ overlay_text_color=’#ffffff’ animation=’bottom-to-top’ admin_preview_bg=”][/av_image]