Dynamite Clothing "Shop the Look" UX Design

[mk_page_section vertical_align=”center” bg_color=”#f7f7f7″ bg_repeat=”repeat-x” padding_top=”50″ padding_bottom=”50″ bottom_shape_color=”#f7f7f7″ bottom_shape_bg_color=”#ffffff” sidebar=”sidebar-1″][vc_column][vc_custom_heading text=”Dynamite Outfitting” font_container=”tag:h1|font_size:48|text_align:center” use_theme_fonts=”yes” css_animation=”fadeInUp” el_id=”herotitle”][vc_custom_heading text=”User Experience Design for Product Upsells on Mobile Fashion Website” font_container=”tag:h5|font_size:16px|text_align:center” use_theme_fonts=”yes” css_animation=”fadeInUp” el_id=”herosubtitle”][/vc_column][/mk_page_section][mk_page_section bg_image=”http://noisyghost.co/wp-content/uploads/2018/01/hero_bg-2.jpg” bg_color=”#ffffff” bg_repeat=”repeat-x” padding_top=”0″ padding_bottom=”0″ bottom_shape_color=”#f7f7f7″ bottom_shape_bg_color=”#ffffff” sidebar=”sidebar-1″][vc_column][vc_images_carousel images=”3112″ img_size=”full” onclick=”link_no” hide_pagination_control=”yes” hide_prev_next_buttons=”yes” wrap=”yes”][/vc_column][/mk_page_section][vc_row fullwidth=”true” fullwidth_content=”false” type=”full_width_background” full_screen_row_position=”middle” scene_position=”center” text_color=”dark” text_align=”center” top_padding=”100″ bottom_padding=”100″ id=”problem” overlay_strength=”0.3″ css=”.vc_custom_1518114433004{padding-top: 50px !important;padding-bottom: 50px !important;background-color: #ffffff !important;}”][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][vc_custom_heading text=”The Problem to Solve” font_container=”tag:h5|text_align:center” use_theme_fonts=”yes”][vc_custom_heading text=”exploring additional opportunities for upsells” font_container=”tag:h2|font_size:48|text_align:center” use_theme_fonts=”yes”][mk_divider style=”thin_solid” divider_width=”custom_width” custom_width=”50″ thin_single_color=”#b5a8be” thickness=”2″ margin_top=”25″ margin_bottom=”35″][vc_row_inner][vc_column_inner width=”1/6″][/vc_column_inner][vc_column_inner width=”2/3″][vc_column_text align=”center” animation=”bottom-to-top” css=”.vc_custom_1525191682310{margin-bottom: 0px !important;}”]

We wanted to offer customers the opportunity to shop for components of a featured outfit while browsing products they were already interested in. The simplest solution was to include an in-product toggle with hot spots that could be turned on or off. A tap-through on a hot spot would allow for additional information to be displayed, and allow the user to add additional products to their cart without leaving the product screen.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/6″][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][mk_page_section vertical_align=”bottom” min_height=”29″ padding_top=”0″ padding_bottom=”0″ sidebar=”sidebar-1″][vc_column][vc_single_image image=”3183″ img_size=”full” alignment=”center” onclick=”custom_link” css_animation=”fadeInUp” link=”http://noisyghost.co/wp-content/uploads/2018/03/noisyghost_ux_mobile_dynamite_outfitting_lightbox.jpg” el_class=”lightbox”][/vc_column][/mk_page_section][vc_row fullwidth=”true” equal_columns=”true” attached=”true” column_padding=”5″ type=”full_width_background” full_screen_row_position=”middle” equal_height=”yes” content_placement=”middle” scene_position=”center” text_color=”dark” text_align=”center” top_padding=”100″ bottom_padding=”100″ id=”expertise” overlay_strength=”0.3″ css=”.vc_custom_1525194638140{margin-top: 0px !important;margin-bottom: 0px !important;}”][vc_column width=”1/2″ column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid” css=”.vc_custom_1525202067518{background-color: #dda8be !important;}”][mk_padding_divider size=”25″][vc_single_image image=”3680″ img_size=”500×658″ alignment=”center”][/vc_column][vc_column width=”1/2″ column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid” css=”.vc_custom_1518115182972{background-color: #f7f7f7 !important;}”][mk_padding_divider size=”25″][vc_custom_heading text=”The Process” font_container=”tag:h5|text_align:center” use_theme_fonts=”yes”][vc_custom_heading text=”shop the look” font_container=”tag:h2|font_size:48|text_align:center” use_theme_fonts=”yes”][mk_divider style=”thin_solid” divider_width=”custom_width” custom_width=”50″ thin_single_color=”#b5a8be” thickness=”2″ margin_top=”25″ margin_bottom=”35″][vc_column_text align=”center” animation=”bottom-to-top” css=”.vc_custom_1525287526737{margin-bottom: 0px !important;}”]

The process to achieve the final product design required an assessment of existing problems, identifying areas of improvement through user interviews, discussing the approach and possible solutions, wireframing a high-level solution, prototyping, testing, a visual design, and asset organization for the development team.

[/vc_column_text][mk_padding_divider size=”50″][vc_row_inner][vc_column_inner width=”1/3″][mk_font_icons icon=”mk-li-notepad” color=”#b5a8be” size=”medium” align=”center” animation=”bottom-to-top”][vc_custom_heading text=”User Research” font_container=”tag:h5|text_align:center|color:%23444444″ use_theme_fonts=”yes” css_animation=”fadeInUp” el_class=”expertise-subtitle”][mk_padding_divider size=”35″][/vc_column_inner][vc_column_inner width=”1/3″][mk_font_icons icon=”mk-li-posion” color=”#b5a8be” size=”medium” align=”center” animation=”bottom-to-top”][vc_custom_heading text=”Exploration” font_container=”tag:h5|text_align:center|color:%23444444″ use_theme_fonts=”yes” css_animation=”fadeInUp” el_class=”expertise-subtitle”][mk_padding_divider size=”35″][/vc_column_inner][vc_column_inner width=”1/3″][mk_font_icons icon=”mk-li-pencil” color=”#b5a8be” size=”medium” align=”center” animation=”bottom-to-top”][vc_custom_heading text=”Wireframing” font_container=”tag:h5|text_align:center|color:%23444444″ use_theme_fonts=”yes” css_animation=”fadeInUp” el_class=”expertise-subtitle”][mk_padding_divider size=”35″][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][mk_font_icons icon=”mk-li-browser” color=”#b5a8be” size=”medium” align=”center” animation=”bottom-to-top”][vc_custom_heading text=”Visual Design” font_container=”tag:h5|text_align:center|color:%23444444″ use_theme_fonts=”yes” css_animation=”fadeInUp” el_class=”expertise-subtitle”][/vc_column_inner][vc_column_inner width=”1/3″][mk_font_icons icon=”mk-li-rocket” color=”#b5a8be” size=”medium” align=”center” animation=”bottom-to-top”][vc_custom_heading text=”Prototyping” font_container=”tag:h5|text_align:center|color:%23444444″ use_theme_fonts=”yes” css_animation=”fadeInUp” el_class=”expertise-subtitle”][/vc_column_inner][vc_column_inner width=”1/3″][mk_font_icons icon=”mk-li-graph” color=”#b5a8be” size=”medium” align=”center” animation=”bottom-to-top”][vc_custom_heading text=”Iteration” font_container=”tag:h5|text_align:center|color:%23444444″ use_theme_fonts=”yes” css_animation=”fadeInUp” el_class=”expertise-subtitle”][/vc_column_inner][/vc_row_inner][mk_padding_divider size=”25″][/vc_column][/vc_row][vc_row fullwidth=”true” fullwidth_content=”false” type=”full_width_background” full_screen_row_position=”middle” scene_position=”center” text_color=”dark” text_align=”center” top_padding=”100″ bottom_padding=”100″ id=”portfolio” overlay_strength=”0.3″ css=”.vc_custom_1525197207556{padding-top: 100px !important;padding-bottom: 0px !important;background-color: #ffffff !important;}”][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][vc_custom_heading text=”user flow” font_container=”tag:h5|text_align:center” use_theme_fonts=”yes”][vc_custom_heading text=”keep shopping easily” font_container=”tag:h2|font_size:48|text_align:center” use_theme_fonts=”yes”][mk_divider style=”thin_solid” divider_width=”custom_width” custom_width=”50″ thin_single_color=”#b5a8be” thickness=”2″ margin_top=”25″ margin_bottom=”35″][vc_row_inner][vc_column_inner width=”1/6″][/vc_column_inner][vc_column_inner width=”2/3″][vc_column_text align=”center” animation=”bottom-to-top” css=”.vc_custom_1525375523022{margin-bottom: 0px !important;}”]

The user flow for the Dynamite Outfitting app add-on begins on the product detail page, wherein a user can select to enable hot spots on an outfit photo, select an add-on item, view the add-on product details, then add the item to their cart.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/6″][/vc_column_inner][/vc_row_inner][mk_padding_divider size=”50″][vc_single_image image=”3660″ img_size=”full” alignment=”center” css_animation=”fadeInUp”][/vc_column][/vc_row][vc_row css=”.vc_custom_1525197118534{padding-top: 0px !important;padding-bottom: 100px !important;}”][vc_column][mk_tab_slider tabs=”3219, 3243, 3730, 3733, 3769, 3775, 3802″][/vc_column][/vc_row]

Related Works