https://www.ariellebaio.me/work daily 0.75 2021-03-31 https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726492381-X51W6M8Z2IBEGB9Z23V2/Seeker.png Product Design https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726504130-OAWCTB4WOIYWWDYTDZVQ/iPhone_6_plus_perspective-Gold.png Product Design https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726533846-RU4QZU23TEUV2I8L4BLB/SFO_INCOMPUTER1.jpg Product Design https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726557184-MJGJNG9PSWJJYLJBOLLO/maps.png Product Design https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726492388-093JY6P6BTWMHVAZWWRZ/seeker.png Product Design https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726492393-2OBZZVL1DN3S8APZN1NV/image-asset.png Product Design click to expand! https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726492396-VCWQN1YCVVZFAUU6JTYO/image-asset.png Product Design https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726492401-7NE1CDDKCWIKF3WYRZ5J/image-asset.png Product Design https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726492405-5Q69JQDQG57AUP7XYFW6/1_Final+Version3.png Product Design Click to expand. https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726492568-KTHS5TM4BQMSL51GPB34/skhome1.png Product Design https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726492559-Q243SLY72P12XURC15LC/skhome3.png Product Design https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726492583-47DJS7AS7S41WBE7ZNME/skmobile1.png Product Design https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726492576-AMKCGEZJPRIM22YO9EYA/skhp2.png Product Design https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726492549-OQ2BN5E6UGKHK2V7KR4Z/skhome2.png Product Design https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726504141-K01L4SL9809BH9VBVWB5/Screen-Shot-2016-09-27-at-7.55.59-AM-1280x94.png Product Design This is a capture of the old Thrillist Navigation. https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726504145-DBOSFLH5ZVN21L9UO0A8/Screen-Shot-2016-09-27-at-7.56.06-AM-1280x444.png Product Design Screen capture of the previous cities drop down. https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726504161-WI3MSH5XDDHV00A5QP8B/Screen-Shot-2016-09-27-at-8.04.43-PM-e1475025701204.png Product Design The image above shows Thrillist's previous mobile navigation menu. https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726504167-O0UPGKCPPFOQ011JRC7R/image-asset.png Product Design https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726504173-PV756V41KTTUFVEYENNX/image-asset.png Product Design https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726504177-YTO2ZE3MYOQHEC7GHMJK/image-asset.png Product Design https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726504181-AQTYNXQGARR0N0MRWLTS/Screen+Shot+2017-03-22+at+2.26.28+PM.png Product Design Tapping on a city expands the navigation item to show all of it's secondary navigation items. https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726504185-8R6IK5Z706WM0WUV5Z49/Screen-Shot-2016-09-27-at-9.35.11-PM.png Product Design The "sections" of the site don't have sub navigation items, so tapping on them takes the user directly to the landing page. https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726504191-X3V1Q0JFURBUNE0FP3O6/image-asset.png Product Design During visual design, we reorganized the menu to include the drop downs in the same area of the navigation. https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726504196-UBY15EYAP3VI1Y1REP83/image-asset.png Product Design We also have a scrolled state for the navigation bar, that allows us to maximize space for our users to view all the great content Thrillist has to offer. https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726504202-FZD766E9WW0AP9CFP2DP/image-asset.png Product Design This design shows our final design for the very content heavy city navigation dropdown. We’ve kept our top four cities called out in the left hand side of the navigation dropdown. Since users read from left to right, this increases the chances our users will find the city they are interested in finding. This also breaks up the visual field and allows users to scan the list of additional cities to the right. https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726504207-I6RGWKEJUKWJDL8MQU4I/image-asset.png Product Design The individual city navigation sticks to the main navigation and allows users to browse city sub-sections. https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726504210-GGFMPDOECI1MZGOB34DD/image-asset.png Product Design Each Thrillist section has a brand color. This shows the active states for the nav when users click into an article in the Technology section of Thrillist. https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1617154795365-2IE8AP885HUX8V2ACD1E/Screen+Shot+2021-03-30+at+6.39.10+PM.png Product Design https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726533862-7S8FWNM46WX05G7ZBY1C/Discovery-Wires.png Product Design Figure 1: (Left)During the content audit for flysfo.com, we realized there were many inconsistent paths at varying navigation levels to content on the SFO site. In the image above we worked to map out this content and reorganize it into a consistent navigation pattern. Figure 2: (Right)During the stakeholder interviews for flysfo.com, we combined feedback from across the many airport interviewees to create a list of personas. The image above outlines one piece of our user persona process https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726533888-CHHGQ4OH1QESTXEFC4RL/SFO_FlightInfo_old.png Product Design https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726533877-YB25QOUBG5XUAMRTFQ11/SFO_Home_old2.png Product Design https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726533902-74CYOY8LB5V0Z6R52RER/image-asset.png Product Design This initial wireframe depicting the homepage experience begins to map out how users visiting the site can access information important to them in the most expeditious manner. There’s a nod to the new navigation structure and links to important portions of the site including, Flight Information, Alerts and Advisories, Ground Transportation, and Navigating the Airport https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726533906-YAVSPPU5SJ1917QKUQZF/image-asset.png Product Design Figure 6: A key feature for flysfo.com is the flight information section of the site.This initial starts to combine important search functions for users, such as, an open text field for searching and filtering options for results. https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726533909-C0MJ7SOTRB49C2NL1ALB/image-asset.png Product Design For mobile users, we took a different approach for homepage and navigation structure. Mobile users needed a more direct path to important site functions. We experimented with icons and buttons that highlighted top areas on the site. These top areas were determined by analytics tracking on the site, and internal feedback from Airport stakeholders.We worked through a few rounds of functional combinations through sketches and wireframes. This image was an option for full menu navigation extending from the side in a drawer-like fashion. https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726533926-K7QNAGZE9JGG9GB8BZSW/SFO5-e1433958407118.png Product Design https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726533936-O594VNGG5CKFDHVJW0LW/SFO6-e1433958456946.png Product Design https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726533947-JFTUKZT6K8UTRIPVADQF/image-asset.png Product Design Figure 10: The final layout for mobile screens can accommodate many screen sizes. The menu is laid out in stages so users can navigate successfully through the many levels of information on the SFO site. https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726557192-NW6L5QWJHZQ5LV5YPLQT/image-asset.png Product Design This user flow maps out how users were initially accessing our venue content and connects it with a potential mapping experience. https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726557196-9U3I4LW2U8IJQHJT7RCW/image-asset.png Product Design This chart helped me organize all the integration points I'd need to consider in the design. https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726557200-XGQK5JV1F987E0DJ43AU/Screen-Shot-2017-01-18-at-3.48.12-PM-e1484830292956-1280x786.png Product Design Far left: On sketch showing a mobile screen mostly comprised of a map with a venue card on the bottom of the screen. Middle: A simple navigation with exposed map pins. Far right: An information based interface focused on displaying venue recommendations with a smaller area for the location information. https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726557204-1GZ4M5HH3VWAW3N74J11/image-asset.png Product Design A few simplified desktop sketches show some of my initial thoughts around the desktop map interface and its filtering options. https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726557210-N5PWOXJLEMUXHEJPT50A/image-asset.jpeg Product Design The next step in my process involved mapping out specific details within the interface. This excerpt from my wireframes shows the main components of the mobile map experience in it's early form. https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726557234-RMSS6AIJC6BFMT2CG7BG/Screen+Shot+2017-03-22+at+8.41.52+PM.png Product Design https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726557227-RYAEUE5SIGD9KW59BBZB/Screen+Shot+2017-03-22+at+8.42.16+PM.png Product Design https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726557266-FZJ9AEQQ7X1SYKTYYAM8/Screen-Shot-2017-01-19-at-8.07.41-AM.png Product Design https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726557273-8J7PRAJ6LHQYD6NCEP4L/mobiledesigns-1280x1228.jpg Product Design https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726557258-3N5EU0QVNXRETC9A26SI/Screen-Shot-2017-01-19-at-8.08.44-AM.png Product Design https://www.ariellebaio.me/maps-gallery daily 0.75 2021-03-26 https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726498534-TZ9LPIWI8D5UR1Y1TW8N/Thrillist_maps.png Thrillist Maps Wireframes https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726498581-LUL7QMIYTOJXMT6W4SQB/Screen-Shot-2017-01-18-at-3.48.12-PM-e1484830292956-1280x786.png Thrillist Maps Wireframes - Simple Mobile Sketches Far left: On sketch showing a mobile screen mostly comprised of a map with a venue card on the bottom of the screen. Middle: A simple navigation with exposed map pins. Far right: An information based interface focused on displaying venue recommendations with a smaller area for the location information. https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726498557-EFUB35DX28J7O67HI4ZE/Screen-Shot-2017-01-18-at-3.48.25-PM-e1484830685562-1280x953.png Thrillist Maps Wireframes - Simple Desktop Sketches A few simplified desktop sketches show some of my initial thoughts around the desktop map interface and its filtering options. https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726498547-XNLL1I390A85NHSVWDLO/Screen-Shot-2017-01-18-at-3.48.42-PM-e1484830825902.png Thrillist Maps Wireframes - Developed Mobile Wireframes The next step in my process involved mapping out specific details within the interface. This excerpt from my wireframes shows the main components of the mobile map experience in it's early form. https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726498572-N5I79776X1UO7NVJB4H1/Screen-Shot-2017-01-18-at-3.48.54-PM-e1484831049628.png Thrillist Maps Wireframes - Detailed Desktop Wireframes I explored a few options for the desktop experience. This option plays with surfacing more filtering options in the main ui of the map. https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726498565-1UJJDGE1CCT2OFCGPPDU/Desktop+HD+Copy+5.png Thrillist Maps Wireframes - Desktop Advanced Wireframes Once the main components of the interface were in place. I worked through a few additional states determined how the mapped to all integration points on site. This screen shows the entry screen for our venue lists. https://www.ariellebaio.me/illustration-1 daily 0.75 2021-03-26 https://www.ariellebaio.me/blog daily 0.75 2021-03-26 https://www.ariellebaio.me/faces daily 0.75 2021-11-15 https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726551049-QH2SSCLJKR44PJH2RI3T/Johnathan_Oshondi-Crosshatching_.jpeg Portraits Gallery https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726551049-QH2SSCLJKR44PJH2RI3T/Johnathan_Oshondi-Crosshatching_.jpeg Portraits Gallery https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1637006202487-2ST7QFQKWME28JOGSLGT/Untitled_Artwork+2.jpeg Portraits Gallery https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726551093-LW2CFX1ZZFIJ9NMNC68M/Untitled_Artwork+3.jpeg Portraits Gallery https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726551076-JKSHUZ5QPUJIEP8ZF3D1/image-asset.jpeg Portraits Gallery https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726551102-VZUB8TTPX7KFCW6764ZL/Untitled_Artwork%2B2.jpg Portraits Gallery https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1637006173093-LO5HAR0D661WI3NF1U1R/Untitled_Artwork+4.jpeg Portraits Gallery https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1637006156896-M39BFZY7IKXK1VOTCR9W/Untitled_Artwork+3.jpeg Portraits Gallery https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726551066-ACUQI45KG8KZRJ0RB7BF/Paper.Couch%2BSketches.5.png Portraits Gallery https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726551040-QJF59J3XIVL0E6WWKRHJ/Pastel_Charcoal.jpeg Portraits Gallery https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726551057-GISMWR893T9AU5J6KOX8/White_Pastel_Portrat.jpg Portraits Gallery https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726551086-B8H9FOO57WGZAY70ZI2U/IMG_0809.jpg Portraits Gallery https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726551023-PA2BF1GLP4HKDAFOTH9X/writing.png Portraits Gallery https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726551031-JAT1TEEUXYYRDYOYEPY1/portrait_man.png Portraits Gallery https://www.ariellebaio.me/portfolio daily 0.75 2021-03-26 https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726516201-VCPYXXTOX7SPPGSF3T2L/image-asset.png portfolio https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726516218-VZJGWHI3UZT40D9XIKNA/iPhone_6_plus_perspective-Gold.png portfolio https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726516234-A6X1VSS8SG0V22QV9ME9/SFO_INCOMPUTER1.jpg portfolio https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726516226-2RH5CCFS9QY70FFHYSFH/maps.png portfolio https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726516241-0BQ4QS9HDXA91XM79P8B/002-MacBook-Gold.png portfolio https://www.ariellebaio.me/product-design-gallery daily 0.75 2024-02-26 https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/0c412275-82c6-4bd6-909b-2ca9d060cc2f/image-asset.gif Product design gallery - Write with confidence on the web Using the latest Google AI modeling, I designed a feature that helps users compose messages, reviews and social media posts. https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/0c412275-82c6-4bd6-909b-2ca9d060cc2f/image-asset.gif Product design gallery - Write with confidence on the web Using the latest Google AI modeling, I designed a feature that helps users compose messages, reviews and social media posts. https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/56856cbe-4365-425e-a9d6-bd1fbd0ad741/Frame+2+%283%29.png Product design gallery - Listen to articles on the go https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/ff3389bf-cab9-43f9-8ba5-3b5a5cc4e6a7/Frame+3465239.png Product design gallery - Keep up with your favorite web sources https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/60dffee1-0c07-4c89-80ae-be0154e7fc71/Frame+2+%282%29.png Product design gallery - App store media storage https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616985407678-PEZ9FE3F122O3YH4DGMC/ipad.png Product design gallery - Helping small businesses manage cashflow https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/89860ba1-1d23-4f08-afaa-03f338603312/maps.jpg Product design gallery - An easier way to plan a night out https://www.ariellebaio.me/home-foster daily 1.0 2026-02-02 https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1617134452853-HQE2Q6Z3CGZHKRWJZ9GC/ux-store-jJT2r2n7lYA-unsplash.jpg Home https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1678756090774-FEDO1K7JK11EKT8ZAS7I/IMG_1233.JPG Home https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1759422434873-KOWWEATQMMI8D41B3U7S/image.jpg Home - Notes on Google Chrome https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/1616726537452-MS4YNI5T7DUE3UN05VRZ/arielle_usertesting.png Home https://images.squarespace-cdn.com/content/v1/605d49ce4a7c060925521189/c8a3213a-b7e3-400f-8f82-b09896ada5e6/Untitled-1.png Home https://www.ariellebaio.me/shop-gallery-foster daily 0.75 2025-05-06 https://images.squarespace-cdn.com/content/v1/5794fb301b631bb13257714c/1475176520968-CN69R78CM7O2W6OL55LX/orange.jpg Shop Gallery - Orange Juice https://images.squarespace-cdn.com/content/v1/5794fb301b631bb13257714c/1475176520968-CN69R78CM7O2W6OL55LX/orange.jpg Shop Gallery - Orange Juice https://images.squarespace-cdn.com/content/v1/5794fb301b631bb13257714c/1475176535639-D7AF7SDE9W2NKGTGX3ZH/carrot.jpg Shop Gallery - Carrot Juice https://images.squarespace-cdn.com/content/v1/5794fb301b631bb13257714c/1475176549236-4ZN5MYZNL09PHU079C59/vanilla.jpg Shop Gallery - Vanilla Chai https://www.ariellebaio.me/blog-foster daily 0.75 2025-05-06 https://www.ariellebaio.me/blog-foster/2016/9/28/asdvadfg-mfc8r monthly 0.5 2016-09-28 https://www.ariellebaio.me/blog-foster/2016/9/28/dafagadfg-j888t monthly 0.5 2016-09-28 https://www.ariellebaio.me/blog-foster/2016/9/28/zsj3gp6rqe13xef0bne0xnk014cbrm-s2yth monthly 0.5 2016-09-28 https://www.ariellebaio.me/blog-foster/2016/9/28/lorem-ipsum-dolor-sit-amet-2r55n monthly 0.5 2016-09-28 https://www.ariellebaio.me/products-foster daily 0.75 2025-05-06 https://www.ariellebaio.me/products-foster/cold-pressed-vanilla-chai-cye2g monthly 0.5 2016-09-29 https://images.squarespace-cdn.com/content/v1/5794fb301b631bb13257714c/1475176944430-3KYE8PCTZO1CGFY5VIXI/vanilla.jpg Products - Cold-Pressed Vanilla Chai https://www.ariellebaio.me/products-foster/cold-pressed-carrot-juice-rg73z monthly 0.5 2016-09-29 https://images.squarespace-cdn.com/content/v1/5794fb301b631bb13257714c/1475176915524-BGJRNBAEAP2YR5M131P2/carrot.jpg Products - Cold-Pressed Carrot Juice https://www.ariellebaio.me/products-foster/cold-pressed-orange-juice-mcrpl monthly 0.5 2016-09-29 https://images.squarespace-cdn.com/content/v1/5794fb301b631bb13257714c/1475176782037-PUVZEMUJNDM67NOVFXFQ/orange.jpg Products - Cold-Pressed Orange Juice