https://www.adifine.com/non-profit-volunteer-portal daily 0.75 2020-11-04 https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1600184051971-ELPW3ENI5JL8OQKIZBI0/Laptop+Mockup.png Non Profit Volunteer Portal https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598975232023-CJITXXUN70YMD83HPU99/109258959_2091224011022670_5013910279763239194_o.jpg Non Profit Volunteer Portal https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1600184076710-6Z7WL3D4468F0K2EVZ67/D-CreateProfile-BLANK-OUT.png Non Profit Volunteer Portal Create a Profile https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1600184108474-QVODN8NI2N3GW9U1FMQV/D-EventList-IN.png Non Profit Volunteer Portal https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598975374094-ODR42TX2DEIRQ2Y8MSTU/image1%2816%29.jpeg Non Profit Volunteer Portal https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1600185311863-AP9L1YATV5RXH8BHKOPW/D-EventList-IN.png Non Profit Volunteer Portal https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1600184136251-VUWXHD9WGPHUQABD38H4/D-Step1-OUT.png Non Profit Volunteer Portal Submit a Project https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598975404328-58KGEM39Z35EKT0UANEY/10421642_535590893252664_2659883358345893424_n.jpg Non Profit Volunteer Portal https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598975426821-DER90GNUZHNCFIC49DFV/10583009_548708571940896_7161986232448354584_o.jpg Non Profit Volunteer Portal https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1597946698963-1O0GDDJ0T4O97KGFB6R0/CurrentCommunication.png Non Profit Volunteer Portal https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1597946753186-8Q2RLP0HD5XRQUQM4R8I/Low+Projects.png Non Profit Volunteer Portal https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598029861102-8DJXZI9CZG3BDIOQB1W9/image-asset.png Non Profit Volunteer Portal https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1604511534567-YHT1I7FP077HVCMI4QS1/IncreasedVisibility.png Non Profit Volunteer Portal https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1604511780595-DG22W0ONJWBHZFSUBM1I/Formal+Registration.png Non Profit Volunteer Portal https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1604512001114-WN08G2MB5KZ7HQMEMKOD/Delayed+Sign+In.png Non Profit Volunteer Portal https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1604513001070-U4SBCGD67O9WGOVDGN6Y/Create+an+Account.png Non Profit Volunteer Portal https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1604513083388-V94W6LVWH4KYZNSJEOHA/All+the+Details.png Non Profit Volunteer Portal https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1604513323234-5IBT3PK1MPF6BHFUCRHA/Share+Event.png Non Profit Volunteer Portal https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1604513458793-QI2JFSXIZTDMSPL8ZV3Z/Project+Submittal.png Non Profit Volunteer Portal https://www.adifine.com/leisure-cycling-assistant daily 0.75 2020-09-18 https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598213798503-90L5OVG1D1RD3AHB2G9O/Reveal.png Leisure Cycling Assistant https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598138642331-O6OXB5QCD0OV1NQTDYQ6/Set+Preferences.png Leisure Cycling Assistant - Set Preferences Users can filter bike paths based on location, their general goals, and their specific preferences such as distance, path type, grade, and path conditions. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598138740697-K82YKMCT32K1WIHUM2K5/Curated+List.png Leisure Cycling Assistant - Curated List of Bike Paths Based on the user’s preferences, they will receive a refined list of bike paths that meet their needs. Along with a list of potential paths, they will see the trails on a map view. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598187190003-EGSL7SDFANCHWB0G2PTK/Add+Stops.png Leisure Cycling Assistant - Add Waypoints to Route Before or during a bike ride, users can add to their ride by pulling up the overlay. Options include facilities, nearby points of interest, and food and drink. Once they select a stop and add to ride, their route will update on the map view. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598187214680-XBMTNHSJ9RDEBZBT0ECS/Rate+and+Review.png Leisure Cycling Assistant - Rate and Review Once they finish their bike ride, they will be prompted to rate and review their ride by giving it a star rating, selecting route attributes and leaving comments. This information will help inform other riders and continuously keep path information up to date. https://www.adifine.com/hitch-hiking-revamped-full daily 0.75 2020-11-21 https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1600782529446-ZGHM73ANFN1LY8MBB61G/smartmockups_ke7nb6dz.png Hitch Hiking Revamped Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1600782795344-Y280ZDL0XNPOKCLRYWLA/Home+-+D.png Hitch Hiking Revamped Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1600782733905-QN9CPU1XQX82MCZT4FLG/Sign+In+-+Desktop.jpg Hitch Hiking Revamped Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1600782735999-X4XKYM3QL95S9328J7DZ/Let%27s+Get+to+Know+You+-+D.jpg Hitch Hiking Revamped Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1600782738241-ZID4GGMMZ982BZC424D5/Let%27s+Get+to+Know+You+-+Text-D.jpg Hitch Hiking Revamped Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1600782739004-1UGC1SWCA9CHTVYZSJ7U/My+Profile+-+D.jpg Hitch Hiking Revamped Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1600782736277-2XQSVLFK5BKM7H108MUX/Find+My+Ride+-+Select+Cal+Date+-+D.jpg Hitch Hiking Revamped Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1600782740807-C1A7HQTUPFLR69SBBV95/Who%27s+leaving_++-+D.jpg Hitch Hiking Revamped Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1600782842686-QAH40HJKWC57HBVLLXWS/Ride+Information+-+D.jpg Hitch Hiking Revamped Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1600782740039-WV8HCX7MKDCFE79NICPX/Hoooray%21+-+D.jpg Hitch Hiking Revamped Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1600440648831-DNO2PE4N4YQ245ALIW52/scott-webb-O0T1SIgHAfM-unsplash.jpg Hitch Hiking Revamped Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598213093825-AV9005XTTGE0MPKAOYSA/User+Research.png Hitch Hiking Revamped Full Designed by Freepik https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1599670150050-I8SFJZ4LGC1BAHLZ1GTM/Safety+and+Familiarity.png Hitch Hiking Revamped Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1599670164496-P5W9UHV4R09X8OBSKOFT/Social+Aspect.png Hitch Hiking Revamped Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1599670174544-1Y2FOKY90WD1Y0X3R3Y4/Safety.png Hitch Hiking Revamped Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1599670185899-4AAZZSFBLORWBRWCHNW1/Scheduling.png Hitch Hiking Revamped Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598214112010-BUC4VL7GHLNTYBRA9IOZ/P3a+-+Persona.png Hitch Hiking Revamped Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1600782230172-VMGPPL6OAL8T5CAC3W0E/P3a+-+Transportation+%283%29.jpg Hitch Hiking Revamped Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1599670206513-2178TF9BU4MD50B3FTYM/Goals.png Hitch Hiking Revamped Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1599670215181-0EJ7Q7CYHMCA7S2ZC0LR/Social+Aspect.png Hitch Hiking Revamped Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1599670223696-7S6VEGS8CS4ZOU3PX5Q0/Safety.png Hitch Hiking Revamped Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1599670236309-VZJIK6GPMIV7S79N0GN9/Facilities.png Hitch Hiking Revamped Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598218633503-B6DZOHTWX0LI7J4MYO7S/Sketches.png Hitch Hiking Revamped Full - Sketches To kick off our design and gain different perspectives, we held a design studio session with our development team that involved strictly timed sketching. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598229996086-P1SSF06TXDME8ZDLPYQZ/Mid+Fi.png Hitch Hiking Revamped Full - Mid-Fidelity After the design studio session with our development team, we gathered our low-fidelity sketches and proceeded to create a clean, grey-scale mobile web design. We included our must have features and pulled layout ideas from the design studio session, such as a list view for the Select a Ride screen. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598230059612-0K1S8MNY1YFSZO3LJQLA/Hi-Fi+Mobile.png Hitch Hiking Revamped Full - Hi-Fidelity We moved from mid-fidelity to hi-fidelity by adding color and branding. Hitch hiking and carpooling are old school concepts, so we branded ourselves as a revamped retro tool. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598230125689-JU66FQT8T0HTGQ8ORLIV/smartmockups_ke7nb6dz.png Hitch Hiking Revamped Full - Desktop Design After iterating on the mobile design, we created a desktop version of the site. With more screen real estate, we were able to play with the display of information a bit while making sure there was a clear connection between the mobile and desktop views. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598303468617-LNY1LSOSY6W3ENHESQ2F/Most+Difficult+Task.png Hitch Hiking Revamped Full - The Most Difficult Task Participants had the most difficultly with task 3 during both the mid-fi and hi-fi usability tests. In mid-fi, participants did not notice the web browser back button to exit the Driver Information screen and navigate back to the Ride Information screen to continue to “Request a Ride”. To address this in hi-fi we updated the Driver Information screen to be a slide up overlay on the Ride Information screen, so that users could easily navigate back by sliding the overlay down. This was in effort to give the user more context as to where they were within the site. While this seemed like a good solution, based on the second round of testing, most users didn’t notice the Driver Information overlay and instead tapped on “Contact Driver”. In our next iteration we plan to start the overlay higher on the screen to grab users' attention. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598284117943-3XNPPG3SI2ZU6YHDCDV8/Reveal.png Hitch Hiking Revamped Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598306175188-76R0MUS51MKQY75ZADEH/Set+Preferences.png Hitch Hiking Revamped Full - Search for Rides Students can search for rides based on their pick-up and drop-off locations are well as a date that works with their exam schedule. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598306209335-YG9G65FUSS1ZFWA3D16H/Curated+List.png Hitch Hiking Revamped Full - View Available Rides After putting in their search criteria, they will get a list of potential carpools to join, which they can sort by price, date, or distance from their destination. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598306256522-HWMSF6YBO3IAIURWXKW2/Add+Stops.png Hitch Hiking Revamped Full - Carpool Information Once they select a specific ride, they can view the ride logistics, confirmed passengers, and driver information. They also can contact the driver and request a ride. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598306350821-AWGA53LK2EMQ5VJ6TZY3/Drivers+Profile.png Hitch Hiking Revamped Full - Driver’s Information Students can get familiar with their driver by viewing their bio, a recent review, and the carpool amenities. The green checkmark indicates they are verified and go to the same school. https://www.adifine.com/brooklyn-public-library daily 0.75 2020-09-18 https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1599060169319-IRHYLFV7GBYY2CH938ZG/image-asset.png Brooklyn Public Library Our team set out to explore and discover ways to improve the patron’s navigation experiences on the website. We studied the existing client website, as pictured here, extensively through a tree study, open and closed card sorts, and a heuristic evaluation. We then took our findings from the existing website and created a proposed navigation design. This update was then also tested via a tree study and closed card sort, allowing us to compare the results to the existing website results. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598911989237-E314SS6R4YE5K7X5IHXQ/smartmockups_kej2tg3k.png Brooklyn Public Library - Primary Navigation Expanded to 6 categories, the primary navigation now runs horizontally at the top of the page rather than vertically on the left side. The search bar has been made less prominent and moved to the utility bar to encourage the use of the primary navigation. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1599066049459-U9K11J3SA7YRDOD8ZSHY/smartmockups_kej2ty6s.png Brooklyn Public Library - Secondary Navigation Hovering over or clicking on a primary navigation item will open the secondary navigation menu. Secondary navigation items have been organized under sub-headings to group the numerous items together. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598912067464-X8SUINCJH9X0R82BPWZJ/smartmockups_kej2uhzk.png Brooklyn Public Library - Breadcrumbs and Color Coding As the user navigates through the site, they will know where they are through the addition of breadcrumbs below the BPL logo. Additionally, color coding has been used to group all pages within a primary navigation category; Books & Media are green, Digital Tools are periwinkle, Services are red, and so on. To help our persona Kelley find titles that are available now, we added a filtering option under new arrivals for Available Now. https://www.adifine.com/non-profit-volunteer-portal-full daily 0.75 2020-11-21 https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1600184051971-ELPW3ENI5JL8OQKIZBI0/Laptop+Mockup.png Non Profit Volunteer Portal Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598975232023-CJITXXUN70YMD83HPU99/109258959_2091224011022670_5013910279763239194_o.jpg Non Profit Volunteer Portal Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1600184076710-6Z7WL3D4468F0K2EVZ67/D-CreateProfile-BLANK-OUT.png Non Profit Volunteer Portal Full Create a Profile https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1600184108474-QVODN8NI2N3GW9U1FMQV/D-EventList-IN.png Non Profit Volunteer Portal Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598975374094-ODR42TX2DEIRQ2Y8MSTU/image1%2816%29.jpeg Non Profit Volunteer Portal Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1600185311863-AP9L1YATV5RXH8BHKOPW/D-EventList-IN.png Non Profit Volunteer Portal Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1600184136251-VUWXHD9WGPHUQABD38H4/D-Step1-OUT.png Non Profit Volunteer Portal Full Submit a Project https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598975404328-58KGEM39Z35EKT0UANEY/10421642_535590893252664_2659883358345893424_n.jpg Non Profit Volunteer Portal Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598975426821-DER90GNUZHNCFIC49DFV/10583009_548708571940896_7161986232448354584_o.jpg Non Profit Volunteer Portal Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1597946698963-1O0GDDJ0T4O97KGFB6R0/CurrentCommunication.png Non Profit Volunteer Portal Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1597946753186-8Q2RLP0HD5XRQUQM4R8I/Low+Projects.png Non Profit Volunteer Portal Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1597949678746-DVUA7JLPLK2ECBPQQM1S/Screen+Shot+2020-08-11+at+4.41.31+PM.png Non Profit Volunteer Portal Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1600195832022-RHGJCGQ0ZGQ61NUMD98R/Discovery.png Non Profit Volunteer Portal Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1600195841213-ZPASIOI4F5RZDBVCLOCM/Specific+Information.png Non Profit Volunteer Portal Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1600195851767-D5SYDWOLQRDDBK3X8WGZ/Other+Volunteers.png Non Profit Volunteer Portal Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1600195863062-GASQ4OTAQNSSWQW42O3G/Location.png Non Profit Volunteer Portal Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598027576242-IRHXCPMEX1LQRV82C216/image-asset.png Non Profit Volunteer Portal Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1600780655830-0M6841R85SI8M4KEGA47/Screen+Shot+2020-09-22+at+9.17.23+AM.png Non Profit Volunteer Portal Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1600196090684-IIOGVP4CZTT05J6N1DKT/Discovery.png Non Profit Volunteer Portal Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1600196100010-YPQLT636DXFSN9PO9MCL/Specific+Information.png Non Profit Volunteer Portal Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1600196115691-3ZD6U0IA24SADF87GDAE/Other+Volunteers.png Non Profit Volunteer Portal Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1600196126948-8XVKGT13VAOVQDWC1N1N/Location.png Non Profit Volunteer Portal Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598028011030-NS99T4U3FBFAMBFBL5FS/Sketches.png Non Profit Volunteer Portal Full - Sketches To kickstart our design, we held a design studio session with our client. Using timed sketching sessions, we were able to generate initial ideas that focused on our prioritized list of features for a mobile web design. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598028369200-EMLJG43LAKLRLIUQUYCD/Mid+Fi.png Non Profit Volunteer Portal Full - Mid-Fidelity We moved from pen and paper to Figma by starting with a grey scale design to flesh out the functionality of the product. I focused on the volunteer event registration process while my teammates focused on account creation and project proposal processes. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598028422986-NQ2MC6SFOR5IRDG32VGJ/Hi+Fi.png Non Profit Volunteer Portal Full - Hi-Fidelity, Round 1 Next, we incorporated a branding strategy including a neutral color palette, familiar fonts, and a refined logo. Our goal was to let the content be the main focus on the design. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598028497934-AA0D879PGFYZIACZCX8R/Hi+Fi+Round+2.png Non Profit Volunteer Portal Full - Hi-Fidelity, Round 2 After discussions with our client, we realized we had veered too far from the original Project Petals brand and aesthetic. We rebranded the Petal Portal by added bright colors, refined button sizes, and went back to the original logo. We also added the option to explore volunteer events via a map view, in addition to the list view. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598028669186-CKBY9U4L8B2CDTDCP2VQ/Desktop.png Non Profit Volunteer Portal Full - Desktop Design After iterating on the mobile web design until we received direct success testing on each task, we created a desktop web version of the site. With more screen real estate, it has the same functionality as the mobile version in a landscape layout. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598028946601-HQ3TK7CSU3FW0PWOPGZN/HomePage.png Non Profit Volunteer Portal Full - The Most Difficult Task Through these tests we uncovered that participants had the most difficulty with the create an account process. Each time we updated the location of the sign in / up button or updated language on buttons on the home screen, participants continued to mainly click on “I want to Volunteer” or “Browse Events” first. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598029362876-0ADG55M080H23D1NPXK0/100Success.png Non Profit Volunteer Portal Full - How We Addressed This Based on this feedback, we created an additional path for users to sign in / up, which would allow them to click on “Browse Events”, view a specific event, and only if they attempted to register to volunteer would they be prompted to sign in. This allows users to take a path more natural to them and increases project visibility. With this path added, users’ direct success rate increased by 50% from the original design to 100%. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598029861102-8DJXZI9CZG3BDIOQB1W9/image-asset.png Non Profit Volunteer Portal Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1599667358642-WYRB7U6EGATZ0TQ406RF/image-asset.png Non Profit Volunteer Portal Full Increased Event Visibility Anyone viewing the site can browse the list of events and view all public details for an event, including the specific tasks to expect and what to bring. Some information is blurred out to protect privacy. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598030185434-7IT6GGZO7PKE6AX30YY6/Formal+Registration.png Non Profit Volunteer Portal Full - Formal Registration A CTA button to “Volunteer”, with a statement of how many spots are left, both to limit the numbers of volunteers to small groups for COVID prevention and to create a sense of pressure for users to register through the site. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598030249003-YGBVTLWJ4COGH9VF2I1E/image-asset.png Non Profit Volunteer Portal Full Delayed Sign In Users will not be prompted to sign in until we need them to, which occurs when they want to register for an event. By moving account sign in to a secondary priority, we allow users to view the details they need without anything to block their path. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598030306769-INYZH7DAVAJ4D8T5KLBK/image-asset.png Non Profit Volunteer Portal Full - Account Creation In order to register as a volunteer, users will need to create an account. They will enter in some basic information such as a photo of themselves, their location, and select their skills and experience. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598030352813-A3RLF0YNY18E7QFBO0DM/All+the+Details.png Non Profit Volunteer Portal Full All the Details Once signed in, users will be able to see all the details they may need, such as date and time, location, specific tasks, what to bring, organizer contact information, other volunteers, and photos. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598031041092-IR0JGR1WW3RM5RUL28SW/image-asset.png Non Profit Volunteer Portal Full - Share Events Each event page will have a direct way to share it through social media and email, allowing users to share events with their friends and family, and administrators to provide direct links for event registration. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598031089890-3YNKGEE2PV13XHWVH4IO/image-asset.png Non Profit Volunteer Portal Full Submit a Project In three easy steps, anyone can submit a potential opportunity to Project Petals to review. All they need to do is determine if it is a public space, upload photos and videos of the area, and add a few details. User’s location will auto-fill based on their GPS location. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1600781228860-AM8QMRM0FUR25SJD6BB1/image-asset.png Non Profit Volunteer Portal Full https://www.adifine.com/leisure-cycling-assistant-full daily 0.75 2020-11-21 https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598135864176-SBAI371HV2XONMGBI79D/Screen+Shot+2020-08-22+at+6.37.33+PM.png Leisure Cycling Assistant Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598136219642-QXML12YDS5IY8HPO7D53/Strava.png Leisure Cycling Assistant Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598186119623-X0XZYS6XPDJ702444G5C/Competitve+Feature+Analysis.png Leisure Cycling Assistant Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598135306907-7B3LU71EQROWSH15RQKG/User+Research.png Leisure Cycling Assistant Full Designed by Freepik https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1599669614906-E3NZ5O2ZGVPO1XS2U5UX/image-asset.png Leisure Cycling Assistant Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1599669625562-AV6K0CND8NT1PG7RVEPA/Safety.png Leisure Cycling Assistant Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1599669636544-XFU94DWUMVZOD57LXVTN/Facilities.png Leisure Cycling Assistant Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598131987097-1FHWH47P4YKMCG6JGCQ0/Persona.png Leisure Cycling Assistant Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1600781721590-QQIR3A4V3E6ANYMV4GWW/User+Journey+Exisiting.png Leisure Cycling Assistant Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1599669649690-UJF5DBWTA8RXFLRZUQC6/Goals.png Leisure Cycling Assistant Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1599669658779-2CXMF8RHKG3FSL5SHMFM/Safety.png Leisure Cycling Assistant Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1599669667523-BA55B4LNFZKX6CUTA4Y1/Facilities.png Leisure Cycling Assistant Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598131913203-M8KCCSARW8PIAPCWB6KG/Screen+Shot+2020-08-22+at+5.31.32+PM.png Leisure Cycling Assistant Full - Sketches To jumpstart our design process, we conducted a design studio session internally, to create quick sketches in a highly time-constrained setting. This helped us get some initial ideas on paper and build on each other’s designs. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598131194566-TLNMPR3GOYWUNK1QL4KV/Mid-Fidelity.png Leisure Cycling Assistant Full - Mid-Fidelity Building upon our initial sketches from our design studio session, we proceeded to create our mid-fidelity design using Figma. These are digital, grayscale versions of the design, with the main intention of determining the size and spacing of elements as well as the text we plan to incorporate into each screen. I focused on the bike path options, selected bike path, and add to your ride screens. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598125119484-0V57851RZQM6N71A3JG3/Hi-Fidelity.png Leisure Cycling Assistant Full - Hi-Fidelity Next, we introduced a color pallette, typography, and imagery. We branded ourselves as a family friendly app that encourages all to get outside and take advantage of good weather. We used a dark teal green as our main color to represent getting outdoors. In general, color was used minimally to ensure the main focus of the app were the bike paths themselves, depicted through imagery, language, and icons. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598124813070-4ZD1HNBI72ZHA8JSJ709/Testing+Changes.png Leisure Cycling Assistant Full - The Most Difficult Tasks Task 2) Through these usability tests we uncovered that participants had trouble finding the button to start their ride, as the gps icon was confusing and did not stand out to them. We updated the start button from the icon to the word “START”. Task 3) Some users wanted to add stops to their route by interacting with the map view rather than using the “Add to your ride” slide up overlay. In our next iteration of the design, we will look to add interactivity to our map view to account for this. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598213798503-90L5OVG1D1RD3AHB2G9O/Reveal.png Leisure Cycling Assistant Full https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598138642331-O6OXB5QCD0OV1NQTDYQ6/Set+Preferences.png Leisure Cycling Assistant Full - Set Preferences Users can filter bike paths based on location, their general goals, and their specific preferences such as distance, path type, grade, and path conditions. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598138740697-K82YKMCT32K1WIHUM2K5/Curated+List.png Leisure Cycling Assistant Full - Curated List of Bike Paths Based on the user’s preferences, they will receive a refined list of bike paths that meet their needs. Along with a list of potential paths, they will see the trails on a map view. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598187190003-EGSL7SDFANCHWB0G2PTK/Add+Stops.png Leisure Cycling Assistant Full - Add Waypoints to Route Before or during a bike ride, users can add to their ride by pulling up the overlay. Options include facilities, nearby points of interest, and food and drink. Once they select a stop and add to ride, their route will update on the map view. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598187214680-XBMTNHSJ9RDEBZBT0ECS/Rate+and+Review.png Leisure Cycling Assistant Full - Rate and Review Once they finish their bike ride, they will be prompted to rate and review their ride by giving it a star rating, selecting route attributes and leaving comments. This information will help inform other riders and continuously keep path information up to date. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1600781938825-P13ZVFUZJPMFT3VBRUO7/image-asset.png Leisure Cycling Assistant Full https://www.adifine.com/hitch-hiking-revamped daily 0.75 2020-09-18 https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1600440648831-DNO2PE4N4YQ245ALIW52/scott-webb-O0T1SIgHAfM-unsplash.jpg Hitch Hiking Revamped https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598284117943-3XNPPG3SI2ZU6YHDCDV8/Reveal.png Hitch Hiking Revamped https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598306175188-76R0MUS51MKQY75ZADEH/Set+Preferences.png Hitch Hiking Revamped - Search for Rides Students can search for rides based on their pick-up and drop-off locations are well as a date that works with their exam schedule. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598306209335-YG9G65FUSS1ZFWA3D16H/Curated+List.png Hitch Hiking Revamped - View Available Rides After putting in their search criteria, they will get a list of potential carpools to join, which they can sort by price, date, or distance from their destination. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598306256522-HWMSF6YBO3IAIURWXKW2/Add+Stops.png Hitch Hiking Revamped - Carpool Information Once they select a specific ride, they can view the ride logistics, confirmed passengers, and driver information. They also can contact the driver and request a ride. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598306350821-AWGA53LK2EMQ5VJ6TZY3/Drivers+Profile.png Hitch Hiking Revamped - Driver’s Information Students can get familiar with their driver by viewing their bio, a recent review, and the carpool amenities. The green checkmark indicates they are verified and go to the same school. https://www.adifine.com/brooklyn-public-library-full daily 0.75 2020-09-18 https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1599060169319-IRHYLFV7GBYY2CH938ZG/image-asset.png Brooklyn Public Library Full Our team set out to explore and discover ways to improve the patron’s navigation experiences on the website. We studied the existing client website, as pictured here, extensively through a tree study, open and closed card sorts, and a heuristic evaluation. We then took our findings from the existing website and created a proposed navigation design. This update was then also tested via a tree study and closed card sort, allowing us to compare the results to the existing website results. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598558669717-3Y7PLPPNXTAX1PHQFBIR/Competitive+Matrix%403x.png Brooklyn Public Library Full - Competitive Matrix In order to identify trends, standards, and best practices, we conducted a series of competitive analyses. A competitive matrix was generated to visually rank the organizations that have similar value propositions to Brooklyn Public Library, on a spectrum of two measurable parameters: cost and service specificity. Our competitive matrix indicated that Brooklyn Public Library (shown in color) is the most inexpensive entity that offers the most varieties of services. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598884194650-NLRFJZLTHFDWLYQZTI02/Screen+Shot+2020-08-31+at+10.29.43+AM.png Brooklyn Public Library Full - Feature Analysis We conducted a feature analysis, comparing the Brooklyn Public Library to some of its competitors and comparators to assess the website offerings and shortcomings. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598909472713-7GM3M4TXPFOSKLAOEMT3/image-asset.png Brooklyn Public Library Full - Site Map, Existing The existing navigation has 4 primary categories; Borrow, Learn, Attend and More. There are over 60 secondary navigation items under the primary categories. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598909686629-Z7BSGJ0OKMC3XZLRKEFP/image-asset.png Brooklyn Public Library Full - Heuristic Evaluation To assess the current state of the website against best practices, we undertook a heuristic evaluation of the existing site using Abby’s Method. Some of the main takeaways were: Findable - Many secondary navigation items are greyed out and displayed in paragraph form, separated by commas. This makes it extremely difficult for the user to quickly parse through the list of pages. Clear - The BPL Target demographics’ grade and reading level were considered, however some labels are unclear in their wording, regardless of the reading level. Communicative - Within the site, the user’s location is not communicated as they progress through a task, therefore they might get lost or confused throughout the process. Controllable - Some pages open into new browser tabs, while others remain in the current tab. Inconsistencies such as this provide the user with less perceived control on how the site works. Additionally, some filtering options within the catalog search do not function as intended, leaving the user frustrated and not in control. The repeated video loop on the home screen is distracting and difficult to turn off. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598909949349-JVO782R45EID5IT576EU/image-asset.png Brooklyn Public Library Full - Our Target User Our target persona, provided to us, is Kelley. She is a 28 year old art director living in Brooklyn who wants to know which non-fiction titles are available now. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598909993227-URG2SGT5V0K8IUVI2J10/image-asset.png Brooklyn Public Library Full - Tree Study on Existing Website A tree study was conducted in order to evaluate the effectiveness of the site’s current labeling taxonomy. Three scenarios and tasks, modeled after our persona Kelley, were chosen to examine participants directness and time on task. Task 1 - Browse non-fiction latest releases Task 2 - Find a virtual book club Task 3 - Make a single contribution of $35 to the Brooklyn Public Library Participants had the most difficulty with Task 1. First-click data indicated that 75% of first clicks began directly, implying a breakdown in the secondary navigation. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598989431369-FVMURYQY7UJ1JLDSSIIW/Closed+Sort+-+Ex.png Brooklyn Public Library Full - Card Sorting on Existing Website Our team used the research technique of card sorting, both open and closed, to help us understand users’ mental models and how they might sort information or want to find information on the BPL’s website. Closed: Only 36% of the secondary level cards were placed inside the existing primary categories. Labeling seemed to lead to confusion about the content of information within respective pages. Open: Participants wanted items categorized into more than the existing 4 categories to break down the numerous services and products provided by the BPL into more manageable and understandable categories. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598910670212-ZZDTWKNY1DYH1WK2NVV1/Screen+Shot+2020-08-31+at+5.50.55+PM.png Brooklyn Public Library Full - User Flow on Existing Website We created a user flow of the potential paths a user can take through the existing website navigation when trying to find a non-fiction, newly released title that is available now. Currently the user can only see if a title is available at the end of each potential path, once they have clicked on a specific book. Boxed in orange are the repeated loops of determining whether a title is in stock, at the end of each flow path. This can be frustrating for users as they need to choose a book multiple times before they can find one that is available. To remove this frustration, it would be helpful to inform users whether a book is in stock earlier in the flow path. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598910904402-W8U1GTS62DJJQUEZHP0T/Proposed+Sitemap.png Brooklyn Public Library Full - Site Map for Proposed Website Based on our user research, I created a proposed site map that aligns with users’ mental models more. I did this by expanding the primary navigation from 4 categories to 6, to better organize products and services. I also used subheadings in the secondary navigation to group together items and make them more digestible. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1599065038627-FRKVMVYO3KOWC8432H9P/Screen+Shot+2020-09-02+at+12.43.45+PM.png Brooklyn Public Library Full - Tree Study for Proposed Website A second round of tree testing was conducted to compare the proposed navigational structure for BPL with the existing navigational structure, using the same three tasks. Task 1 (Browse non-fiction latest releases) had a significant improvement in success compared to the first round, increasing from 19% to 93% success. Task 2 (Find a virtual book club) was less successfully this round, indicating the changes made to the navigation made it more difficult for them to complete this task. Users did not know which primary navigation option to click on, some wanted to find it in Events, but others thought it would be in Books & Media, Services, or Digital Tools. Task 3 (Make a single contribution of $35 to the BPL) had slight improvement in success as more users were able to directly complete the task. In round 1, there was 81% direct completion and in round 2 there was 92% direct completion. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1599067028153-170KKDCQ6KQPXCXAXLUJ/Screen+Shot+2020-09-02+at+1.16.57+PM.png Brooklyn Public Library Full - Card Sorting for Proposed Website In this closed sort, we evaluated our proposed navigation design to determine if users sorted a higher percentage of cards inside the primary navigation items we defined as compared to the existing navigation. 56% of cards were placed inside the proposed primary navigation, while 44% of cards were placed outside of the existing primary navigation. This is a significant improvement from the existing closed card sort of 36% inside, 64% outside. However, there is still room for improvement. Most participants agreed with the Books & Media, Events, and Support Category. Digital Tools and Services proved confusing, with cards swapped between them. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598911989237-E314SS6R4YE5K7X5IHXQ/smartmockups_kej2tg3k.png Brooklyn Public Library Full - Primary Navigation Expanded to 6 categories, the primary navigation now runs horizontally at the top of the page rather than vertically on the left side. The search bar has been made less prominent and moved to the utility bar to encourage the use of the primary navigation. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1599066049459-U9K11J3SA7YRDOD8ZSHY/smartmockups_kej2ty6s.png Brooklyn Public Library Full - Secondary Navigation Hovering over or clicking on a primary navigation item will open the secondary navigation menu. Secondary navigation items have been organized under sub-headings to group the numerous items together. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1598912067464-X8SUINCJH9X0R82BPWZJ/smartmockups_kej2uhzk.png Brooklyn Public Library Full - Breadcrumbs and Color Coding As the user navigates through the site, they will know where they are through the addition of breadcrumbs below the BPL logo. Additionally, color coding has been used to group all pages within a primary navigation category; Books & Media are green, Digital Tools are periwinkle, Services are red, and so on. To help our persona Kelley find titles that are available now, we added a filtering option under new arrivals for Available Now. https://www.adifine.com/home daily 1.0 2026-06-08 https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1633303890659-CO7DH7O1A43P7UBMWYWX/IntroducingWP.png Home - Engagement and Gamification on WolfPack iOS and Android App, Consumer Facing Motorcycle riding is better in packs. Find other motorcycle riders, share your experiences, and participate in challenges with WolfPack, a motorcycle tourism and group navigation app. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1605990000261-X9LQCYTOLARYW2RG5DK9/Project+Petals+Home.png Home - Non-profit Volunteer Portal Responsive Website, Volunteer Project Ready to help your community? Formally register for volunteer events and propose potential neighborhood beautification projects to this incredible non-profit via a responsive website. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1606060012310-1CCMO25Q9033TF04IX65/Introducing.png Home - Leisure Cycling Assistant iOS App, Conceptual Project Bike riding is no longer just for the athletic. Join us for a day full of fun as we help plan an outdoor adventure featuring brunch and scenic views through an iOS app called Kickstand. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1605991949060-R25WSY2CTTU0YUK13T8N/Introducing.png Home - Hitch Hiking Revamped Responsive Website, Conceptual Project College students around the U.S. have difficulty finding a ride between their home and school, as many colleges are in remote locations. Enter Hitch; a responsive website that helps students find carpools. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1605996636213-CDXYYYET3XCKHZPPXW9A/Introducing.png Home - The BPL Navigation Redesign Information Architecture, Conceptual Project The Brooklyn Public Library provides numerous resources and services to its surrounding community. During COVID-19 the BPL’s website is the main access these resources, however the existing site proves difficult to navigate through. Check out our navigation redesign. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1606060147075-CGWM243GSX7PYHJPU42Y/About+Me+Picture.png Home https://www.adifine.com/wolfpack daily 0.75 2021-10-11 https://images.squarespace-cdn.com/content/v1/5ec321c2af33de48734cc929/1618497259178-6XJGK9GR6YAVBQL5L519/20140301_Trade-151_012-2.jpg WolfPack https://images.squarespace-cdn.com/content/v1/5ec321c2af33de48734cc929/1607694583486-2PQT0LQ193RL7MCB6DX4/20140228_Trade+151_0046.jpg WolfPack https://images.squarespace-cdn.com/content/v1/5ec321c2af33de48734cc929/1607694644871-IC85FNH781UNZSZEGHDR/Aro+Ha_0428.jpg WolfPack https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1633303538107-CVI4W1BPNG5GX76SJ99I/IntroducingWP.png WolfPack - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1633356355334-1SV2UKNMC38TLA8ECYRP/SocialFeed1.png WolfPack - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1633356378107-5JLRT19N3O328F0LH887/SocialFeed2.png WolfPack - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1633356399304-A8V3SA4CMZJWPGK8Z2NC/Notifications.png WolfPack - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1633356462695-1W0MMMURFOA7SH5DXDNV/Friends.png WolfPack - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5f3078f639a4292be02214b3/1633356488280-NMSSQTYLB9IDR3SRBW0J/Challenges.png WolfPack - Make it stand out Whatever it is, the way you tell your story online can make all the difference.