https://www.jonathanelee.com/home daily 1.0 2023-10-14 https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/1605679473334-78GGWISIPX44KHBMWOZ0/2019-05-29_02292_FullRes_xl.jpg Home - 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/5fb4b0fdd40c3c7d9752d683/1650418648637-53FKNRIFDF4DWM5ECRGL/DDL_UX_cover.jpg Home - Durham Delivers UX Redesign Redesign of a bulk meal delivery platform that drove $200,000+ revenue to independent local restaurants impacted by COVID-19 indoor dining bans. UX research & design • brand systems • web accessibility https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/1606719236512-D58UY41HZMXC4WIFQF3B/metadata-schema-cover.png Home - Photo Library Metadata Schema Revamping Discover Durham’s photo metadata system and workflows for greater efficiency UX research • user flows • documentation https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/70843cf7-b5b9-4771-9647-e80a789ac035/Other+Design+Assets.jpg Home - Other Design Deliverables Snapshots of other design assets I have produced for teams, stakeholders, and clients UX research & design • service design • analytics & automation https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/1605903660858-MDCQ53UZFT2C6JV332VL/duke-brand-home-all-devices-16x9.png Home - Duke Brand Guide Overhaul Building a new Duke brand guide for a diverse, decentralized user base in a mobile-first world UX research • brand systems • web accessibility • front-end dev https://www.jonathanelee.com/duke-brand-guide daily 0.75 2022-12-16 https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/1605884483311-LHI64NTD60K04R17IMUD/duke-brand-home-all-devices.png Duke Brand Guide Overhaul https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/1605885331740-YT4CMOGKG3O3RIZHXYS5/duke-brand-new-colors-comp.png Duke Brand Guide Overhaul The old style guide — outdated, clutter, and not very mobile-friendly https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/1605884996078-CCCZDD2CKIHND4E9COT5/duke-brand-new-colors-comp.png Duke Brand Guide Overhaul The new extended color palette on desktop and mobile https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/1606125449836-3VD4H32AW67BLF112YC3/brand-duke-edu-IA.png Duke Brand Guide Overhaul A mid-way draft of the information architecture for the site. https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/1605868572890-X4Z3GTEX035673TO3OC7/duke-brand-typography-top-laptop.png Duke Brand Guide Overhaul The final design of the Typography page https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/1605872718316-6D89EGF094RFJLZDQUZ0/duke-brand-typography-compare-wide.png Duke Brand Guide Overhaul The initial layout (left) vs. the updated, progressive disclosure layout (right) https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/1606121982789-68IRHYE214ZHGS8J9K25/duke-brand-branding-laptop.png Duke Brand Guide Overhaul The final design of the Branding page https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/1606121239462-NX9ZETXKDBLGEIQEG6YF/logos.usage_2014.png Duke Brand Guide Overhaul The old style guide sub-branding treatments. https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/1606121245240-IN4CGBKT2R18CPOCWU19/duke-sub-branding-options.png Duke Brand Guide Overhaul Examples of the new brand guide’s sub-branding. Still structured, but with more room for variation. https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/1606124286929-S8S1ED5R70COQ2N546M4/duke-rebrand-chapel-site.png Duke Brand Guide Overhaul The Duke Chapel website redesign incorporated the updated color palette and typography https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/1606123225282-EMDQMAYYQ63G2YY94LZS/duke-brand-rebrands.png Duke Brand Guide Overhaul Duke units/programs that revised their sub-branding to comply with the updated guidelines https://www.jonathanelee.com/photo-metadata-schema daily 0.75 2022-12-16 https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/1606709436961-M66I7XTEBP8KBW31BCC1/Discover-Durham-Photoshelter-interface.png Building A Better Metadata Schema https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/1606709959364-8CIWKV1H3MSZ9O1Q0302/DAM+userflow1+-+browsing.png Building A Better Metadata Schema The initial user flow I drafted with the insights from the asset managers https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/1606712459656-REEUDQZBX5YO7OIZFYRU/DAM+userflow+-+all+flows.png Building A Better Metadata Schema Diagram of the 3 user flows. The spots highlighted in red are problematic steps and processes within each flow. https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/1606708775662-X0S6SXQENLSZAA91ZLM4/DAM+how+might+we+exercise.png Building A Better Metadata Schema Ideas from a brainstorming exercise on how to address user issues with the DAM. Ideas highlighted in blue were ones I pursued further. https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/1606713205030-CNRFQIS0C3V0QBSRBEYX/Discover+Durham+DAM+-+metadata+view.png Building A Better Metadata Schema The custom metadata also appears on the individual photo entries (right info panel, top), so browsing users can confirm if they can use individual photos without having to read and parse the IPTC keywords (right info panel, bottom). https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/1606713177518-A39YQZT5XXRZR73T1PUJ/Discover+Durham+DAM+-+metadata+filter.png Building A Better Metadata Schema The custom metadata filters (left menu panel) allow users to narrow search results by the appropriate usage permissions. https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/1606715716057-PE0ODNCL8A46A1G2FEV8/DAM+mgrflow2+-+upload+additional.png Building A Better Metadata Schema The original asset manager workflow https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/1606715236181-IFQ5EBV3BSWIDVMZ1BIA/Lightroom-metadata-panels.png Building A Better Metadata Schema The 3 metadata panel views (in order from left-to-right: default, IPTC, and quick describe) the asset managers toggle through when writing metadata. The regions highlighted in red are unused by the managers and are visual noise. https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/1606716766559-V6LT5H1O82SP0Y5AONVU/DD-Lightroom-custom-metadata-panel.png Building A Better Metadata Schema The new custom metadata panel I designed includes only the necessary subset of fields the asset managers need to edit and keeps extraneous fields out of their default view. https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/1606716357598-ZHV671PUMT197WGDGRB3/DAM+mgrflow5+-+upload+final.png Building A Better Metadata Schema The redesigned asset manager workflow condenses and automates much of the metadata work, which reduces the opportunities for error and editing fatigue. https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/1606716256438-QOEBK0P1HB60C7CHXQP4/DAM+mgrflow4+-+metadata+presets.png Building A Better Metadata Schema The metadata presets allowed users to automatically batch apply 9 kinds of metadata to imported photography. https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/1606718298371-8HE6ENVA2ZJLLERW0QUR/DAM+userflow+-+all+flows+final.png Building A Better Metadata Schema The final user flow after updating the metadata workflow and incorporating solutions to increase the usability of the DAM. https://www.jonathanelee.com/durham-delivers daily 0.75 2023-11-25 https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/5a02249b-1c88-45bd-a9a7-1918ab64042d/DDL_before%2Bafter.jpg Durham Delivers https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/64925cb9-bf4a-4669-a1d9-767e38024a0c/DDL_before.jpg Durham Delivers The beta version of the Durham Delivers platform prior to redesign and launch. Click to enlarge. https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/f4b9cc65-3715-464b-8700-5b70d1f2fb98/DDL_design_process.PNG Durham Delivers - Make it stand out My double diamond design approach, annotated with the various design artifacts I created throughout the process. https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/030f198b-a7b6-4566-b9b0-32a60d2d7d58/DDL_UX_Review_Concpetboard.png Durham Delivers Beta version of the platform annotated with research notes. Click to enlarge. https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/dc70aed4-ac25-4e5e-b2bd-485720f6bf56/Durham+Delivers+User+Stories.png Durham Delivers A spreadsheet view of our user stories and feature queue. Click to enlarge. https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/a6f6523a-722d-4fe8-bd80-a01ffdfe4407/Durham+Delivers+UX+Archetypes.png Durham Delivers Our 6 behavioral archetypes. Click to enlarge. https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/b6554c36-4779-416f-9eb6-5c42e7f515b3/DDL_information_architecture.PNG Durham Delivers An extended sitemap designed to follow our users’ intended journeys. Click to enlarge. https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/bb73ad54-8aa2-46e3-997b-35bc3227e866/DDL_webflow_editor_CMS.png Durham Delivers Screenshots of building the functional prototype in Webflow. Click to enlarge. https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/f8a97409-ddaf-4a41-86bb-597b33de5bdf/DDL_content_model_sq.png Durham Delivers Our 4 part content model. Click to enlarge. https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/ecc75c4a-a125-4056-a251-f0d4768b7f86/PXL_20220409_235647868.jpg Durham Delivers Brainstorming through exhaustive sketching of different approaches. Click to enlarge. https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/dc2b8d1e-4892-466c-bed7-e1bcfb867861/PXL_20220409_185947971.jpg Durham Delivers A spreadsheet view of our user stories and feature queue. Click to enlarge. https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/294a3394-a471-420d-866f-649c36fd9312/DDL_ordering_celebration.gif Durham Delivers - Make it stand out Examples of the celebratory animations. https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/bc80d073-f0f5-4cb5-ab8c-df73e75bea1c/DDL_empty_state.png Durham Delivers - Make it stand out Example of an empty state on a Community listing page. Click to enlarge. https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/2b1f6d3a-29ab-4a4a-b407-76cf052b2768/DDL_card_design_patterns.png Durham Delivers The full matrix of treatments designed for the delivery event card. Click to enlarge. https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/01148a21-91a0-468b-b388-d32713e4437d/DDL_accessible_colors.png Durham Delivers The accessible color combination guide developed for the style guide. Click to enlarge. https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/02913ead-b5fc-41a2-8dd5-ccbb94f8542b/DDL_style_guide.png Durham Delivers - Make it stand out The full style guide I compiled as a reference for the platform includes logos, typography, colors, and more. Click to enlarge. https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/9b804e78-217b-47cd-8bbd-9f7f21950e11/DDL_flyer_samples.jpg Durham Delivers - Make it stand out Examples of fliers and print documents I designed to further support the program. Click to enlarge. https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/96283d48-ae3e-46da-b320-207c38ba185d/DDL-user-flows_upcoming.png Durham Delivers User flow for placing selecting a bulk delivery event via upcoming deliveries. https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/9ea83a21-0887-4782-9327-4c39825478a8/DDL-user-flows_community.png Durham Delivers User flow for placing selecting a bulk delivery event via the users' community. https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/0626498c-d6c8-41bd-86e0-ccfa59497c1f/DDL_information_hierarchy_2.PNG Durham Delivers Comparison of the beta version's information hierarchy vs. the revised information hierarchy for the redesigned event cards. https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/6b44dc54-223b-4557-b283-2c6b16c6e5f2/DDL_information_hierarchy_1.PNG Durham Delivers Diagrams of the user decision-making process and corresponding information hierarchy I implemented. https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/b26c4860-8c60-438d-ac4d-e19afef8bcfd/DDL-user-flows_restaurants.png Durham Delivers User flow for placing selecting a bulk delivery event via users' restaurant of choice. https://www.jonathanelee.com/design-deliverables daily 0.75 2022-12-16 https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/f8f84cf5-d60e-430e-9982-5a7ace018780/22_05+Sales+Giveaway+Service+Blueprint.png Design Deliverables Spring sales giveaway campaign service blueprint mapping out customer experience ownership across divisions and processes. Click to enlarge. https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/39133ea1-0505-4bf7-8d80-85ee7d07257c/DPlex+Sales+Campaign+LinkedIn+Carousel+copy.png Design Deliverables Example of ad creative assets and copy I made for the campaign. Click to enlarge. https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/02def254-86cf-42f5-aebd-2ec4253c8b2d/Leisure+Marketing+Personas+slide+stack+copy.png Design Deliverables The 6 target audience personas we co-created for the leisure marketing campaign. Click to enlarge. https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/7701ed1e-6013-4a8f-b3f9-268d58bb8eca/20_08+Image+Submission+Workflow.png Design Deliverables - Make it stand out Flowchart illustrating the image submission automation terminating in follow-up steps for team members. Click to enlarge. https://www.jonathanelee.com/creative daily 0.75 2023-01-02 https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/7df3256f-1389-446f-8d9f-4b436f9f9584/MOOG025_Moogfest+Kimbra_DiscoverDurham+%281%29.jpg Creative Work https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/6d0bd4b6-78d9-4643-b133-6818aeeaea45/220604+-+Ashley+Cody+Student+Loan+Free-41.jpg Creative Work https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/9f0c5b9c-fd8a-4c18-a281-335f4eb8f4b5/DUKE019_Duke+Chapel_DiscoverDurham+%281%29.jpg Creative Work https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/7a84e70a-87f5-48ac-a0f1-a2409bd98b13/TRUK001_Food+Truck+Rodeo_DiscoverDurham+%281%29.jpg Creative Work https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/e5c9460f-f129-4e8f-903c-62c8c3f2435a/CASD364_Lawrence+Barbecue+at+Boxyard+RTP_DiscoverDurham+%281%29.jpg Creative Work https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/0bce3655-5134-4473-aa44-9d0630149908/SALES_Visit+NC+365_DiscoverDurham2022_003+%281%29.jpg Creative Work https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/c187781e-c294-4957-b799-ad77510140cc/BEVR176_Cocoa+Cinnamon_DiscoverDurham+%281%29.jpg Creative Work https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/1d15d543-44ab-4369-b383-7de5771f9cba/ICON057_Durham+Sign+at+ATC_DiscoverDurham+%281%29.jpg Creative Work https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/d03debea-d309-4da9-a5f3-cd7b343b4bd2/CASD128_M+Pocha_DiscoverDurham+%281%29.jpg Creative Work https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/7b0b9d91-5f78-4241-a8d0-0fe043decdab/SKYL028_Old+Bull+Building+ATC_DiscoverDurham+%281%29.jpg Creative Work https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/9b804e78-217b-47cd-8bbd-9f7f21950e11/DDL_flyer_samples.jpg Creative Work Durham Delivers Program Flyer https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/f24aafef-4cee-4762-a3e7-65618624cae4/Wallflower+Folio+brand-2.jpg Creative Work Wallflower Folio branding https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/bb19e69d-74b7-4c41-9fc0-5ffc3c3ad9cd/2018+DCVB+Mural+Finder+design.jpg Creative Work Mural Durham: Mural Finder https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/63c4108b-50cf-496a-92d6-2eaeab01f3c3/African+American+Heritage+Guide+design.jpg Creative Work African American Heritage Guide https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/a1cb8b5b-33fe-40c2-9eda-3398bf135657/Prologue+Papers+and+Goods+branding-2.jpg Creative Work Prologue Papers & Goods branding https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/ad940fc1-6cd8-4027-9a53-d0e54c99a79f/2022+Discover+Durham+Toursim+Impact+Report+design.jpg Creative Work Discover Durham Tourism Impact Report https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/7750491c-b20b-44b0-ae14-121e4aab7a99/Durham+Pictograms-01.jpg Creative Work Grid of pictograms representing Durham landmarks and skyline elements https://www.jonathanelee.com/about daily 0.75 2023-11-26 https://www.jonathanelee.com/certifications/dei-workplace-usf daily 0.75 2023-11-25 https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/70f0fc73-9bd1-41b2-b024-ce25e3f187e4/muma-diversity-equity-inclusion-badge.png https://www.jonathanelee.com/certifications/design-thinking-ibm daily 0.75 2023-11-25 https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/ea37d942-c3fc-4a11-afa8-5b7bcbc32755/Badges_v8-07_Practitioner.png https://www.jonathanelee.com/certifications/wcag-2-2-linkedin daily 0.75 2023-11-26 https://images.squarespace-cdn.com/content/v1/5fb4b0fdd40c3c7d9752d683/5092d7b3-76ec-4297-867a-3b48f5f862f4/1700957437430-0ee74aea-5b72-44bc-a63c-8981d0b2f1602+Guidelines+%281%29_1.jpg