Portfolio

[vc_row unlock_row_content=”yes” row_height_percent=”0″ override_padding=”yes” h_padding=”5″ top_padding=”6″ bottom_padding=”7″ back_color=”color-xsdn” overlay_alpha=”50″ gutter_size=”4″ column_width_percent=”100″ shift_y=”0″ z_index=”0″ top_divider=”gradient” bottom_divider=”gradient” inverted_device_order=”yes” changer_back_color=”yes” uncode_shortcode_id=”264447″ back_color_type=”uncode-palette” el_id=”portfolio”][vc_column column_width_percent=”100″ position_vertical=”middle” gutter_size=”3″ override_padding=”yes” column_padding=”1″ overlay_alpha=”50″ shift_x=”0″ shift_y=”0″ shift_y_down=”0″ z_index=”0″ medium_width=”0″ mobile_width=”0″ width=”1/1″ uncode_shortcode_id=”136140″][vc_row_inner][vc_column_inner column_width_percent=”100″ gutter_size=”3″ overlay_alpha=”50″ shift_x=”0″ shift_y=”0″ shift_y_down=”0″ z_index=”0″ medium_width=”0″ mobile_width=”0″ width=”1/1″ uncode_shortcode_id=”770263″][vc_custom_heading text_size=”fontsize-155944″ text_weight=”500″ css_animation=”curtain” animation_speed=”1000″ interval_animation=”100″ uncode_shortcode_id=”439694″]Portfolio[/vc_custom_heading][/vc_column_inner][/vc_row_inner][vc_tabs align=”left”][vc_tab gutter_size=”2″ column_padding=”2″ title=”UX/UI Design” tab_id=”1690244927-1-12″][vc_empty_space empty_h=”1″][vc_custom_heading text_size=”h3″ text_weight=”300″ uncode_shortcode_id=”656510″ el_id=”casestudies”]Case Studies[/vc_custom_heading][vc_empty_space empty_h=”1″][uncode_index el_id=”index-581094100″ isotope_mode=”fitRows” loop=”size:6|order_by:date|post_type:portfolio|by_id:112038,111873,111256,111292,111686,111762|taxonomy_count:10″ filtering=”yes” filter_mobile_align=”left” gutter_size=”3″ post_items=”media|featured|onpost|poster,date,title,text|excerpt|90,category|bordered|topright|hide-icon” portfolio_items=”media|featured|onpost|original,title,icon|sm” screen_lg=”1200″ screen_md=”600″ screen_sm=”480″ images_size=”three-two” single_overlay_color=”color-wayh” single_overlay_opacity=”50″ single_h_align=”center” single_padding=”1″ single_title_dimension=”h6″ single_border=”yes” single_icon=”fa fa-plus2″ uncode_shortcode_id=”167920″][vc_empty_space empty_h=”3″][vc_custom_heading text_size=”h3″ text_weight=”300″ uncode_shortcode_id=”197428″ el_id=”samples”]Work Samples[/vc_custom_heading][vc_empty_space empty_h=”1″][vc_gallery el_id=”gallery-958453445″ type=”carousel” medias=”84283,84189,111954″ carousel_lg=”5″ carousel_md=”3″ carousel_sm=”1″ thumb_size=”three-two” gutter_size=”1″ media_items=”media,icon” carousel_interval=”3000″ carousel_navspeed=”400″ carousel_dots=”yes” carousel_dots_mobile=”yes” carousel_dots_inside=”yes” carousel_dot_padding=”2″ stage_padding=”0″ single_overlay_opacity=”50″ single_text_anim_type=”btt” single_h_align=”center” single_padding=”2″ single_icon=”fa fa-search3″ single_border=”yes” single_css_animation=”bottom-t-top” single_animation_delay=”200″ lbox_caption=”yes” no_double_tap=”yes” carousel_rtl=”” single_title_uppercase=”” single_title_bold=”” single_title_serif=”” onclick=”link_image” custom_links_target=”_self” items=”eyI4ODY4X2kiOnsic2luZ2xlX3dpZHRoIjoiNCIsInNpbmdsZV9oZWlnaHQiOiI0In0sIjg4NjJfaSI6eyJzaW5nbGVfd2lkdGgiOiI0Iiwic2luZ2xlX2hlaWdodCI6IjQifSwiODg2MF9pIjp7InNpbmdsZV93aWR0aCI6IjQifX0=” single_half_padding=”” single_no_background=”” uncode_shortcode_id=”650879″][/vc_tab][vc_tab gutter_size=”2″ column_padding=”2″ title=”Branding & Visual Design” tab_id=”1690244927-2-92″][vc_gallery el_id=”gallery-955570″ medias=”110740,111945,110622,110662,84318,110646,111956,83868,111756,110617,83696″ gutter_size=”3″ screen_lg=”1000″ screen_md=”600″ screen_sm=”480″ single_width=”3″ single_overlay_opacity=”50″ single_padding=”2″ uncode_shortcode_id=”333664″][/vc_tab][/vc_tabs][/vc_column][/vc_row][vc_row unlock_row_content=”yes” row_height_percent=”0″ override_padding=”yes” h_padding=”5″ top_padding=”1″ bottom_padding=”7″ back_color=”color-xsdn” overlay_alpha=”50″ gutter_size=”4″ column_width_percent=”100″ shift_y=”0″ z_index=”0″ top_divider=”gradient” bottom_divider=”gradient” inverted_device_order=”yes” changer_back_color=”yes” uncode_shortcode_id=”810384″ back_color_type=”uncode-palette” el_id=”about”][vc_column column_width_percent=”100″ gutter_size=”3″ overlay_alpha=”50″ shift_x=”0″ shift_y=”0″ shift_y_down=”0″ z_index=”0″ medium_width=”0″ mobile_width=”0″ css_animation=”alpha-anim” animation_speed=”1000″ width=”1/1″ uncode_shortcode_id=”166559″][vc_tabs][vc_tab gutter_size=”2″ column_padding=”2″ title=”About Sarah” tab_id=”1690243250-1-22″][vc_row_inner][vc_column_inner width=”1/6″][/vc_column_inner][vc_column_inner column_width_percent=”100″ gutter_size=”2″ overlay_alpha=”50″ shift_x=”0″ shift_y=”0″ shift_y_down=”0″ z_index=”0″ medium_width=”0″ mobile_width=”0″ width=”2/3″ uncode_shortcode_id=”158749″][vc_custom_heading text_size=”h1″ text_weight=”300″ uncode_shortcode_id=”431196″]About[/vc_custom_heading][vc_column_text uncode_shortcode_id=”180252″]Sarah boasts over ten years of experience in visual and web design, with a concentration in user experience design. Throughout her career, she has held roles ranging from individual contributor to founding member, guiding creative decisions across product design, branding, and marketing. Additionally, she has actively participated in, sponsored, and mentored Hack-a-thons, garnering awards such as “Most Aesthetically Pleasing Design” and “Most Market Ready Product”. Sarah possesses a keen understanding of user needs, strategic acumen for business objectives, and the ability to maintain lean and scalable designs.[/vc_column_text][vc_empty_space empty_h=”1″][vc_button size=”btn-sm” border_width=”0″ link=”url:https%3A%2F%2Fsarahyeager.com%2Fabout%2F|title:About” uncode_shortcode_id=”359280″]More About Sarah[/vc_button][/vc_column_inner][vc_column_inner width=”1/6″][/vc_column_inner][/vc_row_inner][/vc_tab][vc_tab gutter_size=”2″ column_padding=”2″ title=”UX Design Process” tab_id=”1690243250-2-87″][vc_row_inner row_inner_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ shift_y=”0″ z_index=”0″ uncode_shortcode_id=”107505″][vc_column_inner column_width_percent=”100″ gutter_size=”2″ overlay_alpha=”50″ shift_x=”0″ shift_y=”0″ shift_y_down=”0″ z_index=”0″ medium_width=”0″ mobile_width=”0″ width=”1/2″ uncode_shortcode_id=”213452″][vc_custom_heading text_size=”h1″ text_weight=”300″ uncode_shortcode_id=”684922″]Design Thinking[/vc_custom_heading][vc_column_text uncode_shortcode_id=”212352″]I use the methodology “Design Thinking” to gain a holistic and empathic understanding of the problems that people face and create innovative solutions in which I can prototype and test. It’s an iterative and non-linear approach to reach core issues. So steps in the process can be revisited at any point to better approach the issue at hand.[/vc_column_text][/vc_column_inner][vc_column_inner column_width_percent=”100″ align_horizontal=”align_center” gutter_size=”3″ overlay_alpha=”50″ shift_x=”0″ shift_y=”0″ shift_y_down=”0″ z_index=”0″ medium_width=”0″ mobile_width=”0″ width=”1/2″ uncode_shortcode_id=”159027″][vc_empty_space empty_h=”3″][/vc_column_inner][/vc_row_inner][vc_row_inner row_inner_height_percent=”0″ back_color=”color-lxmt” overlay_alpha=”50″ gutter_size=”3″ shift_y=”0″ z_index=”0″ uncode_shortcode_id=”159779″ css=”.vc_custom_1708652941785{margin-top: 3% !important;padding-top: 3% !important;padding-right: 3% !important;padding-bottom: 3% !important;padding-left: 3% !important;}” back_color_type=”uncode-palette”][vc_column_inner column_width_percent=”100″ gutter_size=”3″ overlay_alpha=”50″ shift_x=”0″ shift_y=”0″ shift_y_down=”0″ z_index=”0″ medium_width=”0″ mobile_width=”0″ width=”1/6″ uncode_shortcode_id=”155722″][vc_icon icon=”fa fa-heart3″ icon_color=”color-742106″ text_lead=”small” text_reduced=”yes” uncode_shortcode_id=”151226″ title=”Empathize” icon_color_type=”uncode-palette”]

