[et_pb_section fb_built=”1″ fullwidth=”on” _builder_version=”4.10.4″ _module_preset=”default” global_colors_info=”{}”][et_pb_fullwidth_post_title meta=”off” _builder_version=”4.10.4″ _module_preset=”default” background_color=”#201f1f” title_font_size_tablet=”” title_font_size_phone=”35px” title_font_size_last_edited=”on|phone” custom_css_post_title=”||||font-family: Inter;||font-style: normal;||font-weight: 900;||font-size: 54px;||line-height: 120%;||\/* or 65px *\/||text-align: center;||margin-left:40px;||margin-right:40px;||margin-bottom:40px;||color: #FFFFFF;||||text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);” global_colors_info=”{}”][\/et_pb_fullwidth_post_title][\/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”4.10.4″ _module_preset=”default” background_color=”#201f1f” global_colors_info=”{}”][et_pb_row _builder_version=”4.10.4″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.10.4″ _module_preset=”default” global_colors_info=”{}”][et_pb_divider color=”#FFFFFF” _builder_version=”4.10.4″ _module_preset=”default” global_colors_info=”{}”][\/et_pb_divider][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”1_5,3_5,1_5″ _builder_version=”4.10.4″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”1_5″ _builder_version=”4.10.4″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/cubmpd.ca\/storytellers\/wp-content\/uploads\/2021\/10\/xinpengliu.png” title_text=”xinpengliu” url=”https:\/\/cubmpd.ca\/storytellers\/about-us\/#Xinpengliu” _builder_version=”4.10.4″ _module_preset=”default” custom_css_main_element=”width: 48px;||height: 48px;” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”3_5″ _builder_version=”4.10.4″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.10.4″ _module_preset=”default” positioning=”relative” horizontal_offset=”-137px” horizontal_offset_tablet=”0px” horizontal_offset_phone=”0px” horizontal_offset_last_edited=”on|phone” custom_margin=”||||false|false” global_colors_info=”{}” custom_css_main_element_last_edited=”on|desktop”]<\/p>\n
[\/et_pb_text][\/et_pb_column][et_pb_column type=”1_5″ _builder_version=”4.10.4″ _module_preset=”default” global_colors_info=”{}”][et_pb_social_media_follow _builder_version=”4.10.4″ _module_preset=”default” text_orientation=”right” global_colors_info=”{}”][et_pb_social_media_follow_network social_network=”instagram” url=”https:\/\/www.instagram.com\/jeremy.liuxinpeng\/” _builder_version=”4.10.4″ _module_preset=”default” background_color=”#ea2c59″ global_colors_info=”{}” follow_button=”off” url_new_window=”on”]instagram[\/et_pb_social_media_follow_network][et_pb_social_media_follow_network social_network=”linkedin” url=”https:\/\/www.linkedin.com\/in\/liuxinpeng\/” _builder_version=”4.10.4″ _module_preset=”default” background_color=”#007bb6″ global_colors_info=”{}” follow_button=”off” url_new_window=”on”]linkedin[\/et_pb_social_media_follow_network][\/et_pb_social_media_follow][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.10.4″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.10.4″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.10.4″ _module_preset=”default” custom_css_main_element=”font-family: Inter;||font-style: normal;||font-weight: normal;||font-size: 20px;||line-height: 170%;||\/* or 34px *\/||||||color: #FFFFFF;” global_colors_info=”{}”]<\/p>\n
I joined the BMPD Storyteller team to help create the vehicle for sharing stories. I was tasked with the initial design of the website and providing visual ideas to aid in storytelling. Over two months, I worked hand-in-hand with Professor Katie Graham, Jada Rodgers, and Max Peacock to conceptualize the website and build its design system. During my time on the BMPD Storyteller team, I brought the design to the forefront of product and team decisions. In this story, I will introduce the design process and my future ideas for this project.<\/span><\/p>\n Prototyping and sketching are important in user-centered design. Such prototyping can significantly reduce development time by confirming the design in advance, and in turn allows us to conduct extensive user testing to obtain comprehensive feedback. I created the initial sketch in Figma on the product side – a vector graphics editor and prototyping tool. Figma is a free and easy-to-use software for creating prototypes, which is available for both desktop and mobile.<\/span><\/p>\n Prof. Katie provided her envision of the website layout at the beginning of the project. Based on this, I made some modifications and structural adjustments based on the sketches. As the image shown below is the first version of my draft design for this project. All images and text used in the prototype drawings are from Carleton University and other accessible copyrighted sources on the Internet and remain the property of the original creator.<\/span><\/p>\n [\/et_pb_text][et_pb_image src=”https:\/\/cubmpd.ca\/storytellers\/wp-content\/uploads\/2021\/10\/Prof.-Katies-Quick-Website-Layout-Sketch.png” title_text=”Prof. Katie\u2019s Quick Website Layout Sketch” align=”center” admin_label=”Image Credit: Carleton U ” _builder_version=”4.10.4″ _module_preset=”default” custom_margin=”||5px||false|false” custom_padding=”||0px||false|false” custom_css_main_element=”text-align: center;” global_colors_info=”{}”][\/et_pb_image][et_pb_text _builder_version=”4.10.4″ _module_preset=”default” custom_css_main_element=”font-family: Inter;||font-style: normal;||font-weight: normal;||font-size: 20px;||line-height: 170%;||\/* or 34px *\/||||||color: #FFFFFF;||” global_colors_info=”{}”]<\/p>\n <\/span><\/p>\n The initial version is as simple and easy to use as possible. I only used some primary colours: black, white and blue as the overall colour scheme of the website. Thus, it is efficient to improve the user’s efficiency. <\/span>When choosing a website layout, I opted for a multiple page design over a scrolling one page one. Since the project will have different categories and growing content, a scrolling page would become too complex and difficult to navigate.<\/span> Therefore, I set up the home page as an easily updatable aggregated information page, with secondary main pages for separate categories.<\/span><\/p>\n [\/et_pb_text][et_pb_image src=”https:\/\/cubmpd.ca\/storytellers\/wp-content\/uploads\/2021\/10\/Desgin-Draft-Version-1.0.png” title_text=”Desgin Draft Version 1.0″ align=”center” admin_label=”Image Credit: Carleton U ” _builder_version=”4.10.4″ _module_preset=”default” custom_margin=”||5px||false|false” custom_padding=”||0px||false|false” custom_css_main_element=”text-align: center;” global_colors_info=”{}”][\/et_pb_image][et_pb_text _builder_version=”4.10.4″ _module_preset=”default” custom_css_main_element=”font-family: Inter;||font-style: normal;||font-weight: normal;||font-size: 20px;||line-height: 170%;||\/* or 34px *\/||||||color: #FFFFFF;||” global_colors_info=”{}”]<\/p>\n