{"id":83058,"date":"2020-07-26T04:05:30","date_gmt":"2020-07-26T08:05:30","guid":{"rendered":"https:\/\/cherisha.net\/?post_type=portfolio&p=83058"},"modified":"2021-01-15T12:17:25","modified_gmt":"2021-01-15T16:17:25","slug":"design-lab","status":"publish","type":"portfolio","link":"https:\/\/cherisha.net\/portfolio\/design-lab\/","title":{"rendered":"DESIGN LAB"},"content":{"rendered":"
[vc_row row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”-2″ z_index=”0″ shape_dividers=””][vc_column width=”1\/1″][vc_column_text text_lead=”yes”]Design Task: <\/b>To launch the Design Lab officially before the fall 2018 semester on campus to increase student interactions in the space and increase awareness about resources offered at the NYU MakerSpace.<\/span><\/p>\n 1) Redesign of the MakerSpace website<\/b>: In order to highlight the offerings of the Makerspace, a redesign of the website was needed for better user interactions. It also involved creating a promotional video to increase awareness about the MakerSpace resources.<\/span><\/p>\n 2) Spatial design and branding of Design Lab:<\/b> This included designing the Design Lab logo, graphics for the pillar art, core components, banners, merchandise and vinyl window display. It also included organizing a Design Week to involve more students in the process of design thinking and share design resources.<\/span><\/p>\n Team: <\/b>Raksha Ravimohan, Cherisha Agarwal<\/span><\/p>\n Tools: <\/b>Adobe Illustrator, Adobe Photoshop, Adobe Premiere Pro, Sketch, InVision, Vinyl Cutter, Laser Cutter<\/span>[\/vc_column_text][\/vc_column][\/vc_row][vc_row row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”-2″ z_index=”0″][vc_column column_width_percent=”100″ gutter_size=”3″ overlay_alpha=”50″ shift_x=”0″ shift_y=”0″ shift_y_down=”-5″ z_index=”0″ medium_width=”0″ mobile_width=”0″ width=”1\/1″][vc_custom_heading text_size=”h3″ text_color=”color-482803″]FINAL DELIVERABLES<\/b>[\/vc_custom_heading][\/vc_column][\/vc_row][vc_row row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”-3″ z_index=”0″ shape_dividers=””][vc_column width=”1\/1″][vc_single_image media=”82873″ media_width_percent=”100″][\/vc_column][\/vc_row][vc_row][vc_column width=”1\/1″][vc_custom_heading text_size=”h3″]PART 1) REDESIGN OF THE MAKERSPACE WEBSITE<\/b>[\/vc_custom_heading][\/vc_column][\/vc_row][vc_row row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”-2″ z_index=”0″][vc_column width=”1\/1″][vc_column_text text_lead=”yes”]Along with Raksha Ravimohan, I worked on the redesign of the MakerSpace website. The original website of MakerSpace was a simple blog that displayed the various machines, training calendar and funding opportunities for students but it did not highlight the information about the Design Lab and other offerings of the MakerSpace well to the viewers. Users were often unclear about the purpose of the MakerSpace and how they could utilize the space to its fullest. New viewers were not sure of the goal of the space. In order to clarify all of this, we redesigned the website to improve the experience for students and new users who want to learn about the MakerSpace and utilize its facilities.<\/span>[\/vc_column_text][\/vc_column][\/vc_row][vc_row row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”-3″ z_index=”0″][vc_column width=”1\/1″][vc_single_image media=”82902″ media_width_percent=”100″][\/vc_column][\/vc_row][vc_row row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”-1″ z_index=”0″][vc_column width=”1\/1″][vc_custom_heading text_size=”h3″ text_color=”color-632047″]USER RESEARCH[\/vc_custom_heading][vc_column_text text_lead=”yes”]We spoke to a number of people to understand what people expected out of the MakerSpace and what needed to be improved on the website. <\/span>We started off by interviewing our stakeholders to understand what their vision of the product is and what is it trying to accomplish. We also spoke to them about what their perception of the user is and the technical constraints associated with the implementation of the site. <\/span>Our stakeholders included the following:<\/span><\/p>\n [\/vc_column_text][\/vc_column][\/vc_row][vc_row row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”-5″ z_index=”0″][vc_column width=”1\/1″][vc_custom_heading text_color=”color-149363″]<\/p>\n [\/vc_custom_heading][\/vc_column][\/vc_row][vc_row row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”-4″ z_index=”0″][vc_column width=”1\/1″][vc_single_image media=”82872″ media_width_percent=”100″][\/vc_column][\/vc_row][vc_row row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”-5″ z_index=”0″][vc_column width=”1\/1″][vc_custom_heading]<\/p>\n [\/vc_custom_heading][\/vc_column][\/vc_row][vc_row row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”-5″ z_index=”0″][vc_column width=”1\/1″][vc_column_text text_lead=”yes”]After noting down the stakeholder\u2019s perspective about the features of the product and technical constraints, we moved on to interview some students about their experience with the site. Our initial interviews were open-ended as we tried to understand their perception of MakerSpace and the website. The goal of the user interviews was to understand the following:<\/span><\/p>\n User Group #1: NYU Students<\/strong> who n<\/span>eeded to use the machines for academic work and projects, wa<\/span>nted to develop skills through events and workshops and were e<\/span>ager to go through the training and learn how to use the equipment<\/span><\/p>\n User Group #2: Non-NYU Guests<\/strong> who wanted to learn more about the space and needed to use the space for their own work, were e<\/span>ager to attend events and workshops open to the public and also included s<\/span>peaker and experts who have conducted workshops at the MakerSpace<\/span><\/p>\n These interviews helped us understand the frustrations faced by the users with the current website and what they expected could be improved. Based on all the information received from the interviews, we proceeded to synthesize the insights.<\/span>[\/vc_column_text][\/vc_column][\/vc_row][vc_row row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”-2″ z_index=”0″ shape_dividers=””][vc_column width=”1\/1″][vc_single_image media=”82885″ media_width_percent=”100″][vc_separator][\/vc_column][\/vc_row][vc_row][vc_column width=”1\/1″][vc_custom_heading text_size=”h3″ text_color=”color-143410″]INSIGHTS SYNTHESIS<\/b>[\/vc_custom_heading][\/vc_column][\/vc_row][vc_row row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”-2″ z_index=”0″][vc_column width=”1\/1″][vc_column_text text_lead=”yes”]By talking to the stakeholders and users, we were able to get a good idea of the gaps in the current website and the user experience was being impacted. Thus we synthesized all the insights received from the users and created personas to map the frustrations, goals, channels and motivations of each user category. Then we proceeded to map the user journeys to understand the pain points, opportunities, thoughts and feelings of each user while they tried to access the current website.<\/span>[\/vc_column_text][\/vc_column][\/vc_row][vc_row row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”-3″ z_index=”0″][vc_column width=”1\/1″][vc_single_image media=”82876″ media_width_percent=”100″][\/vc_column][\/vc_row][vc_row row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”-5″ z_index=”0″][vc_column width=”1\/1″][vc_custom_heading]<\/p>\n [\/vc_custom_heading][\/vc_column][\/vc_row][vc_row row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”-5″ z_index=”0″][vc_column width=”1\/1″][vc_column_text text_lead=”yes”]Based on our research and user interviews, we created three personas:<\/span><\/p>\n We identified the channels, goals and frustrations of all the 3 persona and mapped them out as follows:<\/span>[\/vc_column_text][vc_gallery el_id=”gallery-12-338-950″ type=”carousel” medias=”82893,82892,82891″ carousel_lg=”1″ carousel_md=”1″ carousel_sm=”1″ thumb_size=”sixteen-nine” gutter_size=”0″ media_items=”media|nolink|original” carousel_type=”fade” carousel_interval=”0″ carousel_navspeed=”400″ carousel_loop=”yes” carousel_nav=”yes” carousel_dots=”yes” carousel_dots_mobile=”yes” stage_padding=”0″ single_overlay_opacity=”50″ single_overlay_anim=”no” single_text_anim=”no” single_image_anim=”no” single_h_align=”center” single_padding=”2″ single_icon=”fa fa-search3″ single_border=”yes” 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=”eyI4ODY4X2kiOnsic2luZ2xlX3dpZHRoIjoiNCIsInNpbmdsZV9oZWlnaHQiOiI0In0sIjg4NjJfaSI6eyJzaW5nbGVfd2lkdGgiOiI0Iiwic2luZ2xlX2hlaWdodCI6IjQifSwiODg2MF9pIjp7InNpbmdsZV93aWR0aCI6IjQiLCJzaW5nbGVfaGVpZ2h0IjoiNCJ9LCIyNjIxOF9pIjp7InNpbmdsZV93aWR0aCI6IjQiLCJzaW5nbGVfaGVpZ2h0IjoiNCJ9LCIyNjIyNF9pIjp7InNpbmdsZV93aWR0aCI6IjQiLCJzaW5nbGVfaGVpZ2h0IjoiNCJ9LCIyNjIyMl9pIjp7InNpbmdsZV93aWR0aCI6IjQiLCJzaW5nbGVfaGVpZ2h0IjoiNCJ9LCIyNjIyOV9pIjp7InNpbmdsZV93aWR0aCI6IjQiLCJzaW5nbGVfaGVpZ2h0IjoiNCJ9fQ==” single_half_padding=”” single_no_background=””][\/vc_column][\/vc_row][vc_row row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”-3″ z_index=”0″ shape_dividers=””][vc_column width=”1\/1″][vc_custom_heading]<\/p>\n [\/vc_custom_heading][\/vc_column][\/vc_row][vc_row row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”-3″ z_index=”0″ shape_dividers=””][vc_column width=”1\/1″][vc_column_text text_lead=”yes”]The goal of creating this journey map was to analyze the user flow on the existing site and identify opportunities where the experience could be made better.<\/span>[\/vc_column_text][vc_gallery el_id=”gallery-189732″ type=”carousel” medias=”82890,82888″ carousel_lg=”1″ carousel_md=”1″ carousel_sm=”1″ gutter_size=”0″ media_items=”media|lightbox|original” carousel_interval=”3000″ carousel_navspeed=”400″ carousel_loop=”yes” carousel_nav=”yes” carousel_dots=”yes” carousel_dots_mobile=”yes” stage_padding=”0″ single_overlay_opacity=”50″ single_padding=”2″][\/vc_column][\/vc_row][vc_row row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”-2″ z_index=”0″][vc_column width=”1\/1″][vc_custom_heading text_size=”h3″ text_color=”color-742106″]IDEATION AND BRAINSTORMING<\/b>[\/vc_custom_heading][vc_column_text text_lead=”yes”]Once we had a clear idea about the users, their workflow, needs and frustrations, we proceeded to design the solution. This step began with a basic card sorting process to analyze the different features on the website.<\/span>[\/vc_column_text][\/vc_column][\/vc_row][vc_row row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”-5″ z_index=”0″][vc_column width=”1\/1″][vc_custom_heading]<\/p>\n [\/vc_custom_heading][\/vc_column][\/vc_row][vc_row row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”-5″ z_index=”0″][vc_column width=”1\/1″][vc_column_text text_lead=”yes”]From user interviews and stakeholder interviews, we listed the different features on sticky notes and grouped them into “Events”, “Machines” and “General”. After that, we included these points with the features of the existing site and grouped them into the same categories. This was done to combine all our gatherings and serve as a basis for the site map and information architecture.<\/span>[\/vc_column_text][\/vc_column][\/vc_row][vc_row row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”-3″ z_index=”0″][vc_column width=”1\/1″][vc_single_image media=”82904″ media_width_percent=”100″][\/vc_column][\/vc_row][vc_row row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”-3″ z_index=”0″ shape_dividers=””][vc_column width=”1\/1″][vc_custom_heading]<\/p>\n [\/vc_custom_heading][\/vc_column][\/vc_row][vc_row row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”-3″ z_index=”0″ shape_dividers=””][vc_column width=”1\/1″][vc_column_text text_lead=”yes”]From user interviews and stakeholder interviews, we listed the different features on sticky notes and grouped them into “Events”, “Machines” and “General”. After that, we included these points with the features of the existing site and grouped them into the same categories. This was done to combine all our gatherings and serve as a basis for the site map and information architecture.<\/span>[\/vc_column_text][\/vc_column][\/vc_row][vc_row row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”-3″ z_index=”0″][vc_column width=”1\/1″][vc_single_image media=”82875″ media_width_percent=”100″][\/vc_column][\/vc_row][vc_row row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”-2″ z_index=”0″ shape_dividers=””][vc_column width=”1\/1″][vc_single_image media=”82903″ media_width_percent=”100″][\/vc_column][\/vc_row][vc_row row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”-3″ z_index=”0″ shape_dividers=””][vc_column width=”1\/1″][vc_custom_heading]<\/p>\n [\/vc_custom_heading][\/vc_column][\/vc_row][vc_row row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”-3″ z_index=”0″ shape_dividers=””][vc_column width=”1\/1″][vc_column_text text_lead=”yes”]We presented the sitemap to our stakeholders and took them through the entire process and features that were laid out. After explaining the structure we had come up with, we also conveyed the reasoning’s behind these decisions. We also clarified few points that we were unsure of and needed their expert guidance. The feedback from the stakeholders was useful as it helped us fill some gaps, improved positions of some content and guided us to prioritize the various proposed features of the website. The discussion also helped us understand that even though stakeholders very often only worry about the end visual appeal of the product, it is important to go through the design process in detail to pick on nuances that might be missed out on otherwise. We maintained our case about creating wire frames and performing user testing even though it didn\u2019t seem important to our stakeholders. Based on the discussion, the revised sitemap is as seen above on the right.<\/span>[\/vc_column_text][vc_separator][\/vc_column][\/vc_row][vc_row row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”-2″ z_index=”0″][vc_column width=”1\/1″][vc_custom_heading text_size=”h3″ text_color=”color-482803″]PROTOTYPE AND TESTING<\/b>[\/vc_custom_heading][\/vc_column][\/vc_row][vc_row row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”-3″ z_index=”0″ shape_dividers=””][vc_column width=”1\/1″][vc_column_text text_lead=”yes”]After completing the sitemap and deciding on the information architecture, we started making low fidelity wireframes for the site to create the basic framework of the website and decide on the content layout. Once this was in place, we proceeded with user testing to get feedback.<\/span>[\/vc_column_text][\/vc_column][\/vc_row][vc_row row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”-3″ z_index=”0″][vc_column width=”1\/1″][vc_custom_heading]<\/p>\n [\/vc_custom_heading][\/vc_column][\/vc_row][vc_row row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”-3″ z_index=”0″][vc_column width=”1\/1″][vc_column_text text_lead=”yes”]We started making low fidelity wireframes for the site using Sketch, Illustrator and InVision. During this process, we had to look at several web design standards and what level of detail to provide on the wireframe. We were often concerned about how the site is going to be implemented and if the layout can be translated easily. So, we decided to keep the wireframe as basic as possible and concentrate only on the flow and organization of content. Here is the InVision<\/span> link<\/a>.<\/strong><\/span>[\/vc_column_text][\/vc_column][\/vc_row][vc_row row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”-2″ z_index=”0″][vc_column width=”1\/1″][vc_single_image media=”82907″ media_width_percent=”100″][\/vc_column][\/vc_row][vc_row row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”-3″ z_index=”0″ shape_dividers=””][vc_column width=”1\/1″][vc_custom_heading]<\/p>\n [\/vc_custom_heading][\/vc_column][\/vc_row][vc_row row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”-3″ z_index=”0″ shape_dividers=””][vc_column width=”1\/1″][vc_column_text text_lead=”yes”]We decided to test the wireframes on our potential users covering the 3 personas – \u201cStudent looking to attend events\u201d, \u201cStudents who use machines\u201d, \u201cPeople outside NYU looking to collaborate or get information\u201d.<\/span><\/p>\n We started off by preparing a list of tasks for the user based on our core offerings and some critical sections that were difficult to place on the site map. Since we were also in charge of developing the website, we made a list of changes based on priority (in terms of usability and implementation), so that we can get started with the pages that are confirmed.<\/span>[\/vc_column_text][\/vc_column][\/vc_row][vc_row row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”-3″ z_index=”0″][vc_column width=”1\/1″][vc_single_image media=”82905″ media_width_percent=”100″][\/vc_column][\/vc_row][vc_row row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”-3″ z_index=”0″ shape_dividers=””][vc_column width=”1\/1″][vc_single_image media=”82906″ media_width_percent=”100″][vc_separator][\/vc_column][\/vc_row][vc_row][vc_column width=”1\/1″][vc_custom_heading text_size=”h3″ text_color=”color-vyce”]DESIGN ITERATION<\/b>[\/vc_custom_heading][\/vc_column][\/vc_row][vc_row row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”-2″ z_index=”0″][vc_column width=”1\/1″][vc_column_text text_lead=”yes”]After testing the website with users and getting feedback through the various tasks, we were able to understand if the basic navigation and content structure make sense to people and if they are able to find the required information. Based on the feedback received, we came up with the following list of changes to make and then re-test the new structure.<\/span>[\/vc_column_text][\/vc_column][\/vc_row][vc_row row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”-3″ z_index=”0″][vc_column width=”1\/1″][vc_single_image media=”82887″ media_width_percent=”100″][\/vc_column][\/vc_row][vc_row row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”-3″ z_index=”0″ shape_dividers=””][vc_column width=”1\/1″][vc_custom_heading]<\/p>\n\n
\n
\n
Stakeholder Insights<\/h4>\n
User Interviews<\/b><\/h4>\n
\n
\n
\n
\n
Personas<\/h4>\n
\n
\n
\n
\n
Journey Mapping<\/h4>\n
Card Sorting<\/h4>\n
Sitemap<\/h4>\n
Stakeholder Discussion<\/b><\/h4>\n
Low Fidelity Wireframes<\/b><\/h4>\n
User Testing<\/b><\/h4>\n
Information Architecture<\/b><\/h4>\n