[ { "id": "69dd3db8f375fec140938774", "slug": "tviste-0", "title": "Tviste 0", "description": "Service design for a student housing area project", "category": "Design", "year": "2024", "tags": [ "Service design", "CX", "Community", "PropTech" ], "tools": [], "image": "/images/cases/880341142a3e_1776036710408.webp", "image_light": "/images/cases/499b1b5c0ed6_1776036531934.webp", "image_gradient": "from-slate-700 to-slate-900", "status": "published", "featured": false, "cover_visible": true, "cover_size": "md", "card_image_fit": "contain", "blocks": [ { "id": "mekiaithmnwcstg3", "type": "heading", "props": { "text": "Overview", "level": 2, "align": "left" } }, { "id": "387wtomhmnwct1m8", "type": "paragraph", "props": { "text": "- Worked in a cross-functional team where we conducted research and developed prototypes, for the improvement of a local student housing area, with focus on safety, inclusion, smart technologies and sustainability. \n", "size": "lg", "opacity": 100, "color": "var(--palette-vaz9szt)" } }, { "id": "r3yrnvfimnwcxkut", "type": "paragraph", "props": { "text": "- Tvistevägen or Tviste is a big student housing area in Umeå with over 1000 students.\n- The project was in collaboration with eXpression Umeå, Länsförsäkringar, Umeå Energi, and Campus X. ", "size": "lg", "opacity": 100, "color": "var(--palette-vaz9szt)" } }, { "id": "9ruyipc1mnwcyd0z", "type": "list", "props": { "items": [ { "text": "User research", "sub": [] }, { "text": "Rapid prototyping", "sub": [] }, { "text": "Design thinking", "sub": [] }, { "text": "Industrial design", "sub": [] }, { "text": "IoT", "sub": [] }, { "text": "Branding", "sub": [] }, { "text": "Service design", "sub": [] }, { "text": "Customer Experience (CX)", "sub": [] } ], "ordered": false, "size": "base", "spacing": "loose" } }, { "id": "70338oihmnwd2zjk", "type": "paragraph", "props": { "text": "Tviste 0 is a vision of designing a central hub and a community on Tvistevägen through service design, industrial design, sustainability, behavioral design, strategic architecture and branding. \n\n", "size": "lg", "opacity": 100, "color": "var(--palette-vaz9szt)" } }, { "id": "348xvnbsmnwe8xln", "type": "paragraph", "props": { "text": "https://expressionumea.se/program/prototype-week-2024-tvistevagen/\n", "size": "lg", "opacity": 100, "color": "var(--palette-2)" } }, { "id": "srihyqxnmnwd5yb6", "type": "tags", "props": { "tags": [ "NDA" ], "color": "#f97316", "variant": "filled" } }, { "id": "y7he5vbbmnwdexxw", "type": "image", "props": { "src": "/images/cases/9ea3f0bf2e2a_1776036384642.webp", "alt": "", "fit": "contain", "aspect": "16/9", "radius": "md", "size": "full" } } ], "content_width": 65, "project_type": "work", "sort_order": 19, "created_at": null, "updated_at": null }, { "id": "69dd372d4c9ac5ecde1e681e", "slug": "co2-impact-with-digital-product-passports", "title": "CO2 Impact with Digital Product Passports", "description": "Nationwide system design idea ", "category": "nationwide policy design", "year": "2024", "tags": [ "Impact idea" ], "tools": [ "figma" ], "image": "/images/cases/vq1r1pkjcuq_1775822100933.webp", "image_light": null, "image_gradient": "from-slate-700 to-slate-900", "status": "published", "featured": false, "cover_visible": true, "cover_size": "sm", "card_image_fit": "contain", "blocks": [ { "id": "kmt6pve3mnsuoqo4", "mb": 14, "type": "heading", "props": { "text": "Digital Product Passports (DPP) are coming", "align": "left", "color": "var(--palette-w1xychk)", "level": 2 } }, { "id": "sdd6bgqdmnsup2k4", "mt": 14, "type": "paragraph", "props": { "size": "lg", "text": "**Now imagine if all products had a digital product passport or estimated CO2 equivilant emissions. **", "color": "var(--palette-w1xychk)", "opacity": 100 } }, { "id": "j63g2dwemnsuqq8z", "mb": 20, "type": "paragraph", "props": { "size": "lg", "text": "What are all the possibilities of DPP + CO2e estimates? ", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "ym9qtxtvmnsuzyqu", "mt": 20, "type": "paragraph", "props": { "size": "lg", "text": "After designing with nature as a participant for design in the course \"Hot Team- Innovation project\" at Umeå Institute of Design", "color": "var(--palette-w1xychk)", "opacity": 100 } }, { "id": "8ebqrro5mnsvjmmb", "mt": 8, "type": "callout", "props": { "text": "An idea emerged", "variant": "tip" } }, { "id": "ryzralg2mnsv1wv5", "mt": 24, "type": "paragraph", "props": { "size": "lg", "text": "I believe it has a huge potential impact.", "color": "var(--palette-3)", "opacity": 100 } }, { "id": "at76sts5mnqcctnr", "mb": 8, "mt": 24, "type": "callout", "props": { "text": "It's a big, fragile, idea. ", "variant": "neutral" } }, { "id": "4rgdjj2omnsv7no1", "mt": 14, "type": "heading", "props": { "text": "Want to hear it out?", "align": "center", "level": 2 } }, { "id": "u27j3r7amnsv84x6", "type": "cta-button", "props": { "href": "mailto:abbe.alrubaiy@gmail.com", "align": "center", "label": "abbe.alrubaiy@gmail.com", "openInNewTab": true } } ], "content_width": 70, "project_type": "school", "sort_order": 20, "created_at": "2026-04-08T17:35:47.764244+00:00", "updated_at": "2026-04-12T18:40:48.597635+00:00" }, { "id": "69dd372c4c9ac5ecde1e681d", "slug": "responsible-zero", "title": "Responsible Zero", "description": "SaaS helping organizations analyze and reduce their climate emissions", "category": "Design", "year": "2025", "tags": [ "Startup", "freelance work", "product designer" ], "tools": [ "figma" ], "image": "/images/cases/tto1q3yd91n_1775668506817.svg", "image_light": null, "image_gradient": "from-slate-700 to-slate-900", "status": "published", "featured": false, "cover_visible": true, "cover_size": "sm", "card_image_fit": "contain", "blocks": [ { "id": "7h0b9ubfmnstynxe", "mt": 0, "type": "paragraph", "props": { "size": "sm", "text": "Feb 2025 - Sep 2025", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "358uycudmnstoldh", "type": "heading", "props": { "text": "Summary", "align": "left", "level": 2 } }, { "id": "t18yr1fvmnstovxk", "mb": 8, "type": "paragraph", "props": { "size": "lg", "text": "Designed a SaaS platform with a startup at Uminova Innovation, that helps organizations analyze and reduce their carbon emissions in an effective and goal-oriented way.", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "wdc6tlmsmnstmyo5", "mt": 8, "type": "list", "props": { "size": "base", "items": [ { "sub": [], "text": "Figma prototype" }, { "sub": [], "text": "Unique interactive data visualization " }, { "sub": [], "text": "Worked closely with developers to ensure smooth design hand-offs by using a shared common design system" }, { "sub": [], "text": "Designed an interactive prototype that helped secure funding from a municipality." } ], "ordered": false, "spacing": "loose" } }, { "id": "d1c7bg54mnstknwi", "mt": 16, "type": "tags", "props": { "tags": [ "NDA" ], "color": "#f97316", "variant": "filled" } } ], "content_width": 80, "project_type": "work", "sort_order": 17, "created_at": "2026-04-08T17:26:30.300323+00:00", "updated_at": "2026-04-12T18:40:48.533907+00:00" }, { "id": "69dd372b4c9ac5ecde1e681c", "slug": "alingss-leende", "title": "Alingsås Leende", "description": "Private dental clinic", "category": "Design and development", "year": "2025", "tags": [ "Website builder" ], "tools": [], "image": "/images/cases/uqjot6nw3tj_1775668220678.webp", "image_light": null, "image_gradient": "from-slate-700 to-slate-900", "status": "published", "featured": false, "cover_visible": true, "cover_size": "xl", "card_image_fit": "contain", "blocks": [ { "id": "bkp1jsgsmnsso96m", "type": "heading", "props": { "text": "Overview", "align": "left", "level": 2 } }, { "id": "l0e2ub2emnssagq3", "type": "paragraph", "props": { "size": "lg", "text": "- This is part of a pro-bono (free) proposed strategy consultation and complete redesign of a private dental clinic in Alingsås.\n- Built using One.com + custom code components\n- SEO and GEO strategy, taking them from rank 5-6 --> 3. \n- Social media strategy \n- I also designed custom icons :) ", "opacity": 100 } }, { "id": "ckipfi3lmnsscnj1", "type": "image", "props": { "alt": "", "fit": "contain", "src": "/images/cases/jky6o715qv_1775818529223.webp", "size": "md", "aspect": "1/1", "radius": "md", "caption": "It's a husband + wife family-owned dental clinic" } } ], "content_width": 75, "project_type": "hobby", "sort_order": 16, "created_at": null, "updated_at": null }, { "id": "69dd372a4c9ac5ecde1e681b", "slug": "flowrite", "title": "Flowrite", "description": "A gamified word document editor with Spotify API integration  ", "category": "Vibe coding", "year": "2025", "tags": [], "tools": [ "lovable" ], "image": "/images/cases/b8yltz15xu7_1775799160090.webp", "image_light": null, "image_gradient": "from-slate-700 to-slate-900", "status": "published", "featured": false, "cover_visible": true, "cover_size": "xl", "card_image_fit": "contain", "blocks": [ { "id": "w446cfe2mnsh029x", "type": "heading", "props": { "text": "Summary", "align": "left", "color": "var(--palette-vaz9szt)", "level": 2 } }, { "id": "l08izkxvmnsh0im1", "type": "paragraph", "props": { "size": "lg", "text": "This project was created during a research conference paper course in university. \n\n\n**I'm not the biggest fan of academic writing**, especially if you are not allowed to use any AI for producing text. \n\n\nI didn't like writing in Overleaf, it has a poor dark mode and a complex interface. ", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "i0diuiksmnsh5puu", "type": "callout", "props": { "text": "An idea popped in my head", "variant": "tip" } }, { "id": "0753tkrgmnsh6eyd", "mb": 8, "type": "paragraph", "props": { "size": "lg", "text": "Imagine if there was an editor in which whenever I was typing, music would play, and whenever I stop, the musc would stop... with a similar feeling of playing a piano.", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "lboqptzvmnsha9wh", "mt": 8, "type": "paragraph", "props": { "size": "lg", "text": "I thought hey, let's try to see if Lovable could build it. \n\n\n\n\n\n\nAnd to my complete surprise, it pretty much one-shotted it. With only 2 prompts, I had a fully functioning word document editor with a synced Spotify's playback API that had control over my music based on my keyboard input. \n\n\n\nThat was my big Aha moment in Lovable which also sparked my mindset of \"everything is possible\". ", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "072penb4mnshl0zu", "type": "image", "props": { "alt": "", "fit": "contain", "src": "/images/cases/fkemcpinfqs_1775800197460.webp", "size": "full", "aspect": "16/9", "radius": "md" } } ], "content_width": 80, "project_type": "hobby", "sort_order": 18, "created_at": "2026-04-10T05:27:44.98583+00:00", "updated_at": "2026-04-12T18:40:48.810392+00:00" }, { "id": "69dd37294c9ac5ecde1e681a", "slug": "potens", "title": "Potens", "description": "Enhancing Independence and Quality of Life for Individuals with Disabilities in Australia", "category": "Design, product and development", "year": "2025", "tags": [ "Social Media Technology", "International collaboration", "group project", "Figma prototype", "real-time messages", "service design", "product development", "React native", "Expo Go" ], "tools": [ "figma", "cursor", "react" ], "image": "/images/cases/x18c7m8cvd_1775761371853.webp", "image_light": null, "image_gradient": "from-slate-700 to-slate-900", "status": "published", "featured": false, "cover_visible": true, "cover_size": "xl", "card_image_fit": "contain", "blocks": [ { "id": "c2ydvdfnmnssrlr3", "type": "heading", "props": { "text": "Enhancing Independence and Quality of Life for Individuals with Disabilities in Western Australia.", "align": "left", "level": 2 } }, { "id": "nzs57drwmnsssmvf", "type": "paragraph", "props": { "size": "lg", "text": "- This was part of a project course which included International + interdisciplinary collaboration with business and marketing students from Edith Cowan University in Australia. \n- We at Umeå university were the design and engineering team. \n- I implemented feed posts and messaging, using Cursor. ", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "c56x0601mnst5eqr", "type": "image", "props": { "alt": "", "fit": "contain", "src": "/images/cases/ix45bfvoj9i_1775819649522.webp", "size": "full", "aspect": "16/9", "radius": "xl" } }, { "id": "zeg24hk7mnssybug", "mt": 14, "type": "heading", "props": { "text": "A highlight", "align": "left", "color": "var(--palette-vaz9szt)", "level": 2 } }, { "id": "4svnri9zmnssypy9", "type": "paragraph", "props": { "size": "lg", "text": "I convinced our 30-people marketing students team in Australia to pivot to another idea than their proposed one. ", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "ik55cpj7mnst75gm", "mt": 8, "type": "paragraph", "props": { "size": "base", "text": "The marketing students in Australia wanted to create an accessible job board portal, but I did not think that was value-creating. \n\nSo I ran a collaborative brainstorming workshop in Figjam, came up with a new idea for a more impactful service, presented it to the team in Australia and they were fully onboard and thought it was a better idea too.", "color": "var(--palette-vaz9szt)", "opacity": 100 } } ], "content_width": 80, "project_type": "school", "sort_order": 12, "created_at": "2026-04-09T11:12:51.026222+00:00", "updated_at": "2026-04-12T18:40:48.587446+00:00" }, { "id": "69dd37284c9ac5ecde1e6819", "slug": "dinpt", "title": "DinPT", "description": "Co-founding a platform for personal training ", "category": "FULL PRODUCT DEVELOPMENT", "year": "2025-2026", "tags": [ "Co-founder", "GTM", "Brand design", "startup", "Lovable", "Strategy", "Growth", "Business design", "Research", "System thinking" ], "tools": [ "lovable" ], "image": "/images/cases/vsjwuaoekl_1775661701291.svg", "image_light": null, "image_gradient": "from-slate-700 to-slate-900", "status": "published", "featured": false, "cover_visible": true, "cover_size": "md", "card_image_fit": "contain", "blocks": [ { "id": "wlr1xkvvmnsry5rz", "type": "heading", "props": { "text": "Overview", "align": "left", "level": 2 } }, { "id": "k3v9cxz4mnsrybl3", "type": "paragraph", "props": { "size": "lg", "text": "Co-founding and building DinPT.se, a platform that connects clients with personal trainers, empowering trainers with digital tools, and making personal training more accessible. \n\nBasically a sort of Airbnb for personal trainers: Airbnb + Trainerize + novel additions in DinPT.\n\nMe and my co-founder, a PT, aim to create the best PT-experience for both PT:s and clients. \n\n", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "5e95uguwmnsrz85q", "type": "paragraph", "props": { "size": "lg", "text": "Here's a sneak peek.", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "3p9p3zqcmnss5xxd", "type": "image", "props": { "alt": "", "fit": "contain", "src": "/images/cases/niofs08h06_1775818098632.webp", "size": "md", "aspect": "16/9", "radius": "xl", "caption": "Sneak peek" } } ], "content_width": 69, "project_type": "hobby", "sort_order": 13, "created_at": "2026-04-08T15:21:05.501649+00:00", "updated_at": "2026-04-12T18:40:48.741623+00:00" }, { "id": "69dd37274c9ac5ecde1e6818", "slug": "abbeengineer", "title": "abbe.engineer", "description": "Building a portfolio site builder ", "category": "development", "year": "2026", "tags": [ "Agentic engineering", "Vibe coding" ], "tools": [ "lovable", "claude", "codex", "cursor", "paper2", "typescript", "figma", "antigravity", "copilot cli" ], "image": "/images/cases/cg9ylytbsw9_1775732339487.svg", "image_light": null, "image_gradient": "from-slate-700 to-slate-900", "status": "published", "featured": false, "cover_visible": true, "cover_size": "sm", "card_image_fit": "contain", "blocks": [ { "id": "wemhg2yfmnsrkyp5", "type": "callout", "props": { "text": "project page not complete", "variant": "warning" } }, { "id": "euwov9k5mnq6ure8", "type": "paragraph", "props": { "size": "lg", "text": "Work in progress... \n\nThis portfolio is not complete, it started in Lovable, but is not anymore. \n\nIt has over 100 types of setting controls, built-in CMS, and a case/project page builder.\n\nI built many features, designs and microinteractions that I decided to scrap as they were not good enough and felt gimmicky. \n\nBasically: ", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "673764y2mnsroyj9", "mb": 4, "type": "image", "props": { "alt": "", "fit": "contain", "src": "/images/cases/hx3rq8e48hp_1775817177982.webp", "size": "full", "aspect": "free", "radius": "xl", "caption": "" } }, { "id": "z8d22k3smnsrvdkv", "mt": 4, "type": "image", "props": { "alt": "", "fit": "contain", "src": "/images/cases/60izke6hm53_1775817477210.webp", "size": "full", "aspect": "1/1", "radius": "2xl", "caption": "Meta" } } ], "content_width": 80, "project_type": "hobby", "sort_order": 14, "created_at": null, "updated_at": null }, { "id": "69dd37264c9ac5ecde1e6817", "slug": "relay", "title": "Relay", "description": "Healthcare Pre-Visit AI Assistant", "category": "Human-AI Interaction", "year": "2025", "tags": [ "Lovable", "Elevenlabs", "Prototype", "Human-AI interaction", "3 days" ], "tools": [ "lovable" ], "image": "/images/cases/319oygkuquw_1775659133447.webp", "image_light": null, "image_gradient": "from-slate-700 to-slate-900", "status": "published", "featured": false, "cover_visible": true, "cover_size": "sm", "card_image_fit": "contain", "blocks": [ { "id": "5d3nw5p5mnsot92c", "type": "heading", "props": { "text": "Overview", "align": "left", "color": "var(--palette-vaz9szt)", "level": 2 } }, { "id": "yh3dnkl2mnsotfat", "type": "paragraph", "props": { "size": "lg", "text": "- A short weekend project for a Human-AI interaction course where I created a prototype and presentation demo of a pre-visit AI Assistant. \n\n- Relay is a concept for asynchronous Human-Human pre-visit communication. \n\n- Doctor and patient communicates through Relay, gathering all the important information before an in-person doctor visit. So if an in-person visit is mandated, Relay will have procured all the relevant information of the case so the doctor knows exactly what to do, instead of spending time on the repetative common questions.\n ", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "f1jxvjt8mnsp43ig", "type": "paragraph", "props": { "size": "lg", "text": "- Resulting in more efficient healthcare and hopefully better patient experience, as the patient can communicate anything through Relay, anytime. ", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "256yt3ekmnq4fkck", "type": "callout", "props": { "text": "Inspired by Tandem Health. ", "variant": "info" } }, { "id": "3canq60pmnsogn4z", "type": "two-column", "props": { "left": [ { "id": "fpaoe5s0mnsogp2e", "type": "image", "props": { "alt": "", "fit": "contain", "src": "/images/cases/awpeqhgwg9c_1775811575892.webp", "size": "lg", "aspect": "4/3", "radius": "xl" } } ], "right": [ { "id": "36lx6dt8mnsogrlo", "type": "image", "props": { "alt": "", "fit": "contain", "src": "/images/cases/zpqny93ajge_1775811575892.webp", "size": "lg", "aspect": "4/3", "radius": "xl" } } ], "split": "50/50" } }, { "id": "ev7a2ttomnsoizgx", "type": "two-column", "props": { "left": [ { "id": "3pzz8mb9mnsoj79a", "type": "image", "props": { "alt": "", "fit": "contain", "src": "/images/cases/6n2lom9la3d_1775811575892.webp", "size": "lg", "aspect": "4/3", "radius": "xl" } } ], "right": [ { "id": "m7k3wbhsmnsoj95q", "type": "image", "props": { "alt": "", "fit": "contain", "src": "/images/cases/jfi8txochs_1775811657474.webp", "size": "lg", "aspect": "4/3", "radius": "xl" } } ], "split": "50/50" } }, { "id": "67vujalmmnsopdwk", "type": "two-column", "props": { "left": [ { "id": "f9tcfl11mnsopfyt", "type": "image", "props": { "alt": "", "fit": "contain", "src": "/images/cases/idv428jfgve_1775812185198.webp", "size": "lg", "aspect": "4/3", "radius": "xl" } } ], "right": [ { "id": "ymibibjwmnsophjj", "type": "image", "props": { "alt": "", "fit": "contain", "src": "/images/cases/02xwe22hgkk5_1775812212007.webp", "size": "full", "aspect": "4/3", "radius": "xl" } } ], "split": "50/50" } } ], "content_width": 80, "project_type": "school", "sort_order": 15, "created_at": "2026-04-08T14:29:37.689121+00:00", "updated_at": "2026-04-12T18:40:48.520448+00:00" }, { "id": "69dd37264c9ac5ecde1e6816", "slug": "ar-virtual-bus-stops", "title": "AR Virtual Bus Stops", "description": "Sustainable mobility service design concept", "category": "Concept and service design", "year": "2025", "tags": [ "AR", "Design Concept", "Service Design", "Mobility service" ], "tools": [ "figma" ], "image": "/images/cases/yc9fx34ekor_1775725302226.webp", "image_light": null, "image_gradient": "from-slate-700 to-slate-900", "status": "published", "featured": false, "cover_visible": true, "cover_size": "lg", "card_image_fit": "contain", "blocks": [ { "id": "84n2ohd8mnsqnxe8", "type": "heading", "props": { "text": "Summary", "align": "left", "level": 2 } }, { "id": "dicgzddemnsr7zye", "type": "paragraph", "props": { "size": "lg", "text": "- I experimented with design concepts for a new potential service for sustainable mobility. ", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "rcdd5ppsmnsrkdio", "type": "paragraph", "props": { "size": "lg", "text": "- Compared 2D UI, 2D + Mobile AR Mode UI, and glasses AR UI only. \n", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "i2pfnj42mnsrcd9c", "type": "image", "props": { "alt": "", "fit": "contain", "src": "/images/cases/6vrureiji5w_1775816573723.webp", "size": "lg", "aspect": "16/9", "radius": "xl" } }, { "id": "fx99a711mnsrcfzu", "type": "two-column", "props": { "left": [ { "id": "c41dwx9rmnsrchse", "type": "image", "props": { "alt": "", "fit": "contain", "src": "/images/cases/cewuofxthwl_1775816573723.webp", "size": "lg", "aspect": "16/9", "radius": "xl" } } ], "right": [ { "id": "ljad0p5cmnsrcjpl", "type": "image", "props": { "alt": "", "fit": "contain", "src": "/images/cases/zfa53mb34ki_1775816573722.webp", "size": "lg", "aspect": "16/9", "radius": "xl" } } ], "split": "50/50" } }, { "id": "wyi5vnqnmnsqoqng", "mt": 14, "type": "image", "props": { "alt": "", "fit": "contain", "src": "/images/cases/wzvepteq92f_1775815973530.webp", "size": "full", "aspect": "free", "radius": "2xl" } }, { "id": "pawo0gmjmnsrh6rz", "mt": 14, "type": "image", "props": { "alt": "", "fit": "contain", "src": "/images/cases/3h9miay0quk_1775816815263.webp", "size": "lg", "aspect": "16/9", "radius": "xl" } } ], "content_width": 100, "project_type": "school", "sort_order": 10, "created_at": "2026-04-09T07:00:47.942661+00:00", "updated_at": "2026-04-12T18:40:48.395004+00:00" }, { "id": "69dd37254c9ac5ecde1e6815", "slug": "mixed-reality-astrolabe-prototype", "title": "Mixed Reality Astrolabe Prototype", "description": "An XR Prototype made in Bezi", "category": "XR Design and prototyping", "year": "2025", "tags": [ "Bezi", "Mixed Reality", "MR Prototype", "Bodystorming", "XR" ], "tools": [ "bezi", "figma" ], "image": "/images/cases/ztptmfenfx8_1775669494298.webp", "image_light": null, "image_gradient": "from-slate-700 to-slate-900", "status": "published", "featured": false, "cover_visible": true, "cover_size": "xl", "card_image_fit": "contain", "blocks": [ { "id": "8i79oaormnspvln5", "type": "tags", "props": { "tags": [ "Designing for Extended Realities course", "Mixed Reality prototype" ], "color": "#3b82f6", "variant": "filled" } }, { "id": "5ckjhnfgmnspxe0q", "type": "heading", "props": { "text": "Overview", "align": "left", "level": 2 } }, { "id": "liqypku8mnspxmlk", "type": "paragraph", "props": { "size": "base", "text": "My design concept is an MR prototype of an Astrolabe, a historical astronomical instrument used for many purposes and throughout many different generations of people and groups of people. \n\nFor the Mixed Reality prototype, the user is in a scenario where they are instructed to calculate the height/angle of a digital sun. This is the first part in the main task of calculating the time during daytime.", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "2igg788rmnsqg8xm", "type": "callout", "props": { "text": "This was a project made in 1 day", "variant": "warning" } }, { "id": "3tdsx8sdmnsq1z3v", "type": "paragraph", "props": { "size": "lg", "text": "- Learned Bezi, created a physical prototype, and developed a functioning mixed reality prototype in 1 day.", "color": "var(--palette-1)", "opacity": 100 } }, { "id": "wv3k0t2amnsqj9xa", "type": "paragraph", "props": { "size": "lg", "text": "- Recorded a \"bodystorming\" (brainstorming but through physical prototyping) video. \n\n- Recorded a prototype scenario video. ", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "qlfset04mnsq4uiz", "type": "image", "props": { "alt": "", "fit": "contain", "src": "/images/cases/2udg5605t65_1775814525060.webp", "size": "md", "aspect": "16/9", "radius": "xl" } }, { "id": "1nw0ub7lmnsqaqnd", "type": "image", "props": { "alt": "", "fit": "contain", "src": "/images/cases/6mfvy3xlcp8_1775814841119.webp", "size": "md", "aspect": "16/9", "radius": "xl" } }, { "id": "d3ohqmj3mnsq4fih", "type": "image", "props": { "alt": "", "fit": "contain", "src": "/images/cases/xwrlk64zvz_1775814525060.webp", "size": "lg", "aspect": "4/3", "radius": "xl", "caption": "Process" } }, { "id": "a6na2929mnsr2mq6", "type": "paragraph", "props": { "size": "base", "text": "I started with physical prototyping using all kinds of items including cardboards to create a scaled up replica of an astrolabe and the MR scenario. I experimented with space, distance and time, through learning by doing, with real lightning, real shadows and physical perspective, where I gained many insights.\n\n\nFor example, one of the challenges was how do you show the final/perfect alignment? The sun beam and shadows, how do you visually show 2 virtual/digital shadows? \n\n\nThis was one of the microinteractions I chose to explore. \n", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "xnq59koumnsq7nv4", "type": "two-column", "props": { "left": [ { "id": "vt5ivlkvmnsq7pyn", "type": "image", "props": { "alt": "", "fit": "contain", "src": "/images/cases/jx0n9y6guxh_1775814525060.webp", "size": "full", "aspect": "4/3", "radius": "xl", "caption": "Microinteraction prototype" } } ], "right": [ { "id": "fjy1l2d3mnsq7rx9", "type": "image", "props": { "alt": "", "fit": "contain", "src": "/images/cases/py08bvvljjs_1775814866447.webp", "size": "full", "aspect": "4/3", "radius": "xl", "caption": "Microinteraction design when aligned" } } ], "split": "50/50" } }, { "id": "vzhsl7dwmnsqbxmf", "type": "image", "props": { "alt": "", "fit": "contain", "src": "/images/cases/4ej5om53iz3_1775814525060.webp", "size": "lg", "aspect": "4/3", "radius": "xl", "caption": "Bezi prototype screenshot from my video. " } } ], "content_width": 75, "project_type": "school", "sort_order": 9, "created_at": "2026-04-08T17:28:18.891349+00:00", "updated_at": "2026-04-12T18:40:48.517112+00:00" }, { "id": "69dd37244c9ac5ecde1e6814", "slug": "inspark", "title": "Inspark", "description": "Kick-off app for university students", "category": "product, prototyping and mobile development ", "year": "2024", "tags": [ "Figma", "React native", "Expo Go", "ProtoPie", "group project", "Product development", "Agile", "Databases" ], "tools": [ "react", "figma", "protopie" ], "image": "/images/cases/kj8jan0zyj_1775659763280.webp", "image_light": null, "image_gradient": "from-slate-700 to-slate-900", "status": "published", "featured": false, "cover_visible": true, "cover_size": "sm", "card_image_fit": "contain", "blocks": [ { "id": "7mwrqjdtmnspdl1j", "type": "heading", "props": { "text": "Summary", "align": "left", "level": 2 } }, { "id": "u9jz4qklmnspddye", "type": "paragraph", "props": { "size": "lg", "text": "**\"Prototype Development for Mobile Applications\" course\n**\n\n", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "98yqp75hmnt5uge8", "type": "paragraph", "props": { "size": "lg", "text": "The goal was to experience the full digital product development chain, work agile, and learn as much as possible.", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "9yki8v3bmnt5v57k", "mb": 14, "mt": 14, "type": "paragraph", "props": { "size": "lg", "text": "\n Idea ➜ product ➜ design ➜ prototype ➜ test ➜ develop. \n", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "c4ilemz3mnt5vd82", "mb": 12, "type": "paragraph", "props": { "size": "lg", "text": "By the end of the course, we would present our work and seek hypothetical funding (from our teachers) for further development. ", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "xmf0diqlmnt5xpy1", "type": "paragraph", "props": { "size": "lg", "text": "\n- Length: 8-9 weeks\n\n- Agile project with sprints\n\n- Created a Figma prototype \n\n- Created and built an advanced prototype using ProtoPie (solo)\n\n- Constructed technical architecture in React Native, Expo Go, including database schemas. \n\n- Developed parts of the mobile app prototype", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "hzjx4i5hmnq6ikm2", "mb": 14, "type": "image", "props": { "alt": "", "fit": "contain", "src": "/images/cases/1tzh86ilujk_1775660680123.webp", "size": "lg", "aspect": "16/9", "radius": "xl" } }, { "id": "f110bfyumnspk5r8", "mt": 24, "type": "heading", "props": { "text": "How do you know Abbe has designed something in a Figma canvas?", "align": "left", "color": "var(--palette-vaz9szt)", "level": 2 } }, { "id": "200rhu5ymnspkwmt", "type": "image", "props": { "alt": "", "fit": "cover", "src": "/images/cases/va6c4a5lapm_1775668506816.webp", "size": "full", "aspect": "16/9", "radius": "xl", "caption": "An unfiltered screenshot of how I sometimes work in Figma " } }, { "id": "55gdl53hmnsplb66", "type": "paragraph", "props": { "size": "lg", "text": "You see this.", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "3gow2eiqmnsprd8n", "mt": 14, "type": "paragraph", "props": { "size": "lg", "text": "I always design iteratively, experimenting, iterating, putting care in into small details, asking for feedback, designing many alternate versions, and leaving branches my teammates can take inspiration from. ", "color": "var(--palette-vaz9szt)", "opacity": 100 } } ], "content_width": 70, "project_type": "school", "sort_order": 8, "created_at": "2026-04-08T14:45:22.474637+00:00", "updated_at": "2026-04-12T18:40:48.429916+00:00" }, { "id": "69dd37234c9ac5ecde1e6813", "slug": "grannsam", "title": "Grannsam", "description": "Digital Neighborhoods for Simplified and Sustainable Living. ", "category": "business and product idea", "year": "2025", "tags": [ "Service Design", "Business", "Product", "Research", "Business model canvas", "Logo design", "\"Founder\"" ], "tools": [ "figma" ], "image": "/images/cases/6y03hmmwsu9_1775664269599.webp", "image_light": null, "image_gradient": "from-slate-700 to-slate-900", "status": "published", "featured": false, "cover_visible": true, "cover_size": "xl", "card_image_fit": "contain", "blocks": [ { "id": "20p0o36umnsnyqfi", "type": "heading", "props": { "text": "Summary", "align": "left", "level": 2 } }, { "id": "lw9yf6lmmnsnyycy", "type": "paragraph", "props": { "size": "lg", "text": "A concept service and business design for a digital neighborhood app I would be passionate about building one day, conceptualized in \"Service Design and Business Models\" course.\n", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "cog0yhllmnso4jrd", "type": "paragraph", "props": { "size": "lg", "text": "The vision is big, but I would love to chat about it! ", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "bny2r2e6mnsnya21", "type": "image", "props": { "alt": "", "fit": "cover", "src": "/images/cases/4ofdjpli994_1775668506817.webp", "size": "lg", "aspect": "16/9", "radius": "xl", "caption": "Business Model Canvas " } }, { "id": "bge47kxgmnx38bqx", "type": "image", "props": { "src": "/images/cases/j7n4fa98pwi_1776078255652.webp", "alt": "", "fit": "contain", "aspect": "free", "radius": "xl", "size": "full", "caption": "Vision of Grannsam" } } ], "content_width": 64, "project_type": "school", "sort_order": 11, "created_at": null, "updated_at": null }, { "id": "69dd37224c9ac5ecde1e6812", "slug": "multi-agent-drones-software", "title": "Multi-Agent Drones Software", "description": "AI drones fleet UX design concept for search & rescue missions ", "category": "Concept design", "year": "2023", "tags": [ "Multi-Agent Orchestration", "Human-Computer interaction", "group project", "Human-AI Collaboration" ], "tools": [ "figma" ], "image": "/images/cases/you3i1m0l_1775656798709.webp", "image_light": null, "image_gradient": "from-slate-700 to-slate-900", "status": "published", "featured": false, "cover_visible": true, "cover_size": "lg", "card_image_fit": "contain", "blocks": [ { "id": "sxg9lrr9mnsngzka", "type": "heading", "props": { "text": "Summary", "align": "left", "color": "var(--palette-vaz9szt)", "level": 2 } }, { "id": "m20whf8kmnsnh9rg", "type": "paragraph", "props": { "size": "lg", "text": "AI-powered drone fleet application concept for rescue missions.", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "oi9mupq8mnsnr4y9", "type": "paragraph", "props": { "size": "lg", "text": "- During a 3 weeks Human-Computer interaction course group project. ", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "ry05l2kmmnsnurry", "type": "paragraph", "props": { "size": "lg", "text": "- I was responsible for the core solution, interaction design, AI UX and concept design", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "hry6x9o2mnsnou7i", "type": "paragraph", "props": { "size": "lg", "text": "- ** I came up with an innovative Human-AI interaction design and collaboration with AI-driven insights/sightings from the drones. It's Low Fidelity, so I chose not to show it here, but happily available upon request!**", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "xftvwbo8mnq4vmbs", "mb": 4, "type": "image", "props": { "alt": "", "fit": "contain", "src": "/images/cases/4r5gk1slzx_1775658418473.webp", "size": "lg", "aspect": "1/1", "radius": "md", "caption": "Selecting which drones to deploy" } }, { "id": "aksc3fpxmnq4t2l7", "mt": 4, "type": "two-column", "props": { "left": [ { "id": "jdi6ndrbmnq4t4hx", "type": "image", "props": { "alt": "", "fit": "contain", "src": "/images/cases/w31vx0bmgat_1775657812886.webp", "aspect": "1/1", "radius": "xl", "caption": "Configurating search settings" } } ], "right": [ { "id": "pkl66hv7mnq4t6ge", "type": "image", "props": { "alt": "", "fit": "contain", "src": "/images/cases/y12gk3jsz4g_1775657824595.webp", "aspect": "1/1", "radius": "xl", "caption": "Ready for deployment" } } ], "split": "50/50" } } ], "content_width": 70, "project_type": "school", "sort_order": 7, "created_at": "2026-04-08T13:55:07.541181+00:00", "updated_at": "2026-04-12T18:40:48.767184+00:00" }, { "id": "69dd37214c9ac5ecde1e6811", "slug": "ux-internship", "title": "UX Internship", "description": "Human-Machine Interface Design at ABB Automation", "category": "UX Engineering", "year": "2025-2026", "tags": [ "Figma", "Lovable", "Advanced prototyping", "Human-Machine Interfaces", "UI", "UX Design", "UX Engineering" ], "tools": [ "lovable", "figma" ], "image": "/images/cases/fl9g9xilcys_1775661347133.webp", "image_light": null, "image_gradient": "from-slate-700 to-slate-900", "status": "published", "featured": false, "cover_visible": true, "cover_size": "md", "card_image_fit": "contain", "blocks": [ { "id": "kmubpj5vmnsm95tu", "mt": 8, "type": "paragraph", "props": { "size": "lg", "text": "Overview", "opacity": 100 } }, { "id": "jpq9hio5mnq70fem", "type": "paragraph", "props": { "size": "lg", "text": "- UX project at ABB Automation involving next-generation Human-Machine Interfaces (HMI). \n\n\n- Designed multiple interfaces and designed multiple prototypes in Figma + Lovable. ", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "vh6h7zw3mnsm3dcv", "type": "image", "props": { "alt": "", "fit": "contain", "src": "/images/cases/jncwvdii6ae_1775807862495.webp", "size": "sm", "aspect": "1/1", "radius": "md", "caption": "Prototyping in Lovable" } }, { "id": "xjvlcmr5mnq70rru", "mt": 14, "type": "tags", "props": { "tags": [ "NDA" ], "color": "#f59e0b", "variant": "filled" } } ], "content_width": 65, "project_type": "work", "sort_order": 6, "created_at": "2026-04-08T15:14:49.983503+00:00", "updated_at": "2026-04-12T18:40:48.704619+00:00" }, { "id": "69dd37204c9ac5ecde1e6810", "slug": "ordloopen", "title": "Ordloopen", "description": "AI-powered EdTech platform", "category": "Design", "year": "2025-2026", "tags": [ "AI UX", "AI interface design", "Startup", "freelance work", "product designer", "Design engineering" ], "tools": [ "paper2", "figma", "pencil", "claude" ], "image": "/images/cases/cmudcoy6ov6_1776019101731.webp", "image_light": null, "image_gradient": "from-slate-700 to-slate-900", "status": "published", "featured": false, "cover_visible": true, "cover_size": "md", "card_image_fit": "contain", "blocks": [ { "id": "setjloyomnsuca31", "mt": 0, "type": "paragraph", "props": { "size": "sm", "text": "Oct 2025 - Ongoing", "color": "var(--palette-vaz9szt)", "opacity": 80 } }, { "id": "6htwagz3mnsud1kt", "type": "heading", "props": { "text": "Overview", "align": "left", "color": "var(--palette-vaz9szt)", "level": 2 } }, { "id": "2vo3g26mmnsubcbf", "type": "paragraph", "props": { "size": "lg", "text": "Enhancing the user experience and interface of Ordloopen’s AI-powered platform to make vocabulary learning more accessible, intuitive and engaging for teachers and students.", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "vyd1fnwkmnsu9szj", "mb": 14, "mt": 8, "type": "list", "props": { "size": "base", "items": [ { "sub": [], "text": "AI-powered platform" }, { "sub": [], "text": "UX audit" }, { "sub": [], "text": "UX Design " }, { "sub": [], "text": "AI-assisted design" }, { "sub": [], "text": "Design engineering" }, { "sub": [], "text": "Design system" }, { "sub": [], "text": "Strategy" } ], "ordered": false, "spacing": "loose" } }, { "id": "lo6hn38fmnsuembg", "mt": 14, "type": "tags", "props": { "tags": [ "NDA" ], "color": "#f97316", "variant": "outlined" } } ], "content_width": 75, "project_type": "work", "sort_order": 5, "created_at": null, "updated_at": null }, { "id": "69dd371d4c9ac5ecde1e680e", "slug": "iot-service-design-project", "title": "IoT Service Design project", "description": "Sustainable Utilization of Group Study Rooms", "category": "Hardware + Software + Service Design", "year": "2024", "tags": [ "IoT", "Python", "Node-RED", "Raspberry PI", "Group project", "Service design", "Interaction design" ], "tools": [ "python", "nodered", "vs code", "javascript" ], "image": "/images/cases/wwfcx9e7tt_1775653022594.webp", "image_light": null, "image_gradient": "from-slate-700 to-slate-900", "status": "published", "featured": false, "cover_visible": true, "cover_size": "lg", "card_image_fit": "contain", "blocks": [ { "id": "9tvzkvtcmnoioum2", "type": "heading", "props": { "text": "Overview", "align": "left", "color": "var(--palette-w1xychk)", "level": 2 } }, { "id": "tlfe684cmnoip0nj", "mb": 14, "type": "paragraph", "props": { "size": "lg", "text": "- Sustainable utilization of group study rooms at Umeå University prototype through service design + IoT hardware + web app. \n", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "wsmj7ldhmnt3fhft", "mb": 14, "type": "paragraph", "props": { "size": "lg", "text": "- This project was developed in the course \"Service development and design for the Internet of Things\". \n", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "pbrppvnmmnt3hzho", "mb": 14, "type": "paragraph", "props": { "size": "lg", "text": "- **Duration**: ~1 month on 50%, 4 person team. \n", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "azml0euomnt32flw", "type": "heading", "props": { "text": "Problem", "align": "left", "level": 2 } }, { "id": "hxx5vy7gmnt32ovn", "mb": 14, "type": "paragraph", "props": { "size": "lg", "text": "Group study rooms are a high-demand campus resource, yet they are frequently underutilized due to a disconnect between digital bookings and physical activity. Students often reserve rooms days in advance for longer periods than necessary, which results in rooms remaining empty while appearing \"unavailable\" to others. This inefficiency is compounded by a current cancellation process that is difficult and inaccessible, preventing unused time slots from being released to students who need them on short notice.", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "3moeaiwamnsmqzl5", "mt": 14, "type": "paragraph", "props": { "size": "lg", "text": "Summary", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "zlkvdw6qmnsmsh6w", "type": "paragraph", "props": { "size": "lg", "text": "- Developed a functioning prototype using python, Node-RED and raspberry pi.\n- Audio sensor + motion sensor\n- Button and light\n- All programmed/connected to the application.\n- Received high praise from the faculty", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "iizhttnxmnsmy8c7", "type": "paragraph", "props": { "size": "lg", "text": "My key contributions were the idea of the project problem, service design, core UX, web app development, MQTT programming, and some Node-RED flows. \n", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "d0utf8dqmnt0if16", "mt": 8, "type": "paragraph", "props": { "size": "lg", "text": "Interactions and system design ", "opacity": 90 } }, { "id": "d4kz82jpmnt2967h", "type": "paragraph", "props": { "size": "lg", "text": "Application: the primary method for booking a room is through a digital web application where users select a room, timeslot, and input their their email address.", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "3kslszllmnt23jsv", "type": "paragraph", "props": { "size": "lg", "text": "The system has both physical and digital interactions that complement each other, creating a flexible, emergent system designed to maximize sustainable room utilization.", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "hm3l35hnmnt0yk8m", "type": "paragraph", "props": { "size": "lg", "text": "Cancelling an ongoing booked session should be as easy as possible in order to prevent rooms from sitting empty while \"booked\", so other students may use them. To ensure sustainable usage, the system has three cancellation methods:", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "tuf0o9damnt0z72p", "type": "list", "props": { "size": "base", "items": [ { "sub": [], "text": "Physical Button: A button inside the room allows for the immediate cancellation of an ongoing session, resulting in smooth UX and reduces reliance on the web app." }, { "sub": [], "text": "Digital Interface: Users can cancel via the application by entering the email used during the booking process" }, { "sub": [], "text": "Automatic Triggers: If a room remains inactive for a specific period, the system automatically cancels the booking to make the room available for others." } ], "ordered": false, "spacing": "loose" } }, { "id": "h1sf5oh0mnt11zlt", "mt": 16, "type": "paragraph", "props": { "size": "lg", "text": "Status indicators", "opacity": 90 } }, { "id": "u1cdo0urmnt1ikn8", "mt": 8, "type": "paragraph", "props": { "size": "base", "text": "The system visualizes room availability through both the digital application and a physical LED diode placed outside the room. This dual approach helps students find study spots efficiently, even without relying solely on the application. The room status is categorized into three states:", "color": "var(--palette-vaz9szt)", "opacity": 90 } }, { "id": "joi8fjgzmnt1jyny", "mb": 4, "mt": 8, "type": "two-column", "props": { "left": [ { "id": "y7j9ps6xmnt1k1vt", "type": "paragraph", "props": { "size": "base", "text": "Green:", "color": "var(--palette-3)", "opacity": 100 } } ], "right": [ { "id": "hrhdc842mnt1k40v", "type": "paragraph", "props": { "size": "base", "text": "Available", "color": "var(--palette-vaz9szt)", "opacity": 100 } } ], "split": "10/90" } }, { "id": "2xmt39bfmnt1mir3", "mb": 4, "mt": 4, "type": "two-column", "props": { "left": [ { "id": "y7j9ps6xmnt1k1vt", "type": "paragraph", "props": { "size": "base", "text": "Yellow:", "color": "var(--palette-6)", "opacity": 100 } } ], "right": [ { "id": "hrhdc842mnt1k40v", "type": "paragraph", "props": { "size": "base", "text": "Busy but not booked", "color": "var(--palette-vaz9szt)", "opacity": 100 } } ], "split": "10/90" } }, { "id": "vdmo48pzmnt1nk1w", "mt": 4, "type": "two-column", "props": { "left": [ { "id": "y7j9ps6xmnt1k1vt", "type": "paragraph", "props": { "size": "base", "text": "Red: ", "color": "#d10000", "opacity": 100 } } ], "right": [ { "id": "hrhdc842mnt1k40v", "type": "paragraph", "props": { "size": "base", "text": "Booked", "color": "var(--palette-vaz9szt)", "opacity": 100 } } ], "split": "10/90" } }, { "id": "msmw2t6xmnt2mb4q", "mt": 16, "type": "paragraph", "props": { "size": "lg", "text": "Why the yellow status?", "opacity": 90 } }, { "id": "ucjrg7phmnt2llzu", "mt": 8, "type": "paragraph", "props": { "size": "lg", "text": "- This offers the ability to use a room for quick, spontaneous or shorter periods of time, without having to book it online, which results in better UX. \n\n", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "6rmplizbmnt2v4i7", "mt": 16, "type": "paragraph", "props": { "size": "lg", "text": "Why the LED diode outside the room?", "opacity": 90 } }, { "id": "fww0busymnt2uwhb", "mb": 14, "mt": 4, "type": "paragraph", "props": { "size": "lg", "text": "- Students walking and scouting for empty rooms can easily see if a room is empty and unbooked, without having to check the web app for a room's status. \n\n- Attracts students to underutilized spaces and allow for spontaneous use without requiring constant digital interactions.\n", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "kufaav73mnsn8oxx", "mb": 14, "mt": 8, "type": "callout", "props": { "text": "The course's focus were solely on technical implementation and NOT UX/UI", "variant": "warning" } }, { "id": "m4l8wsinmnq2676w", "type": "image", "props": { "alt": "", "fit": "contain", "src": "/images/cases/deyghbh96ff_1775653495592.webp", "size": "lg", "aspect": "4/3", "radius": "xl", "caption": "" } } ], "content_width": 70, "project_type": "school", "sort_order": 4, "created_at": null, "updated_at": null }, { "id": "69dd371e4c9ac5ecde1e680f", "slug": "master-thesis-at-abb", "title": "Master thesis at ABB", "description": "Exploring Interaction Concepts for Multi-Agent Orchestration in Industrial Automation Systems", "category": "Human-AI interaction", "year": "2026 ", "tags": [ "Mutli-Agent Orchestration", "AI UX", "Design Patterns for AI interfaces", "Langgraph", "Explainable AI", "NDA" ], "tools": [ "lovable", "figma", "claude", "pencil" ], "image": "/images/cases/5sgoss9ucnf_1775661208073.webp", "image_light": null, "image_gradient": "from-slate-700 to-slate-900", "status": "published", "featured": true, "cover_visible": true, "cover_size": "md", "card_image_fit": "contain", "blocks": [ { "id": "euwov9k5mnq6ure8", "type": "paragraph", "props": { "size": "lg", "text": "Thesis Work - Exploring Interaction Concepts for Multi-Agent Orchestration in Industrial Automation Systems\n", "color": "var(--palette-w1xychk)", "opacity": 90 } }, { "id": "dzbp81h9mnslb6l7", "type": "paragraph", "props": { "size": "lg", "text": "Future process control will increasingly rely on multi-agent systems that optimize objectives such as quality, energy, and throughput. Yet operators and engineers face challenges in understanding, supervising, and intervening when orchestration becomes complex or opaque. This thesis investigates how to design user-friendly, transparent, and adaptive interactions with multi-agent orchestration to reduce cognitive overload and enhance trust.\n", "color": "var(--palette-vaz9szt)", "opacity": 80 } }, { "id": "5maxf96imnsld7pw", "mt": 14, "type": "paragraph", "props": { "size": "lg", "text": "My role and responsibilities (according to the posting)", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "uk8aec0tmnslbshw", "type": "list", "props": { "size": "base", "items": [ { "sub": [], "text": "Investigate how multi-agent orchestration can be performed, supervised, configured (e.g. adjustment based on human user’s objectives set-up) in process control contexts (e.g., view multiple agent objectives and trade-offs like balancing quality, energy, and throughput and intervene in orchestration, or trouble-shooting facilitation)" }, { "sub": [], "text": "Design and prototype interaction concepts (proof-of-concept) that illustrate how users (e.g. operators/system engineers) could have a user-friendly seamless process when working with multi agents where users may get cognitive overload" }, { "sub": [], "text": "Conduct concept validation sessions with domain experts or potential users to gather feedback on the concept" }, { "sub": [], "text": "Summarize findings into design implications for the broader multi-agent interaction framework" } ], "ordered": false, "spacing": "normal" } }, { "id": "uau97uipmnsledu2", "type": "paragraph", "props": { "size": "lg", "text": "", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "se9fskmqmnyl6l8p", "type": "heading", "props": { "text": "Lovable ", "level": 2, "align": "left" } }, { "id": "tw9y4kdrmnyl73it", "type": "paragraph", "props": { "text": "- I inspired the UX team at ABB CRC to use Lovable and also held a presentation to the UX team on how I prototype with Lovable, tips & tricks, and how to get started. ", "size": "lg", "opacity": 100, "color": "var(--palette-vaz9szt)" } } ], "content_width": 70, "project_type": "work", "sort_order": 3, "created_at": null, "updated_at": null }, { "id": "69dd371c4c9ac5ecde1e680d", "slug": "eli", "title": "Eli", "description": "All-In-One Electric Vehicle charging app", "category": "Design", "year": "2023", "tags": [ "UX Design", "Service Design", "Co-creation", "Group project", "UX Research", "Innovation", "Designing for user experience", "Systems thinking" ], "tools": [ "figma" ], "image": "/images/cases/5ygo6pwd4hy_1775653828105.webp", "image_light": null, "image_gradient": "from-slate-700 to-slate-900", "status": "published", "featured": true, "cover_visible": true, "cover_size": "sm", "card_image_fit": "contain", "blocks": [ { "id": "qggnvs3lmnsysst0", "type": "heading", "props": { "text": "Designing Sweden's core all-in-one electric vehicle charging app", "align": "left", "color": "var(--palette-vaz9szt)", "level": 1 } }, { "id": "9tvzkvtcmnoioum2", "type": "heading", "props": { "text": "Overview", "align": "left", "level": 2 } }, { "id": "tlfe684cmnoip0nj", "mb": 14, "type": "paragraph", "props": { "size": "lg", "text": "This projected was designed in the course \"Designing for user experience\" at Umeå Institute of Design. The goal was to design the best user experience for a future EV charging app. ", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "mbm55oetmnsyuow2", "mt": 14, "type": "heading", "props": { "text": "Innovative service design and user experience using Plug and Charge. ", "align": "left", "level": 2 } }, { "id": "df03n9wpmnsk8o6x", "type": "paragraph", "props": { "size": "lg", "text": "My key contributions were designing multiple core UX features and service design, the overarching imagined system design, with the Plug and Charge feature, adaptive charging interface, guest passes, and booking system in mind. \n", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "86nrtdnlmnsyxcc1", "mt": 8, "type": "paragraph", "props": { "size": "lg", "text": "I also contributed with the name Eli, designed many frames and microinteractions, and stitch up a prototype in Figma.", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "buv7lgivmnskmpuk", "type": "image", "props": { "alt": "", "fit": "contain", "src": "/images/cases/6dui6o2pl3u_1775797172772.webp", "size": "sm", "aspect": "free", "radius": "md", "caption": "Nearby charging station automatically shown microinteraction " } }, { "id": "m4l8wsinmnq2676w", "type": "image", "props": { "alt": "", "fit": "contain", "src": "/images/cases/iey5qan0068_1775654122309.webp", "size": "sm", "aspect": "free", "radius": "md", "caption": "Menu" } }, { "id": "uwrwo6mxmnq2p91n", "type": "three-column", "props": { "left": [ { "id": "8pd577vwmnq2pbwh", "type": "image", "props": { "alt": "", "fit": "contain", "src": "/images/cases/p45iv3l6wqi_1775654311616.webp", "size": "lg", "aspect": "free", "radius": "xl", "caption": "Booking" } } ], "right": [ { "id": "bj65z35umnq2qqeh", "type": "image", "props": { "alt": "", "fit": "contain", "src": "/images/cases/a0guzjzhxdf_1775654359602.webp", "size": "lg", "aspect": "free", "radius": "xl", "caption": "Charging experience" } } ], "split": "33/33/33", "center": [ { "id": "hdtraz8imnq2qo0j", "type": "image", "props": { "alt": "", "fit": "contain", "src": "/images/cases/03mwyl216o2a_1775654350475.webp", "size": "lg", "aspect": "free", "radius": "xl", "caption": "Route planner" } } ] } }, { "id": "r3j77dykmnsgje23", "type": "image", "props": { "alt": "", "fit": "contain", "src": "/images/cases/zugooykmu3b_1775797458750.webp", "size": "full", "aspect": "16/9", "radius": "2xl", "caption": "Most of the frames, including a desktop view" } }, { "id": "m9mobvt5mnskirot", "type": "heading", "props": { "text": "Want to hear more about Eli?", "align": "center", "color": "var(--palette-vaz9szt)", "level": 1 } }, { "id": "w1q0m4yamnsl0zeh", "mt": 14, "type": "cta-button", "props": { "href": "mailto:abbe.alrubaiy@gmail.com", "align": "center", "label": "abbe.alrubaiy@gmail.com", "openInNewTab": true } } ], "content_width": 70, "project_type": "school", "sort_order": 2, "created_at": "2026-04-08T13:07:05.997421+00:00", "updated_at": "2026-04-12T18:40:48.2342+00:00" }, { "id": "69dd371b4c9ac5ecde1e680c", "slug": "datio", "title": "Datio", "description": "Fullstack e-commerce website from scratch  ", "category": "Fullstack development ", "year": "2023", "tags": [ "Fullstack", ".NET", "HTML", "CSS", "Javascript", "React", "Azure", "SQL database", "C#" ], "tools": [ "vscode", "js", "dotnet", "csharp", "javascript", "azure", "stripe" ], "image": "/images/cases/lkxvk02lw3_1775646913142.webp", "image_light": null, "image_gradient": "from-slate-700 to-slate-900", "status": "published", "featured": true, "cover_visible": true, "cover_size": "md", "card_image_fit": "contain", "blocks": [ { "id": "mm3kl594mnojzng7", "type": "heading", "props": { "text": "Summary", "align": "left", "color": "var(--palette-vaz9szt)", "level": 1 } }, { "id": "xtuenv3nmnq0gvlt", "type": "list", "props": { "size": "base", "items": [ { "sub": [], "text": "Fullstack .NET + Javascript e-commerce website built from scratch " }, { "sub": [], "text": "Built-in admin management system " }, { "sub": [], "text": "Hosted using Azure " }, { "sub": [], "text": "SQL Database " }, { "sub": [], "text": "2 roles: admins and customers" }, { "sub": [], "text": "Stripe API for payments" }, { "sub": [], "text": " Experimented with a React version as well (not shown here)" } ], "ordered": false, "spacing": "loose" } }, { "id": "gkk1wrofmnq0ltv2", "mb": 14, "mt": 8, "type": "callout", "props": { "text": "The course's focus were solely on technical implementation and NOT UX/UI", "variant": "warning" } }, { "id": "ufzvi7eumnq10udl", "type": "image", "props": { "alt": "", "fit": "contain", "src": "/images/cases/fltc4jpktip_1775651056661.webp", "aspect": "16/9", "radius": "md" } }, { "id": "ghw5th9imnq1184v", "type": "image", "props": { "alt": "", "fit": "contain", "src": "/images/cases/rzh5dlduv8_1775651056661.webp", "aspect": "16/9", "radius": "md" } }, { "id": "3lts2i8gmnq11sdl", "type": "image", "props": { "alt": "", "fit": "contain", "src": "/images/cases/otxzkn2gknm_1775651056661.webp", "aspect": "16/9", "radius": "md" } }, { "id": "zjcl7e83mnq127bk", "type": "image", "props": { "alt": "", "fit": "contain", "src": "/images/cases/m9quzsmm7kq_1775651056661.webp", "aspect": "16/9", "radius": "md" } }, { "id": "xjravp3jmnq0nm4h", "type": "image", "props": { "alt": "", "fit": "contain", "src": "/images/cases/32tom2iai1_1775651056661.webp", "aspect": "16/9", "radius": "xl" } } ], "content_width": 75, "project_type": "school", "sort_order": 1, "created_at": "2026-04-07T11:37:26.801384+00:00", "updated_at": "2026-04-12T18:40:48.601576+00:00" }, { "id": "69dd37194c9ac5ecde1e680b", "slug": "skrivert", "title": "Skrivert", "description": "Real-time subtitle captioning software", "category": "UX Design", "year": "2024", "tags": [ "Software design", "UX Design", "UX Research", "UI Design", "Figma Prototype", "Tabbing navigation", "Group project" ], "tools": [ "figma" ], "image": "/images/cases/pn6ft61btc_1775559934149.webp", "image_light": null, "image_gradient": "from-slate-700 to-slate-900", "status": "published", "featured": true, "cover_visible": true, "cover_size": "md", "card_image_fit": "contain", "blocks": [ { "id": "9tvzkvtcmnoioum2", "type": "heading", "props": { "text": "Overview", "align": "left", "level": 2 } }, { "id": "tlfe684cmnoip0nj", "mb": 8, "type": "paragraph", "props": { "size": "lg", "text": "Skrivert is a live subtitle captioning tool designed to democratize and simplify subtitle production to novice users and design a tool which offers the best subtitle captioning experience for both experts and novel users. \n\nBridging the gap between professional users who need speed and newcomers who need guidance.\n\nThe project responded to a growing legislative and cultural shift in Sweden, where accessibility requirements are expanding the audience for subtitle tooling far beyond broadcast specialists. ", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "cazi4rz9mnpv7vc2", "mt": 14, "type": "four-column", "props": { "left": [ { "id": "hpzkk442mnpv815m", "type": "paragraph", "props": { "size": "base", "text": "Type", "color": "var(--palette-7)", "opacity": 100 } }, { "id": "7uhixneimnpv926j", "type": "paragraph", "props": { "size": "base", "text": "University group project", "color": "var(--palette-vaz9szt)", "opacity": 100 } } ], "right": [ { "id": "ycezeysymnpv865v", "type": "paragraph", "props": { "size": "base", "text": "Stakeholder", "color": "var(--palette-7)", "opacity": 100 } }, { "id": "sggajnzvmnpv97ui", "type": "paragraph", "props": { "size": "base", "text": "Qwertyist AB", "color": "var(--palette-vaz9szt)", "opacity": 100 } } ], "split": "25/25/25/25", "centerLeft": [ { "id": "8qv60yh6mnpv8385", "type": "paragraph", "props": { "size": "base", "text": "Duration", "color": "var(--palette-7)", "opacity": 100 } }, { "id": "vcgkskfgmnpv94nt", "type": "paragraph", "props": { "size": "base", "text": "~4 months", "opacity": 80 } } ], "centerRight": [ { "id": "r2obidhymnpv84pd", "type": "paragraph", "props": { "size": "base", "text": "Course", "color": "var(--palette-7)", "opacity": 100 } }, { "id": "1juhpdkzmnpv96fl", "type": "paragraph", "props": { "size": "base", "text": "Product Development in Media Technology using the \"Design-Build-Test\" method, 7.5 ECTS", "color": "var(--palette-vaz9szt)", "opacity": 100 } } ] } }, { "id": "3xdq46o3mnoln7oe", "type": "divider", "props": { "style": "solid", "opacity": 20, "spacing": "md" } }, { "id": "bto1xyq2mnolncap", "type": "heading", "props": { "text": "Problem", "align": "left", "level": 2 } }, { "id": "v1ln6ct4mnolnxg0", "type": "paragraph", "props": { "size": "base", "text": "The subtitle production landscape has a huge usability gap. Existing tools were designed by and for power users, leaving subtitle captioning only accessible to a small number of experts. ", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "zitl4bwmmnpt9tjv", "type": "list", "props": { "size": "base", "items": [ { "sub": [], "text": "Subtitles are the most widely read type of text in Sweden, yet the tools to produce them are built for specialists." }, { "sub": [], "text": "The Web Accessibility Directive requires public sector organisations to make content accessible, driving demand for tools anyone can use." }, { "sub": [], "text": "Existing live captioning tools prioritze raw function over usability, locking out non-expert users. For example, they rely heavily on commands and often use modals, resulting in poor usability, navigation and obstructing interfaces.       " } ], "ordered": false, "spacing": "normal" } }, { "id": "z2j2haj5mnpvvr1c", "type": "two-column", "props": { "left": [ { "id": "deslmqt2mnpvvtiu", "type": "image", "props": { "alt": "", "fit": "contain", "src": "/images/cases/rlzi1el5b5g_1775642361067.webp", "aspect": "16/9", "radius": "xl", "caption": "TextOnTop, existing real-time captioning software " } } ], "right": [ { "id": "8o95b7bxmnpvvvb3", "type": "image", "props": { "alt": "", "fit": "contain", "src": "/images/cases/5id16zsahcj_1775642852390.webp", "aspect": "16/9", "radius": "xl", "caption": "STTylus, existing software" } } ], "split": "50/50" } }, { "id": "r8b9ke08mnpu3p3q", "type": "heading", "props": { "text": "Research & Process", "align": "left", "level": 2 } }, { "id": "rynp7gc7mnpu4kt2", "type": "paragraph", "props": { "size": "base", "text": "The project followed a design thinking methodology across three iterative phases, combining qualitative interviews, survey feedback, and live usability testing. \n\n\nLo-Fi → Test → Mid-Fi → Test → Hi-Fi → Test → Present. \n\n\nThe feedback from our stakeholder, user interviews and user tests was **overwhelmingly positive**.", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "dcmy8aldmnpvoert", "mt": 14, "type": "heading", "props": { "text": "Key design decision ", "align": "left", "level": 2 } }, { "id": "768niupnmnpvp7sa", "mt": 4, "type": "heading", "props": { "text": "The Toolbox", "align": "left", "level": 3 } }, { "id": "b105tl9fmnpvok0p", "type": "paragraph", "props": { "size": "base", "text": "My biggest contribution to this project was designing the core UX and designing the toolbox interactions. \n\nI came up with a quite smart interaction design and workflow using a sidebar \"toolbox\".\n\nRather than floating modals — which obscure the writing area — all key tools are consolidated into a resizable right-side panel. The panel can be split into two halves, letting users run two tools simultaneously (e.g., chat alongside the manuscript view). Each tool was designed in both full-width and half-width variants. \n\nThis solved spatial inconsistency: tools are always in the same place, reducing cognitive load. The split-view adds power-user flexibility without increasing complexity for beginners.", "color": "var(--palette-vaz9szt)", "opacity": 100 } }, { "id": "mw00wdm2mnpzychq", "type": "image", "props": { "alt": "", "fit": "contain", "src": "/images/cases/1b2mdptfh1t_1775644821172.webp", "aspect": "1/1", "radius": "md" } }, { "id": "de6rn547mnq1ft1m", "mb": 0, "mt": 14, "type": "heading", "props": { "text": "Some of the results", "align": "center", "level": 1 } }, { "id": "vf7ii3a0mnpzylt6", "mt": 0, "type": "image", "props": { "alt": "", "fit": "contain", "src": "/images/cases/pcxn3uga4ng_1775645228850.webp", "aspect": "16/9", "radius": "none", "caption": "different tools" } }, { "id": "ca3m813nmnq0whfx", "mt": 4, "type": "image", "props": { "alt": "", "fit": "contain", "src": "/images/cases/63ugubj485e_1775651274199.webp", "aspect": "16/9", "radius": "md", "caption": "creating a live captioning session flow" } }, { "id": "ozvd9xwjmnpzyymg", "mt": 4, "type": "image", "props": { "alt": "", "fit": "contain", "src": "/images/cases/ce0w0qiv00f_1775645341147.webp", "aspect": "1/1", "radius": "md", "caption": "A split toolbox" } }, { "id": "xnd3cx7nmnpzze7m", "mt": 8, "type": "image", "props": { "alt": "", "fit": "contain", "src": "/images/cases/uhl9eyq3eni_1775645560019.webp", "aspect": "4/3", "radius": "md", "caption": "Most tools and their flows" } }, { "id": "bo3s6ofcmnpsw6b0", "mt": 8, "type": "image", "props": { "alt": "", "fit": "contain", "src": "/images/cases/wx0btex338m_1775568515984.webp", "aspect": "4/3", "radius": "xl", "caption": "Home" } }, { "id": "nkjq8lr6mnpzzw1e", "mt": 8, "type": "image", "props": { "alt": "", "fit": "contain", "src": "/images/cases/x6qw5ox1gij_1775645618165.webp", "aspect": "4/3", "radius": "xl", "caption": "Manuscript tool in action in a split side panel" } }, { "id": "7z53s2zimnq032g6", "type": "heading", "props": { "text": "Want to see or hear more about this project?", "align": "left", "level": 2 } }, { "id": "lkhjzg3vmnq03co1", "type": "paragraph", "props": { "size": "base", "text": "I would gladly show more frames, the design process and speak about my contributions to Skrivert! ", "color": "var(--palette-vaz9szt)", "opacity": 100 } } ], "content_width": 75, "project_type": "school", "sort_order": 0, "created_at": null, "updated_at": null } ]