Conduct research to develop an understanding of the users

[/vc_icon][/vc_column_inner][vc_column_inner width=”1/6″][vc_icon icon=”fa fa-search3″ icon_color=”color-vyce” text_lead=”small” text_reduced=”yes” uncode_shortcode_id=”952426″ title=”Define” icon_color_type=”uncode-palette”]

Synthesize the research to identify where the problems lie

[/vc_icon][/vc_column_inner][vc_column_inner width=”1/6″][vc_icon icon=”fa fa-lightbulb-o” icon_color=”color-210407″ text_reduced=”yes” uncode_shortcode_id=”170311″ title=”Ideate” icon_color_type=”uncode-palette”]

Generate a range of ideas to address the problems

[/vc_icon][/vc_column_inner][vc_column_inner width=”1/6″][vc_icon icon=”fa fa-pencil” icon_color=”color-482803″ text_reduced=”yes” uncode_shortcode_id=”182919″ title=”Prototype” icon_color_type=”uncode-palette”]

Build representations of the proposed solution. Can be low fidelity or high fidelity

[/vc_icon][/vc_column_inner][vc_column_inner width=”1/6″][vc_icon icon=”fa fa-check-square-o” icon_color=”color-149363″ uncode_shortcode_id=”834866″ title=”Test” icon_color_type=”uncode-palette”]

