{"version":3,"file":"CaseStudy.B5yGIXhK.mjs","names":[],"sources":["https:/framerusercontent.com/modules/AosZbJOXElGO5RTrCDEA/ZjrsJtEZeymy48dgl83d/CaseStudy.js"],"sourcesContent":["// @ts-nocheck\n// Shared case study layout: title + details on the left, descriptions on the right, then the\n// work below. Pick which study this page shows in the properties panel (Study).\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";const CSS='\\n.cs { background: #050505; color: #f3efe8; font-family: Geist, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }\\n.cs * { box-sizing: border-box; margin: 0; }\\n.cs .cs-in { max-width: 1240px; margin: 0 auto; padding: 0 24px; container-type: inline-size; }\\n.cs a { color: inherit; }\\n.cs .mono { font: 12px/1.4 \"Geist Mono\", ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; }\\n.cs .dot { color: #ff4d1a; }\\n.cs-top { display: flex; justify-content: space-between; align-items: center; padding: 22px 0; border-bottom: 1px solid #161514; }\\n.cs-back { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #cfc8be; padding: 8px 0; transition: color 0.2s; }\\n.cs-back span { display: inline-block; transition: transform 0.25s; }\\n.cs-back:hover { color: #fff; } .cs-back:hover span { transform: translateX(-4px); }\\n.cs-name { color: #7a746b; }\\n.cs-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 48px); padding: clamp(56px, 8vw, 110px) 0 clamp(48px, 6vw, 80px); }\\n.cs-head-l { grid-column: 1 / span 5; }\\n.cs-head-r { grid-column: 7 / span 6; padding-top: 34px; }\\n.cs h1 { font-size: clamp(44px, 6vw, 84px); line-height: 0.95; letter-spacing: -0.045em; font-weight: 600; margin-top: 16px; }\\n.cs .cs-tag { margin-top: 18px; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.35; color: #a8a197; max-width: 26ch; }\\n.cs dl { margin-top: 40px; display: grid; grid-template-columns: auto 1fr; gap: 12px 20px; font-size: 14px; line-height: 1.5; border-top: 1px solid #1f1d1b; padding-top: 22px; }\\n.cs dt { color: #7a746b; padding-top: 2px; }\\n.cs dd { color: #e6e0d6; }\\n.cs .cs-links { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; }\\n.cs .cs-btn { display: inline-flex; gap: 8px; align-items: center; padding: 11px 16px; border: 1px solid #3a3632; color: #f3efe8; text-decoration: none; transition: border-color 0.2s, background 0.2s; }\\n.cs .cs-btn:hover { border-color: #ff4d1a; background: rgba(255, 77, 26, 0.08); }\\n.cs .cs-lead { font-size: clamp(20px, 1.9vw, 26px); line-height: 1.4; letter-spacing: -0.01em; color: #f3efe8; }\\n.cs .cs-head-r p + p { margin-top: 18px; font-size: 17px; line-height: 1.65; color: #a8a197; }\\n.cs-hero { position: relative; display: grid; place-items: center; padding: clamp(24px, 4vw, 56px) 0 clamp(72px, 9vw, 130px); isolation: isolate; }\\n.cs-hero::before { content: \"\"; position: absolute; left: 12%; right: 12%; top: 0; bottom: 8%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(243, 239, 232, 0.16), rgba(243, 239, 232, 0.05) 50%, transparent 78%); }\\n.cs-hero img { max-width: min(100%, 880px); max-height: 640px; width: auto; height: auto; }\\n.cs-sec { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 48px); padding: clamp(56px, 7vw, 96px) 0; border-top: 1px solid #161514; }\\n.cs-sec-l { grid-column: 1 / span 4; }\\n.cs-sec-l > div { position: sticky; top: 32px; }\\n.cs-sec-r { grid-column: 5 / -1; display: grid; gap: 36px; align-content: start; }\\n.cs h2 { margin-top: 14px; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; letter-spacing: -0.025em; font-weight: 600; max-width: 16ch; }\\n.cs .k { color: #8d867c; }\\n.cs .body p { font-size: 17px; line-height: 1.7; color: #b7b0a6; max-width: 64ch; }\\n.cs .body p + p { margin-top: 16px; }\\n.cs .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 28px; border-top: 1px solid #1f1d1b; padding-top: 24px; }\\n.cs .stat b { display: block; font-size: clamp(34px, 3.4vw, 48px); line-height: 1; letter-spacing: -0.04em; font-weight: 600; }\\n.cs .stat span { display: block; margin-top: 10px; font-size: 14px; line-height: 1.45; color: #8d867c; max-width: 22ch; }\\n.cs .cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 36px; }\\n.cs .card { border-top: 1px solid #262320; padding-top: 18px; }\\n.cs .card .n { color: #ff4d1a; }\\n.cs .card h3 { margin-top: 10px; font-size: 19px; line-height: 1.25; letter-spacing: -0.01em; font-weight: 600; }\\n.cs .card p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: #a8a197; }\\n.cs .cmp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }\\n.cs .cmp .card img { display: block; height: 34px; width: auto; max-width: 100%; object-fit: contain; object-position: left; margin-bottom: 14px; }\\n.cs .cmp dl { margin-top: 12px; grid-template-columns: 1fr; gap: 4px; border: 0; padding: 0; font-size: 14px; }\\n.cs .cmp dd { color: #a8a197; margin-bottom: 10px; }\\n.cs .rows { display: grid; gap: 56px; }\\n.cs .row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }\\n.cs .row h3 { margin-top: 10px; font-size: 22px; line-height: 1.2; letter-spacing: -0.015em; font-weight: 600; }\\n.cs .row p { margin-top: 10px; font-size: 15px; line-height: 1.65; color: #a8a197; }\\n.cs .row .before { margin-top: 14px; padding-left: 14px; border-left: 2px solid #2c2926; }\\n.cs .row .before b, .cs .row .after b { display: block; font: 11px/1.4 \"Geist Mono\", ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; color: #7a746b; font-weight: 400; }\\n.cs .row .after { margin-top: 14px; padding-left: 14px; border-left: 2px solid #ff4d1a; }\\n.cs .row .before p, .cs .row .after p { margin-top: 6px; }\\n.cs .row .mini { display: flex; gap: 28px; margin-top: 18px; }\\n.cs .row .mini b { font-size: 28px; letter-spacing: -0.03em; font-weight: 600; }\\n.cs .row .mini span { display: block; font-size: 13px; color: #8d867c; max-width: 20ch; margin-top: 4px; }\\n.cs figure { margin: 0; }\\n.cs .frame { background: #0d0c0b; border: 1px solid #1f1d1b; display: grid; place-items: center; overflow: hidden; }\\n.cs .frame img { display: block; width: 100%; height: auto; }\\n.cs .media { display: grid; gap: 16px; }\\n.cs .media.phones { grid-template-columns: repeat(3, minmax(0, 1fr)); }\\n.cs .media.pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }\\n.cs .media.phones .frame { padding: 16px; }\\n.cs .quotes { display: grid; gap: 40px; }\\n.cs .gal { display: grid; gap: 16px; }\\n.cs .gal .piece { display: block; text-decoration: none; color: inherit; break-inside: avoid; }\\n.cs .gal.art .piece { margin-bottom: 16px; }\\n.cs .gal.art .piece .frame { margin-bottom: 0; }\\n.cs .gal .cap { display: block; margin-top: 10px; color: #7a746b; line-height: 1.5; }\\n.cs .gal .cap b { color: #d6cfc5; font-weight: 400; }\\n.cs a.piece:hover .frame { border-color: rgba(255, 77, 26, 0.55); }\\n.cs .gal .frame { padding: 6%; }\\n.cs .gal img { object-fit: contain; }\\n.cs .gal.tees { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }\\n.cs .gal.art { display: block; columns: var(--cols, 3); column-gap: 16px; }\\n.cs .gal.art .frame { break-inside: avoid; margin-bottom: 16px; }\\n.cs .gal.wide .frame { padding: 0; }\\n.cs .gal.logos { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }\\n.cs .gal.logos .frame { background: #efeae2; border-color: #efeae2; aspect-ratio: 4 / 3; padding: 14%; }\\n.cs .gal.logos img { width: 100%; height: 100%; }\\n.cs [id] { scroll-margin-top: 24px; }\\n.cs blockquote { margin: 0; }\\n.cs blockquote q { display: block; font-size: clamp(20px, 1.9vw, 25px); line-height: 1.35; letter-spacing: -0.01em; quotes: \"\\\\201C\" \"\\\\201D\"; padding-left: 18px; border-left: 2px solid #ff4d1a; }\\n.cs blockquote .who { margin-top: 16px; padding-left: 20px; color: #7a746b; }\\n.cs blockquote p { margin-top: 10px; padding-left: 20px; font-size: 15px; line-height: 1.6; color: #a8a197; max-width: 64ch; }\\n.cs ul.list { list-style: none; padding: 0; display: grid; gap: 0; border-top: 1px solid #1f1d1b; }\\n.cs ul.list li { padding: 14px 0 14px 28px; border-bottom: 1px solid #1f1d1b; position: relative; font-size: 16px; line-height: 1.5; color: #d6cfc5; }\\n.cs ul.list li::before { content: \"\\\\2192\"; position: absolute; left: 0; color: #ff4d1a; }\\n.cs-next { display: block; text-decoration: none; padding: clamp(56px, 8vw, 110px) 0; border-top: 1px solid #161514; }\\n.cs-next .t { display: block; margin-top: 14px; font-size: clamp(34px, 5vw, 72px); line-height: 1; letter-spacing: -0.04em; font-weight: 600; transition: color 0.25s; }\\n.cs-next .t span { display: inline-block; transition: transform 0.25s; color: #ff4d1a; }\\n.cs-next:hover .t span { transform: translateX(8px); }\\n.cs-foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 24px 0 40px; border-top: 1px solid #161514; color: #7a746b; }\\n.cs-foot a { text-decoration: none; color: #cfc8be; } .cs-foot a:hover { color: #fff; }\\n.cs a:focus-visible { outline: 2px solid #ff4d1a; outline-offset: 4px; }\\n@container (max-width: 820px) {\\n .cs-head, .cs-sec { display: block; }\\n .cs-head-r { padding-top: 0; margin-top: 40px; }\\n .cs-sec-l > div { position: static; }\\n .cs-sec-r { margin-top: 28px; }\\n .cs .cards, .cs .cmp, .cs .row, .cs .media.pair { grid-template-columns: 1fr; }\\n .cs .media.phones { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }\\n .cs .media.phones .frame { padding: 6px; }\\n .cs .gal.tees, .cs .gal.logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }\\n .cs .gal.art { columns: var(--mcols, 2); }\\n .cs .gal.tees, .cs .gal.logos { grid-template-columns: repeat(var(--mcols, 2), minmax(0, 1fr)); }\\n .cs-name { display: none; }\\n}\\n@media (prefers-reduced-motion: reduce) { .cs * { transition: none !important; } }\\n.cs .frame.ph { aspect-ratio: 16 / 10; border: 1px dashed #3a3632; background: #0b0a09; padding: 24px; text-align: center; color: #7a746b; }\\n.cs .frame.ph span { max-width: 32ch; line-height: 1.6; }\\n.cs .frame.ph.tall { aspect-ratio: 9 / 16; }\\n.cs-hero .frame.ph { width: min(100%, 880px); }\\n';const STUDIES={\"spotify\":{\"path\":\"/spotifyredesign\",\"next\":\"canvas\",\"title\":\"Spotify Redesign\",\"tagline\":\"Rethinking discovery on the mobile artist page\",\"hero\":{\"src\":\"https://framerusercontent.com/images/6NiSN4uO1NdRBgQOKsj7AuvG62U.webp\",\"alt\":\"Redesigned Spotify artist page on an iPhone\"},\"meta\":[[\"Role\",\"UX Research, Interaction Design\"],[\"Method\",\"Moderated usability testing\"],[\"Platform\",\"Spotify mobile app\"],[\"Tools\",\"Figma\"]],\"links\":[[\"View the prototype\",\"https://www.figma.com/proto/pmQtURlcV5erLLmtb87Ar2/COGS-187A-Final?node-id=1-2&starting-point-node-id=1%3A2&t=N7cgzE1Dlh3wg92d-1\"]],\"intro\":[\"Spotify is part of daily student life, yet its artist page makes it surprisingly hard to explore an artist's full catalog.\",\"This project set out to find exactly where listeners get lost, then redesign the artist page to reduce friction and make discovery easier.\"],\"sections\":[{\"kicker\":\"The original design\",\"heading\":\"One long scroll, no structure\",\"body\":[\"The mobile artist page stacks every type of content into one continuous feed. There's no navigation: popular tracks, podcasts and similar artists all share the same scroll. It looks clean at a glance, but that simplicity hides real friction as soon as you want more than the top five songs.\"],\"media\":[{\"src\":\"https://framerusercontent.com/images/WOq09jLAKMl2BW0oI8EuIfkmnM.webp\",\"alt\":\"Original Spotify artist page, top\"},{\"src\":\"https://framerusercontent.com/images/a1zjmrxTGTiYQDFYLTE05M9Lqo.webp\",\"alt\":\"Original Spotify artist page, middle\"},{\"src\":\"https://framerusercontent.com/images/wuMHoXd4JvNUoIWIvYiPJU4zlT4.webp\",\"alt\":\"Original Spotify artist page, bottom\"}],\"mediaLayout\":\"phones\"},{\"kicker\":\"Research \\xb7 Round 1\",\"heading\":\"What we set out to learn\",\"stats\":[[\"4\",\"Participants\"],[\"3\",\"Tasks per session\"],[\"10–20\",\"Minutes per session\"],[\"3\",\"Recurring pain points\"]],\"cards\":[{\"n\":\"01\",\"title\":\"Featured tracks are invisible\",\"text\":'\"Appears On\" sat at the very bottom of a long page. All four participants either missed it or only found it thanks to years of using the app. If users can\\'t find it, it might as well not exist.'},{\"n\":\"02\",\"title\":\"No single view of every track\",\"text\":\"Finding older songs meant opening albums one by one. There was no way to see an artist's full catalog in one place, so discovery came down to trial and error.\"},{\"n\":\"03\",\"title\":\"A cluttered vertical scroll\",\"text\":\"Albums, singles, podcasts, recommendations and similar artists shared one dense feed with no clear hierarchy. Participants overshot content and kept scrolling back.\"}]},{\"kicker\":\"Competitive analysis\",\"heading\":\"How other apps handle it\",\"compare\":[{\"name\":\"Apple Music\",\"img\":\"https://framerusercontent.com/images/1foyNrwxbKFqXfsRpubRrKczs.png\",\"good\":'Clearly labeled sections, a visible \"Appears On\", and sorting by date or popularity, all missing from Spotify on mobile.',\"bad\":\"Feels less personal, with fewer ways to discover new music.\",\"take\":'Inspired our tab structure and the more prominent \"Appears On\".'},{\"name\":\"YouTube Music\",\"img\":\"https://framerusercontent.com/images/XDmOti7cC54grKIOX7Ln8nctpY.png\",\"good\":\"Top and featured songs show immediately; singles, EPs and albums are neatly separated, with a music vs. live filter.\",\"bad\":\"The video-heavy layout can overwhelm music-only browsing.\",\"take\":\"Confirmed the value of showing top content first and ordering the catalog by date.\"},{\"name\":\"SoundCloud\",\"img\":\"https://framerusercontent.com/images/L51gZY5TvftOZmgnx31s0ZG8mc.png\",\"good\":\"An artist summary with a song count, and a release feed that makes older tracks easy to spot.\",\"bad\":\"Disorganized and hard to navigate; often called frustrating.\",\"take\":\"Showed us what to avoid, while confirming the value of an About section.\"}]},{\"kicker\":\"Design decisions\",\"heading\":\"Four changes, each grounded in research\",\"cards\":[{\"n\":\"01\",\"title\":\"Tabs for each task\",\"text\":\"Four labeled tabs (Popular, Discography, Appears On and About) replace the single scroll, so listeners jump straight to what they need.\"},{\"n\":\"02\",\"title\":\"View all tracks\",\"text\":\"One button shows the artist's whole catalog in a single chronological list. No more opening albums one by one to find older songs.\"},{\"n\":\"03\",\"title\":'\"Appears On\" as a main tab',\"text\":\"Features and collaborations move from the bottom of the page to their own tab, as easy to reach as the top songs.\"},{\"n\":\"04\",\"title\":\"Less vertical clutter\",\"text\":\"Music is separated from podcasts, merch and similar artists. Each tab shows only what it promises, with no interruptions mid-scroll.\"}]},{\"kicker\":\"The redesign\",\"heading\":\"A structured artist page\",\"body\":[\"The redesign focuses on the mobile artist page. The single feed becomes a tab layout that organizes content into four clear sections, each reachable from the top of the page.\"],\"media\":[{\"src\":\"https://framerusercontent.com/images/PBUQ1TDPndG3AOWcYjZ1rX6Y2E.gif\",\"alt\":\"Walkthrough of the redesigned artist page\"}],\"link\":0},{\"kicker\":\"Validation \\xb7 Round 2\",\"heading\":\"Testing both redesigns against the original\",\"body\":['Four new participants, none of whom had seen the prototypes, completed the same tasks on three versions: the original, Redesign A and Redesign B. The prototypes weren\\'t fully functional, so the task changed from \"add songs to a playlist\" to \"find specific songs\", which tested navigation and discoverability directly.'],\"cards\":[{\"title\":\"Faster task completion\",\"text\":\"Participants found songs noticeably faster in both redesigns. Tabs removed the aimless scrolling that slowed them down in the original.\"},{\"title\":'\"Appears On\" found',\"text\":'In Round 1 one participant never found it. In Round 2 everyone found featured tracks quickly, and several described it as a \"new feature\", even though it was always there.'},{\"title\":\"Less mental effort\",\"text\":\"Participants spent less time getting oriented and navigated with more confidence, even while first exploring the tabs.\"},{\"title\":\"Unanimous preference\",\"text\":'All four chose the redesign when asked which version Spotify should use, calling it \"cleaner\", \"more organized\" and \"finally makes sense\".'}]},{\"kicker\":\"Lessons learned\",\"heading\":\"What I'm taking forward\",\"cards\":[{\"n\":\"01\",\"title\":\"Visibility is usability\",\"text\":'\"Appears On\" felt brand new to Round 2 participants, though it existed all along. A hidden feature and a missing feature are effectively the same; placement and labeling decide whether something gets used.'},{\"n\":\"02\",\"title\":\"Success means less effort, not new visuals\",\"text\":\"Participants praised fewer taps, clearer paths and less scrolling, not the look. The redesign changed how Spotify thinks more than how it looks.\"},{\"n\":\"03\",\"title\":\"Prototype fidelity shapes your insights\",\"text\":\"Because participants couldn't actually add songs, we got strong navigation data but little on error handling or playlist building. A higher-fidelity prototype would have surfaced those issues.\"},{\"n\":\"04\",\"title\":\"Familiarity can hide usability problems\",\"text\":\"Experienced users finished tasks the design made hard because they'd learned to work around it. It's worth watching for moments when users succeed for the wrong reasons.\"}]}]},\"canvas\":{\"path\":\"/canvasredesign\",\"next\":\"leyenda\",\"title\":\"Canvas Redesign\",\"tagline\":\"A to-do list and notifications students can rely on\",\"hero\":{\"src\":\"https://framerusercontent.com/images/sbeJJ1A3qEM16WlDZDPlRgsCtc8.webp\",\"alt\":\"Redesigned Canvas to-do list on an iPhone\"},\"meta\":[[\"Role\",\"UX Research, Interaction Design\"],[\"Method\",\"User interviews, usability testing\"],[\"Platform\",\"Canvas LMS, mobile + desktop\"],[\"Focus\",\"Assignment tracking, notifications, GPA visibility\"]],\"links\":[[\"To-do list prototype\",\"https://www.figma.com/proto/tAXWECPTlal2Tze5NCk7EG/High-Fidelity-Canvas-Redesign?node-id=61-24&t=0feAYYn5vyUqknyM-1&scaling=scale-down&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=31%3A2&show-proto-sidebar=1\"],[\"Notifications prototype\",\"https://www.figma.com/proto/tAXWECPTlal2Tze5NCk7EG/High-Fidelity-Canvas-Redesign?node-id=522-1192&t=JbaQpNDbK0JBng1B-1&scaling=scale-down&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=31%3A2&show-proto-sidebar=1\"]],\"intro\":[\"Canvas is the leading LMS in North America, yet in our experience and research it pushes students to work around it rather than with it.\",\"Undergraduates with heavy course loads have little control over how Canvas organizes tasks and sends alerts. They lean on outside tools and workarounds, and still miss deadlines while drowning in notifications. This project finds where students hit friction day to day and proposes targeted redesigns.\"],\"sections\":[{\"kicker\":\"Context\",\"heading\":\"Why it matters\",\"body\":[\"Canvas serves more than 30 million students across 8,000+ institutions, and 38% of K–12 students in the US use it too. It's where courses, communication, coursework and grades live. Despite that reach, students keep separate to-do apps, ignore notifications, or check each course page by hand just to stay on top of deadlines.\"],\"stats\":[[\"50%\",\"North American LMS market share\"],[\"88%\",\"of college students report academic stress\"],[\"30M+\",\"students served\"],[\"8,000+\",\"institutions\"]]},{\"kicker\":\"User research\",\"heading\":\"Three pain points\",\"rows\":[{\"label\":\"Assignment tracking\",\"title\":\"A to-do list students can't trust\",\"text\":\"Students say Canvas's to-do list \\\"doesn't ever show everything\\\", so many keep a separate app or paper planner. That adds mental load and raises the risk of missed deadlines.\",\"img\":\"https://framerusercontent.com/images/Fr1lm7w3r8jYQdfMcgaPBUtOs0.png\",\"stats\":[[\"90%\",\"of Canvas sessions spent just checking what's due\"],[\"3+\",\"views cross-checked to find every assignment\"]]},{\"label\":\"Notification controls\",\"title\":\"Notification overload\",\"text\":\"Students get an alert for every discussion reply in every course, with no way to prioritize on mobile. Desktop has per-course controls; the mobile app doesn't, so students either ignore everything or miss what matters.\",\"img\":\"https://framerusercontent.com/images/XpBtBviKypmOIBVe9TXqRmGw1w.png\",\"stats\":[[\"0\",\"per-course notification controls on mobile\"],[\"88%\",\"of college students report academic stress\"]]},{\"label\":\"Academic visibility\",\"title\":\"No overall GPA view\",\"text\":'Canvas shows grades per course but no overall GPA or \"what-if\" calculator. Students calculate by hand or use third-party tools, which adds stress and takes away a sense of control.',\"img\":\"https://framerusercontent.com/images/PxaYrUiMsKxc2RWIhcvwaAHoYMs.png\",\"stats\":[[\"50%\",\"of the higher-ed LMS market\"],[\"6M+\",\"users at peak, so any fix reaches a lot of people\"]]}]},{\"kicker\":\"Interviews\",\"heading\":\"What students told us\",\"stats\":[[\"3\",\"Undergraduate participants\"],[\"2\",\"Tasks: weekly planning, notifications\"],[\"3\",\"Pain points: tracking, alerts, navigation\"]],\"quotes\":[{\"who\":\"Participant 1\",\"meta\":\"4th year \\xb7 6 courses \\xb7 laptop, phone, tablet\",\"quote\":\"Notifications should only fire when something meaningful happens, not every time a due date gets adjusted.\",\"text\":\"Relied on the to-do list but kept cross-checking the dashboard, and once missed an assignment that showed in one view but not the other. Found that mobile has only a global notification toggle, and used the Notes app to fill the gaps.\"},{\"who\":\"Participant 2\",\"meta\":\"4th year \\xb7 4 courses \\xb7 laptop, phone\",\"quote\":\"I thought I'd be able to edit notifications inside each course. When I finally found the settings, you can only change everything at once.\",\"text\":\"Used both the Dashboard and Calendar to piece the week together, since neither was enough alone. Went through each course, then the overflow menu, then global settings, and never found per-course control.\"},{\"who\":\"Participant 3\",\"meta\":\"4th year \\xb7 4 courses \\xb7 mostly laptop\",\"quote\":\"You have to go through a maze to find due dates. A lot of courses are moving away from Canvas for that reason.\",\"text\":\"Went course by course and often left Canvas for Gradescope or course websites. Tracked due dates from memory and had missed assignments. Wanted to filter alerts by type (grades, assignments, announcements) rather than more volume controls.\"}]},{\"kicker\":\"Redesign \\xb7 To-do list\",\"heading\":\"See the week at a glance\",\"body\":[\"The to-do list now opens with a weekly progress bar, shows effort badges (High / Medium) on each assignment card, and puts a reminder bell right on the card.\"],\"media\":[{\"src\":\"https://framerusercontent.com/images/15ma18hdcM3napKUDHRAp7HsYY.gif\",\"alt\":\"Walkthrough of the redesigned to-do list\"}],\"link\":0,\"cards\":[{\"title\":\"Progress you can see\",\"text\":\"Students never knew how much work was left. The progress bar shows weekly completion at a glance.\"},{\"title\":\"One-tap reminders\",\"text\":\"Setting a reminder used to mean opening the assignment. With the bell on the card, it's a single tap without losing your place.\"},{\"title\":\"Help prioritizing\",\"text\":\"Canvas never showed how demanding a task is, but students said effort decides what they do first. The badges make that call faster.\"}]},{\"kicker\":\"Redesign \\xb7 Notifications\",\"heading\":\"Alerts that make sense\",\"body\":['Notifications are grouped by date, and readable course names replace raw section codes (\"COGS 127\" instead of \"COGS127_SP26_A00\"). A master toggle on each course\\'s Manage Alerts page turns all of its notifications on or off in one tap, and \"Reset to Default\" is now a secondary button so it\\'s harder to hit by accident.'],\"media\":[{\"src\":\"https://framerusercontent.com/images/wYycyerYNFvHL4QMbBhW9uvPs.gif\",\"alt\":\"Walkthrough of the redesigned notifications page\"}],\"link\":1,\"cards\":[{\"title\":\"Less overload\",\"text\":\"Students called the unfiltered feed overwhelming. Grouping by date adds structure and makes it easier to scan.\"},{\"title\":\"Controls where students look\",\"text\":\"In testing, participants looked for per-course controls inside each course, so the toggle now lives there.\"},{\"title\":\"Fewer accidental resets\",\"text\":'\"Save Changes\" and \"Reset to Default\" used to look the same, making destructive resets too easy to trigger.'}]},{\"kicker\":\"Validation \\xb7 Round 2\",\"heading\":\"Testing Design A against Design B\",\"stats\":[[\"3\",\"Returning and new participants\"],[\"2\",\"Features tested\"],[\"2\",\"Design variants per feature\"]],\"quotes\":[{\"who\":\"Participant 1\",\"meta\":\"4th year \\xb7 4 courses \\xb7 laptop, phone\",\"quote\":\"The bar is really helpful. I was always guessing how much I had left; seeing a percentage makes it feel more manageable.\",\"text\":\"Preferred Design A's horizontal progress bar and inline reminder bell, but used Design B's day-by-day filter through all seven days. Found long course codes a constant snag, and wanted Design A with B's day filter added.\"},{\"who\":\"Participant 2\",\"meta\":\"4th year \\xb7 6 courses \\xb7 laptop, phone, tablet\",\"quote\":\"When I tap Wednesday it only shows me Wednesday's stuff? Yes, that's exactly what I'd want.\",\"text\":\"Preferred Design B: the day filter cut overwhelm and the circular progress felt more motivating. Wanted a course filter neither design had, and found B's reminder bell harder to spot inside the card.\"},{\"who\":\"Participant 3\",\"meta\":\"4th year \\xb7 4 courses \\xb7 laptop, phone\",\"quote\":\"I like that this design makes saving changes clearer, instead of assuming the back button saves them.\",\"text\":\"Tested notifications only and preferred Design B throughout: grouping by date, timestamps, and checking off alerts once read. Suggested combining the to-do list and notifications to cut the friction between them.\"}]},{\"kicker\":\"Lessons learned\",\"heading\":\"Consistency, readability, control\",\"body\":[\"Canvas works around its users instead of with them, and students have quietly accepted that as normal. This project showed the bar for improvement doesn't have to be high: most of what participants asked for wasn't a new feature, but consistency, readability and control.\",\"When students can trust that assignments appear where they expect, set a reminder without leaving their list, and silence a course in one tap, they stop compensating for the system and start relying on it.\"]}]},\"gfx\":{\"path\":\"/gfx\",\"next\":\"spotify\",\"kind\":\"Showroom\",\"title\":\"Graphic Design\",\"tagline\":\"Apparel graphics, social art and logos\",\"hero\":{\"src\":\"https://framerusercontent.com/images/5x4OyX63TL7UkZ1he6vBXwfxiLY.webp\",\"alt\":\"Two Kobe Bryant apparel graphics\"},\"meta\":[[\"Role\",\"Freelance Graphic Designer\"],[\"Focus\",\"Merch graphics, social media, logos\"],[\"Tools\",\"Photoshop, Illustrator, Lightroom\"]],\"links\":[],\"intro\":[\"A showroom of my freelance graphic design work: graphics made for t-shirts, art for social media, and logos.\",\"Most of the apparel work is sports-inspired: vintage-style tees built from layered photography, bold type and textured grain.\"],\"sections\":[{\"kicker\":\"Apparel\",\"heading\":\"On the shirt\",\"body\":[\"Every graphic in this showroom was made to be printed. Here are a few of them on the tees they were designed for.\"],\"gallery\":[{\"src\":\"https://framerusercontent.com/images/xWfTORIlvKq6IHAGuutKPa3R5o.png?scale-down-to=1200\",\"alt\":\"81 Point Game graphic on a black tee\"},{\"src\":\"https://framerusercontent.com/images/8zyek0Za2DjyL1khNlj0PbTo.png?scale-down-to=1200\",\"alt\":\"Kobe Bryant graphic on a cream tee\"},{\"src\":\"https://framerusercontent.com/images/eHEgpvu5EMSHZcRMCsZ0SW34I.png?scale-down-to=1200\",\"alt\":\"Kobe Bryant Lakers graphic on a black tee\"}],\"galleryLayout\":\"tees\"},{\"kicker\":\"Merch graphics\",\"heading\":\"Print artwork\",\"gallery\":[{\"src\":\"https://framerusercontent.com/images/zW5gfg7HItjgLmCA6PGYsFW16TE.png?scale-down-to=1200\",\"alt\":\"Kobe Bryant 81-point game tribute graphic\"},{\"src\":\"https://framerusercontent.com/images/UfEc3aWcS0ay3uCFHTtln9NqNLM.png?scale-down-to=1200\",\"alt\":\"Kobe Bryant Lakers throwback graphic\"},{\"src\":\"https://framerusercontent.com/images/6lj4EM54ce6QMuDb5ex80t4CAHs.png?scale-down-to=1200\",\"alt\":\"Kobe Bryant dunk graphic\"},{\"src\":\"https://framerusercontent.com/images/ERuKdtMw14tgbx6vfnqSzTdcOEw.png?scale-down-to=1200\",\"alt\":\"Stephen Curry Golden State graphic\"},{\"src\":\"https://framerusercontent.com/images/eGGobiNRgZxFrbnzJSDqZDvBOk.png?scale-down-to=1200\",\"alt\":\"Kobe Bryant 'stone cold killer' graphic\"},{\"src\":\"https://framerusercontent.com/images/xFweQ8N93uuEGwDte4VNBow0Us.png?scale-down-to=1200\",\"alt\":\"Kobe Bryant Lakers number 24 graphic\"},{\"src\":\"https://framerusercontent.com/images/yx05gjYI3z55NXDrfkuy73smQ.png?scale-down-to=1200\",\"alt\":\"Los Angeles Dodgers graphic\"},{\"src\":\"https://framerusercontent.com/images/u3NbZETjXrb72P6AvPVqQ5QBc.png?scale-down-to=1200\",\"alt\":\"Tiger Woods and Charlie Woods graphic\"},{\"src\":\"https://framerusercontent.com/images/8ivEBj6a2tJc4ldQRbHpktx78.png?scale-down-to=1200\",\"alt\":\"Michael Jordan 'The Last Shot' graphic\"}],\"galleryLayout\":\"art\"},{\"kicker\":\"Social media\",\"heading\":\"Banners and posts\",\"gallery\":[{\"src\":\"https://framerusercontent.com/images/AYWTxckySddaAOTmYdJXf1xADMw.png?scale-down-to=1200\",\"alt\":\"GFXJAY social media banner\"}],\"galleryLayout\":\"wide\"},{\"id\":\"logos\",\"kicker\":\"Logos\",\"heading\":\"Logo design\",\"gallery\":[{\"src\":\"https://framerusercontent.com/images/SueAAQRUFsy0Oy9usbUrz1XhGRo.png?scale-down-to=1200\",\"alt\":\"Trolley of the Lost logo\"},{\"src\":\"https://framerusercontent.com/images/Ipc7a3V2ANoznKpR7PpiBJHNxjQ.png?scale-down-to=1200\",\"alt\":\"Leyenda Legal Group logo\"},{\"src\":\"https://framerusercontent.com/images/EG88cUKk8wBYoHexO1QxrTd9H0.png?scale-down-to=1200\",\"alt\":\"JbyG monogram\"},{\"src\":\"https://framerusercontent.com/images/3yMSvc1EUdvwHG8qmh3Tek7ubk.png?scale-down-to=1200\",\"alt\":\"Jewels by Grace wordmark in black\"},{\"src\":\"https://framerusercontent.com/images/NLwmg6emMbvruLrFOhFv75xfJbE.png?scale-down-to=1200\",\"alt\":\"Jewels by Grace wordmark in red\"},{\"src\":\"https://framerusercontent.com/images/gDaPO51sgpllBaWMcsHL9bT2Lw.png?scale-down-to=1200\",\"alt\":\"Jewels by Grace wordmark in gold\"},{\"src\":\"https://framerusercontent.com/images/F0G2ECRZWviKzcJU3EjKFvnZyQ.png?scale-down-to=1200\",\"alt\":\"Canvas logo\"}],\"galleryLayout\":\"logos\"}]},\"leyenda\":{\"path\":\"/leyendalegal\",\"next\":\"gfx\",\"title\":\"Leyenda Legal Group\",\"tagline\":\"A bilingual website built to turn visitors into clients\",\"hero\":{\"src\":\"https://framerusercontent.com/images/7ebeCaLcsimBZS8mNPlHLqIwMPA.webp\",\"alt\":\"Leyenda Legal Group website on a laptop and phone\"},\"meta\":[[\"Role\",\"UX Research, Interaction Design, Brand Strategy\"],[\"Client\",\"Leyenda Legal Group, Los Angeles\"],[\"Team\",\"Nosheen Ullah, Jalen Marcelino, An Truong, Raul Valadez\"],[\"Course\",\"COGS 187B Interaction Design Studio, UC San Diego\"]],\"links\":[[\"Mobile prototype\",\"https://www.figma.com/proto/NZwTEkYVzcryDSwND8AQyz/COGS187B-Team-17-Work?page-id=189%3A130&node-id=307-538&viewport=300%2C280%2C0.32&t=MSbPAoLJoPJ6tRO8-1&scaling=scale-down&content-scaling=fixed&starting-point-node-id=307%3A538\"]],\"intro\":[\"Leyenda Legal Group is a bilingual immigration law firm in the LA area. Many of its clients speak Spanish and are navigating complex legal situations with limited digital experience.\",\"The old website failed the people it was built for: no booking flow, no language toggle, and little reason to stay. We redesigned it from the ground up to build trust, surface the right information fast, and make it easy to take the next step.\"],\"sections\":[{\"kicker\":\"Objectives\",\"heading\":\"What we set out to change\",\"body\":[\"The original site saw almost no engagement beyond people looking up the address: no bookings, no form submissions. We set out to make it an active tool for winning clients, not a digital business card.\"],\"list\":[\"Increase consultation bookings with a clear, easy path to call or schedule\",\"Drive engagement through bilingual support, trust signals and prominent calls to action\",\"Reduce drop-off with navigation that gets people where they need to go within seconds\",\"Earn trust before a client ever picks up the phone\"],\"stats\":[[\"25+\",\"Screens designed, desktop and mobile\"],[\"20+\",\"Usability and structure changes\"],[\"5+\",\"Audience-focused changes, like a bilingual toggle on every page\"]]},{\"kicker\":\"Audiences\",\"heading\":\"Who we designed for\",\"cards\":[{\"n\":\"01\",\"title\":\"Immigrant clients\",\"text\":\"Spanish-dominant, less comfortable with technology, and anxious about sharing personal information online. Heard about Leyenda on 1020 AM radio and has never hired a lawyer. Needs: a bilingual toggle that defaults to Spanish, plain language with no jargon, visible privacy assurance before any form, and a document checklist for each service.\"},{\"n\":\"02\",\"title\":\"Families of immigrants\",\"text\":\"Bilingual and second-generation, managing a parent's immigration case after the family received a legal notice. Short on time and wants credibility fast. Needs: practice areas listed up front, the founder's credentials visible right away, quick booking with clear pricing, and a phone number as a fallback.\"},{\"n\":\"03\",\"title\":\"Non-immigration clients\",\"text\":\"English-dominant and referred by a friend after a car accident. Needs to confirm quickly that the firm handles personal injury before leaving. Needs: non-immigration services clearly featured, strong trust signals and testimonials, a professional look, and booking within one click.\"}]},{\"kicker\":\"Design challenges\",\"heading\":\"Before and after\",\"rows\":[{\"label\":\"Visual hierarchy\",\"title\":\"A human face and a clear path\",\"before\":\"Every element felt equally important, there was no call to action above the fold, and a courthouse photo made the firm look like a criminal-law practice rather than an immigration firm.\",\"text\":'The hero now features the attorney\\'s photo and mission statement to build trust right away, with \"Work with Us\" and \"View All Areas\" above the fold so every visitor has a next step.',\"img\":\"https://framerusercontent.com/images/iCuIFojoun13WaeLbWwlMvnK464.png\"},{\"label\":\"Navigation\",\"title\":\"Resources grouped, with context\",\"before\":\"Three of seven menu items (EOIR, USCIS and Privacy Policy) opened government websites with no explanation, leaving people confused and lost.\",\"text\":'Those links now sit under one \"Resources\" menu, with short pages that explain what each site is and what you can do there before linking out.',\"img\":\"https://framerusercontent.com/images/rOTDFBdfCoYVxoMVEkKkiPYxs.png\"},{\"label\":\"Practice areas\",\"title\":\"A scannable index plus visual cards\",\"before\":\"Twelve practice areas lived in one long, text-heavy list. People who knew what they wanted had to scroll past everything, and people exploring had nothing to catch their eye.\",\"text\":\"A quick index lets people jump straight to an area, and image cards with short descriptions serve those who want to browse. Both work on the same page.\",\"img\":\"https://framerusercontent.com/images/jeT7dpvIOrDfterfAR4mA09Pnw.png\"}]},{\"kicker\":\"The prototypes\",\"heading\":\"Mobile and desktop\",\"media\":[{\"src\":\"https://framerusercontent.com/images/QaZQjF731iWBzLqH4nHOm0cqMeo.gif\",\"alt\":\"Desktop prototype walkthrough\"},{\"src\":\"https://framerusercontent.com/images/mb4Zvt06nVtHGN0lj6YEYxRDXxc.gif\",\"alt\":\"Mobile prototype walkthrough\"}],\"mediaLayout\":\"pair\",\"link\":0},{\"kicker\":\"Lessons learned\",\"heading\":\"Listen more than you design\",\"body\":[\"This was my first project for a real client with real stakes. The biggest shift wasn't in the design itself; it was learning that a good process means listening more than designing.\",\"Jesse's context (who his clients are, where they come from, what worries them when they walk in) shaped nearly every decision about hierarchy, language and tone. A website is only as trustworthy as the understanding behind it.\"]}]}};const esc=s=>String(s??\"\").replace(/[&<>\"]/g,c=>({\"&\":\"&\",\"<\":\"<\",\">\":\">\",'\"':\""\"})[c]);// images without a src render as labeled placeholders until screenshots are added\nSTUDIES.jewels={path:\"/jewelsbygrace\",next:\"spotify\",title:\"Jewels By Grace\",tagline:\"Custom storefront features for a one-of-a-kind jewelry brand\",hero:{src:\"https://framerusercontent.com/images/jPQQbSq0AM6gI6pa8lKfyMjkDg.webp\",alt:\"Design Your Charm Bracelet page on a laptop\"},meta:[[\"Role\",\"UI/UX Design & Development\"],[\"Timeline\",\"March 2025 – Present\"],[\"Platform\",\"Shopify\"],[\"Tools\",\"Figma, Shopify, Liquid, JavaScript, Playwright\"]],links:[[\"Visit jewelsbygrace.com\",\"https://jewelsbygrace.com\"]],intro:[\"Jewels By Grace is a Shopify-based jewelry brand specializing in vintage and one-of-a-kind pieces.\",\"I work on the store’s UI/UX design and front-end development on an ongoing basis, translating business goals into custom, production-ready storefront features that Shopify’s stock theme tools don’t support out of the box.\"],sections:[{kicker:\"The problem\",heading:\"One-of-a-kind pieces, stock tools\",body:[\"Every charm and bracelet in the catalog is one of a kind, each its own product or variant. The standard storefront wasn’t built for that.\"],cards:[{n:\"01\",title:\"No way to picture the finished bracelet\",text:\"Customers couldn’t see how charms would look together on a bracelet before buying. A static product grid doesn’t convey a build-your-own experience.\"},{n:\"02\",title:\"No home for editorial content\",text:\"There was no way to publish blog and editorial content with a template that matched the brand.\"}]},{kicker:\"Process\",heading:\"Design first, then prove it works\",list:[\"UX research and Figma prototyping before writing any code\",\"A custom Liquid section with vanilla JavaScript, refined over multiple rounds of real feedback\",\"Surveyed the real catalog to derive filtering rules instead of guessing\",\"Every feature verified with Playwright browser tests (drag, cart payloads, UI states) before shipping\"]},{kicker:\"Mock drafts\",heading:\"Early drafts of the builder\",body:[\"Mock drafts of the charm bracelet builder, made before the final product: placing charms on the bracelet, and the selections list with a running subtotal.\"],media:[{src:\"https://framerusercontent.com/images/Dvk9aKxNVxJqeYSdIERn2pjjiwc.webp\",alt:\"Draft builder with three charms placed on the bracelet\"},{src:\"https://framerusercontent.com/images/NEMrZsoA9pGzq7bXGjnTM3Ad7Qc.webp\",alt:\"Draft selections list with subtotal and Add Bracelet to Cart\"}],mediaLayout:\"pair\"},{kicker:\"Feature \\xb7 Bracelet builder\",heading:\"Drag-and-drop charm bracelet builder\",body:[\"Customers drag charms onto a photo of the bracelet and preview the result in real time, then add the whole design to their cart in one step.\"],media:[{src:\"https://framerusercontent.com/images/SzB2liDX0fwuZ78kIYMPz1gZgU.webp\",alt:\"Bracelet builder with the charm sticker sheet and filters\"},{src:\"https://framerusercontent.com/images/zjjBVwknUSSCQLva00e0woLifM.webp\",alt:\"Two charms placed on the bracelet, with selections and subtotal\"}],mediaLayout:\"pair\",cards:[{n:\"01\",title:\"Custom drag engine\",text:\"A pointer-based drag engine built from scratch, with a tap-to-place fallback.\"},{n:\"02\",title:\"A filterable “sticker sheet”\",text:\"Search and filter charms by metal, designer, diamond shape, carat weight, motif (tags auto-derived from product tags) and price range, with sorting and pagination.\"},{n:\"03\",title:\"Real-time subtotal\",text:\"The price updates as charms are added to or removed from the bracelet.\"},{n:\"04\",title:\"One order, one click\",text:\"The bracelet and every charm on it go into the cart together as a single order via Shopify’s Cart AJAX API.\"}]},{kicker:\"Feature \\xb7 Blog\",heading:\"A blog that matches the brand\",body:[\"A custom blog section gives the brand a home for editorial content: a custom “Bunny Mellon” blog template, dynamic hub pages for each category, and a central blog index page.\",\"The template wasn’t only for new posts: more than 70 of the brand’s existing blog posts were rebuilt on it, so the whole archive now shares one consistent design.\"],media:[{src:\"https://framerusercontent.com/images/sSlfevMDMnih2RVkGprwL7K4.webp\",alt:\"Our Blog index on jewelsbygrace.com, on mobile\"},{src:\"https://framerusercontent.com/images/hQcpBKzS0JqPdoT5Yu3NkUL8Cbg.webp\",alt:\"Bunny Mellon article template on mobile\"}],mediaLayout:\"pair\"},{kicker:\"Engineering details\",heading:\"Under the hood\",cards:[{title:\"Theme Editor double init\",text:\"Fixed a Theme Editor double-initialization bug that left an animation stuck.\"},{title:\"Dropdown stacking context\",text:\"Fixed a dropdown stacking-context bug caused by a position: sticky ancestor.\"},{title:\"Cleaner dragging\",text:\"Removed text selection highlighting during drag.\"}]},{kicker:\"Outcome\",heading:\"Live on the store\",body:[\"Both features are live on jewelsbygrace.com. Customers can design a bracelet from one-of-a-kind charms and check out in a single order, and the new blog template carries the brand’s editorial archive, including more than 70 existing posts rebuilt on it.\"],stats:[[\"70+\",\"Existing blog posts rebuilt on the new template\"],[\"1\",\"Order for the bracelet and every charm on it\"],[\"Mar 2025\",\"Ongoing design and development since\"]]}]};// empty image slot: a labeled frame until the real screenshot is added\nconst ph=m=>`Image placeholder · ${esc(m.alt)}`;const ext=url=>`href=\"${esc(url)}\" target=\"_blank\" rel=\"noopener\"`;function render(id,backHref=\"/\",pathFor=s=>s.path,override){const s=override||STUDIES[id];if(!s)return\"\";const nxt=STUDIES[s.next];const sec=(x,i)=>{const parts=[];if(x.body)parts.push(`