Use prototypes to test ideas and gather feedback from users

[/vc_icon][/vc_column_inner][vc_column_inner width=”1/6″][vc_icon icon=”fa fa-rocket2″ icon_color=”color-632047″ uncode_shortcode_id=”203563″ title=”Implement” icon_color_type=”uncode-palette”]

Finalize designs and prepare documents for development hand-off

[/vc_icon][/vc_column_inner][/vc_row_inner][/vc_tab][vc_tab gutter_size=”2″ column_padding=”2″ title=”UI Design Process” tab_id=”1690244525696-2-1″][vc_row_inner row_inner_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ shift_y=”0″ z_index=”0″ uncode_shortcode_id=”633306″ css=”.vc_custom_1708716750691{margin-top: 2% !important;}”][vc_column_inner column_width_percent=”100″ gutter_size=”2″ overlay_alpha=”50″ shift_x=”0″ shift_y=”0″ shift_y_down=”0″ z_index=”0″ medium_width=”0″ mobile_width=”0″ width=”1/3″ uncode_shortcode_id=”182232″][vc_custom_heading text_weight=”500″ uncode_shortcode_id=”648183″]Design Systems[/vc_custom_heading][vc_column_text uncode_shortcode_id=”302636″]In user interface design, I believe it’s crucial to develop a design system that sets a consistent visual language for a seamless and predictable user experience, while also offering the flexibility to customize designs to meet unique user needs.[/vc_column_text][/vc_column_inner][vc_column_inner column_width_percent=”100″ position_horizontal=”left” gutter_size=”2″ overlay_alpha=”50″ shift_x=”0″ shift_y=”0″ shift_y_down=”0″ z_index=”0″ medium_width=”0″ mobile_width=”0″ width=”1/3″ uncode_shortcode_id=”183089″][vc_custom_heading text_weight=”500″ uncode_shortcode_id=”113678″]Atomic Design Methodology[/vc_custom_heading][vc_column_text uncode_shortcode_id=”147801″]The Atomic Design Methodology, introduced by Brad Frost, streamlines creating design systems by breaking interfaces into reusable components such as atoms, molecules, organisms, templates, and pages. This modular approach guarantees scalability and consistency across designs, allowing easy combination of components for efficient layout creation. Standardized elements ensure a consistent visual appearance and behavior, enhancing user interface predictability and intuitiveness. Furthermore, Atomic Design encourages efficiency by fostering collaboration between designers and developers, enabling them to quickly build interfaces using predefined components.[/vc_column_text][/vc_column_inner][vc_column_inner column_width_percent=”100″ gutter_size=”2″ overlay_alpha=”50″ shift_x=”0″ shift_y=”0″ shift_y_down=”0″ z_index=”0″ medium_width=”0″ mobile_width=”0″ width=”1/3″ uncode_shortcode_id=”142760″][vc_custom_heading text_weight=”500″ uncode_shortcode_id=”569156″]Modular Design[/vc_custom_heading][vc_column_text uncode_shortcode_id=”462618″]Expanding on the principles from Atomic Design Methodology, I create designs that are modular and are therefore scalable, consistent, and efficient.

Scalability
Modular layouts can scale to accommodate additional content or features without sacrificing usability or visual coherence. As projects grow, components can be rearranged or expanded to meet new needs, ensuring sustainability and ease of maintenance.

Consistency
Modular layouts promote consistency in design and branding by establishing predefined patterns and guidelines for arranging components. This consistency enhances user familiarity and reduces cognitive load, leading to a more intuitive and cohesive user experience.

Efficiency
Modular layouts streamline the design and development process by providing reusable building blocks that can be quickly assembled to create new interfaces. This efficiency reduces time-to-market and allows teams to iterate on designs more rapidly, improving overall productivity and agility.[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_tab][/vc_tabs][/vc_column][/vc_row]