[{"data":1,"prerenderedAt":383},["ShallowReactive",2],{"home-featured":3},[4,227],{"id":5,"title":6,"body":7,"caseStudy":24,"client":210,"cover":211,"description":212,"extension":213,"featured":214,"meta":215,"navigation":214,"order":196,"path":216,"publishedAt":217,"role":218,"seo":219,"stem":220,"tags":221,"url":217,"year":225,"__hash__":226},"projects\u002Fprojects\u002Fidaho-lottery-mobile-app.md","Idaho Lottery Mobile App",{"type":8,"value":9,"toc":19},"minimark",[10,15],[11,12,14],"h2",{"id":13},"overview","Overview",[16,17,18],"p",{},"A redesign of a live, in-market lottery application — modernizing the\nexperience for thousands of daily players while laying down a scalable design\nfoundation the team could keep building on.",{"title":20,"searchDepth":21,"depth":21,"links":22},"",2,[23],{"id":13,"depth":21,"text":14},{"meta":25,"hero":42,"sections":50},[26,30,34,38],{"icon":27,"label":28,"value":29},"rh:timeline","Timeline","1–2 Weeks",{"icon":31,"label":32,"value":33},"rh:role","Role","Sole UI\u002FUX Designer",{"icon":35,"label":36,"value":37},"rh:tools","Tools","Adobe XD, Figma",{"icon":39,"label":40,"value":41},"rh:project-type","Project Type","Design Revamp & Migration",{"frame":43,"items":44},"plain",[45],{"src":46,"alt":47,"width":48,"height":49},"\u002Fimages\u002Fprojects\u002Fidaho-lottery\u002Fthumbnail.jpg","Idaho Lottery mobile app — login, home, and account screens",898,465,[51,62,73,87,110,122,140,152,177,182,186,190],{"title":52,"body":53,"figures":55},"Project Summary",[54],"The Idaho Lottery mobile app had been evolving for years before I joined the project. As new features were added over time, the design files became harder to maintain and scale. The product was still managed in Adobe XD, and there wasn't a strong system for reusable components, shared styles, or consistent design patterns. As the sole UI\u002FUX designer, I saw an opportunity to do more than just update screens. I led the migration from Adobe XD to Figma, introduced better design organization, and modernized parts of the experience while preserving the familiarity existing users relied on. Rather than treating this as a full redesign, I focused on making thoughtful improvements that balanced user expectations, development constraints, and long-term maintainability.",[56],{"frame":43,"items":57},[58],{"src":59,"alt":60,"width":48,"height":61},"\u002Fimages\u002Fprojects\u002Fidaho-lottery\u002Fproject-summary.jpg","Migrating the source of truth from Adobe XD to Figma",261,{"title":63,"body":64,"figures":66},"The Problem",[65],"When I first reviewed the project, it was clear that the product had accumulated a fair amount of design debt over the years. The design files lacked structure, repeated elements existed across multiple screens, and there was no reliable system for maintaining consistency as the product grew. Every new update required additional effort because there wasn't a strong foundation supporting the work. At the same time, the application was already live and actively used. Making dramatic changes wasn't an option. Any updates needed to respect existing user habits, fit within development timelines, and remain practical to implement. The challenge wasn't to redesign the app from scratch. It was to modernize and improve the experience while preserving the familiarity users already trusted.",[67],{"frame":43,"items":68},[69],{"src":70,"alt":71,"width":48,"height":72},"\u002Fimages\u002Fprojects\u002Fidaho-lottery\u002Fthe-problem.jpg","Design debt across the existing Adobe XD files and screens",557,{"title":74,"list":75},"Constraints",{"icon":76,"items":77},"material-symbols:event-available-outline-rounded",[78,81,84],{"title":79,"text":80},"Existing User Expectations","Users were already familiar with established navigation patterns and workflows. Any changes needed to feel intuitive without requiring users to relearn the application.",{"title":82,"text":83},"Development Effort","Design decisions needed to account for engineering resources, implementation timelines, and technical feasibility.",{"title":85,"text":86},"Limited Timeline","With a short project timeline, it was important to prioritize improvements that delivered the highest impact while remaining achievable.",{"title":88,"body":89,"list":91,"figures":103},"Migration Strategy",[90],"The migration from Adobe XD to Figma became an opportunity to improve the design foundation of the product. Rather than recreating existing files exactly as they were, I used the process to introduce better structure and consistency. However, a full design system from scratch wasn't realistic in the timeline, so I focused on the foundation that would pay off fastest:",{"items":92},[93,95,97,99,101],{"text":94},"Defined color styles",{"text":96},"Defined typography styles",{"text":98},"Converted repeated patterns into reusable components",{"text":100},"Reorganized files into a clear, navigable structure",{"text":102},"Built a foundation that could be maintained and extended",[104],{"frame":43,"items":105},[106],{"src":107,"alt":108,"width":48,"height":109},"\u002Fimages\u002Fprojects\u002Fidaho-lottery\u002Fmigration-strategy.jpg","Color styles and reusable components in the new Figma library",458,{"title":111,"body":112,"figures":114},"Process & Approach",[113],"A deliberate design decision: why I didn't redesign everything. A complete redesign may have created a more visually dramatic outcome, but it would also have increased development effort, project risk, and user adaptation requirements. Instead, I chose a more strategic approach. I focused on improving areas that would create meaningful value while preserving the patterns users were already familiar with. This allowed the product to evolve without introducing unnecessary friction for users or developers.",[115],{"frame":43,"caption":116,"items":117},"A subtle but impactful update. By elevating the bottom navigation and introducing a floating treatment, I added personality and visual polish without changing how users navigated the app.",[118],{"src":119,"alt":120,"width":48,"height":121},"\u002Fimages\u002Fprojects\u002Fidaho-lottery\u002Fprocess-approach.jpg","Before and after of the home screen's bottom navigation",259,{"title":123,"body":124,"list":126},"Design Improvements",[125],"After reviewing the application's user flows, navigation patterns, and interface components, I identified opportunities to modernize the experience without dramatically changing how users interacted with the product.",{"items":127},[128,130,132,134,136,138],{"text":129},"Refined user flows to remove friction from common paths",{"text":131},"Improved visual hierarchy and readability",{"text":133},"Modernized interface elements and styling",{"text":135},"Updated existing widgets and components",{"text":137},"Designed and integrated new features",{"text":139},"Kept the brand and core patterns intact, so the app still felt like itself",{"title":141,"body":142,"figures":145},"Challenges & Tradeoffs",[143,144],"Balancing modernization and familiarity. One of the most challenging aspects of the project was deciding how much change was appropriate. Introducing modern design patterns could improve usability, but excessive changes risked creating friction for long-time users. I approached this by focusing on incremental improvements that enhanced the experience without requiring users to relearn established workflows.","Designing within development constraints. Because the product was already live, every design decision needed to consider implementation complexity. In some cases, I intentionally prioritized solutions that delivered meaningful improvements while remaining practical for development teams to implement within existing constraints.",[146],{"frame":43,"items":147},[148],{"src":149,"alt":150,"width":48,"height":151},"\u002Fimages\u002Fprojects\u002Fidaho-lottery\u002Fchallenges-tradeoffs.jpg","Before and after of the login, home, and account screens",1002,{"title":153,"body":154,"list":156},"My Contributions",[155],"As the sole UI\u002FUX designer on the project, I:",{"icon":157,"items":158},"material-symbols:workspace-premium-outline-rounded",[159,161,163,165,167,169,171,173,175],{"text":160},"Led the migration from Adobe XD to Figma",{"text":162},"Advocated for and introduced Figma workflows within the organization",{"text":164},"Improved design file organization and maintainability",{"text":166},"Introduced reusable components and design standards",{"text":168},"Modernized the application's interface",{"text":170},"Enhanced existing user flows",{"text":172},"Designed new features and product enhancements",{"text":174},"Collaborated closely with developers to ensure implementation feasibility",{"text":176},"Established a stronger design foundation for future product growth",{"title":178,"body":179},"Outcomes",[180,181],"While business metrics cannot be disclosed, the project delivered meaningful improvements for both the product and the team. The successful migration from Adobe XD to Figma established a more scalable and maintainable design workflow, making it easier to manage updates and ensure consistency across the application. Through the introduction of reusable components, shared styles, and improved file organization, the product gained a stronger design foundation that can better support future enhancements. Alongside these structural improvements, key areas of the user experience were modernized to improve visual consistency, usability, and overall polish while maintaining familiarity for existing users.","Beyond the product itself, the project also contributed to broader team improvements. By advocating for and leading the adoption of Figma, I helped introduce more efficient design workflows and collaboration practices within the organization. The improved design structure and component-based approach created clearer alignment between design and development, reducing future maintenance effort and making it easier for teams to build, update, and scale the product over time.",{"title":183,"body":184},"Reflection & Learnings",[185],"The biggest takeaway: not every redesign should be dramatic. The strongest improvements here were the ones users would barely register. The app just felt a little more intuitive and a little more considered, without anyone having to relearn it. Some of the most valuable design work happens behind the scenes—creating systems, reducing complexity, and improving products in ways that feel natural to users. By balancing modernization, scalability, and implementation constraints, I was able to help evolve the product while preserving the experience users already trusted.",{"title":187,"body":188},"Conclusion",[189],"The Idaho Lottery Mobile App revamp was ultimately about evolution rather than reinvention. By leading the migration to Figma, improving design structure, modernizing key experiences, and working within real-world constraints, I helped create a stronger foundation for the product's continued growth. The project demonstrates my approach to product design: balancing user needs, business goals, technical realities, and long-term scalability to create solutions that are both practical and impactful.",{"title":191,"body":192,"figures":194},"Ongoing Involvement",[193],"My involvement with the product extends beyond the migration project. Today, I am responsible for designing new features and seasonal event experiences, helping shape how the application continues to grow while ensuring each addition feels cohesive, intuitive, and aligned with the overall user experience.",[195,203],{"frame":43,"columns":196,"caption":197,"items":198},1,"Event Promotion Widget. I designed this event widget to support a promotional campaign within the app.",[199],{"src":200,"alt":201,"width":48,"height":202},"\u002Fimages\u002Fprojects\u002Fidaho-lottery\u002Fdrawing.jpg","Event Promotion Widget",172,{"frame":43,"columns":196,"caption":204,"items":205},"Playslip: New Application Feature",[206],{"src":207,"alt":208,"width":48,"height":209},"\u002Fimages\u002Fprojects\u002Fidaho-lottery\u002Fplayslip.jpg","Playslip",416,"Idaho Lottery","\u002Fimages\u002Fprojects\u002Fidaho-lottery\u002Fproject1.mp4","Modernizing a live lottery application while establishing a scalable design foundation","md",true,{"thumbnail":46},"\u002Fprojects\u002Fidaho-lottery-mobile-app",null,"UI\u002FUX Designer",{"title":6,"description":212},"projects\u002Fidaho-lottery-mobile-app",[222,223,224],"Mobile","Design Systems","iOS & Android","2024 - Present","J1Np4SjO9NWRSpyxTb8i45liSgXtrhXYfvpdSpZKDN8",{"id":228,"title":229,"body":230,"caseStudy":240,"client":370,"cover":371,"description":372,"extension":213,"featured":214,"meta":373,"navigation":214,"order":21,"path":374,"publishedAt":375,"role":246,"seo":376,"stem":377,"tags":378,"url":217,"year":381,"__hash__":382},"projects\u002Fprojects\u002Finternal-cms-platform.md","Internal CMS Platform",{"type":8,"value":231,"toc":237},[232,234],[11,233,14],{"id":13},[16,235,236],{},"A greenfield internal content management platform — defining product workflows,\nthe design system, and the front-end architecture from scratch so the team had\na durable foundation to build on.",{"title":20,"searchDepth":21,"depth":21,"links":238},[239],{"id":13,"depth":21,"text":14},{"meta":241,"hero":253,"sections":258},[242,244,247,250],{"icon":76,"label":28,"value":243},"1 Month & 2 Weeks",{"icon":245,"label":32,"value":246},"material-symbols:face-4-outline","UI\u002FUX Designer & Front-End Developer",{"icon":248,"label":36,"value":249},"material-symbols:sdk-outline-rounded","Figma, Vue.js, Storybook, SCSS",{"icon":251,"label":40,"value":252},"material-symbols:tactic-rounded","System Design & Development",{"frame":43,"columns":196,"items":254},[255],{"src":256,"alt":257},"\u002Fimages\u002Fprojects\u002Finternal-cms\u002Fcms-thumbnail.jpg","Internal CMS platform login screen",[259,262,280,292,321,332,351,357,360,364,367],{"title":52,"body":260},[261],"The organization needed a centralized platform to manage and host internal projects without relying on external CMS solutions. Unlike most projects that begin with detailed requirements, this initiative started with only a list of core pages and high-level feature requests. There were no established workflows, user journeys, or functional specifications. This created an opportunity to contribute beyond interface design. I became responsible for uncovering requirements, defining user experiences, creating scalable design patterns, and helping transform a collection of ideas into a cohesive product.",{"title":63,"body":263,"list":265,"outro":278},[264],"The challenge wasn't simply designing screens. The challenge was defining how the platform should work before design and development could begin. Without established workflows, several questions needed to be answered:",{"icon":266,"items":267},"material-symbols:asterisk-rounded",[268,270,272,274,276],{"text":269},"How should users navigate between projects?",{"text":271},"What content structures are needed?",{"text":273},"What actions should be available across modules?",{"text":275},"How should future features scale within the platform?",{"text":277},"What system behaviors are required for edge cases?",[279],"Before solving usability problems, I first needed to identify them.",{"title":74,"list":281},{"icon":76,"items":282},[283,286,289],{"title":284,"text":285},"Limited Product Documentation","The project began without detailed specifications, user journeys, or established workflows. Much of the discovery work needed to happen alongside design and development.",{"title":287,"text":288},"Multiple Responsibilities","As the sole designer and front-end developer, I was responsible for product thinking, UX, UI, design systems, and implementation simultaneously.",{"title":290,"text":291},"Evolving Requirements","As stakeholders gained a better understanding of the product, requirements continued to evolve, requiring solutions that could adapt without sacrificing consistency.",{"title":293,"body":294,"list":296,"outro":312,"figures":314},"Building a Design System",[295],"One of the most important decisions was investing early in a design system. Although creating a design system requires additional upfront effort, it became the foundation that supported the entire platform. The design system included:",{"items":297},[298,300,302,304,306,308,310],{"text":299},"Color foundations",{"text":301},"Typography styles",{"text":303},"Spacing standards",{"text":305},"Reusable components",{"text":307},"Form patterns",{"text":309},"Layout structures",{"text":311},"Design documentation",[313],"As the platform expanded, the system significantly improved consistency and efficiency.",[315],{"frame":43,"columns":196,"caption":316,"items":317},"Design system foundations documented for design and engineering.",[318],{"src":319,"alt":320},"\u002Fimages\u002Fprojects\u002Finternal-cms\u002Fds-doc-1.jpg","Design system documentation — colour and typography",{"title":111,"body":322,"figures":326},[323,324,325],"Designing the product before designing the interface. One of the most important realizations early in the project was that the biggest challenge wasn't visual design—it was product definition. Before creating screens, I spent time understanding how features related to one another, identifying workflow dependencies, and uncovering missing requirements that had not yet been documented. Instead of treating design as a downstream activity, I approached the project from a product perspective, helping define how the platform should work before determining how it should look.","Creating structure through flows. User flows became one of the most valuable tools throughout the project. By mapping workflows and feature relationships, I was able to identify gaps, edge cases, and opportunities to simplify complex administrative processes before development began.","Building systems early. Because CMS platforms naturally grow over time, I invested early in creating a scalable design system. This allowed new features to be designed and implemented more efficiently while maintaining consistency across the platform.",[327],{"frame":43,"columns":196,"items":328},[329],{"src":330,"alt":331},"\u002Fimages\u002Fprojects\u002Finternal-cms\u002Fflow-pages.jpg","Content pages module",{"title":153,"body":333,"list":335},[334],"As the sole UI\u002FUX Designer and Front-End Developer, I:",{"icon":157,"items":336},[337,339,341,343,345,347,349],{"text":338},"Designed the platform from scratch",{"text":340},"Defined user flows & feature requirements",{"text":342},"Created & maintained the design system",{"text":344},"Designed a responsive web application",{"text":346},"Implemented interfaces using Vue.js",{"text":348},"Managed component documentation through Storybook",{"text":350},"Collaborated with stakeholders to translate business requirements into product solutions",{"title":352,"body":353},"Challenges & Trade-offs",[354,355,356],"Starting without detailed requirements. Working within project timelines meant balancing thoughtful problem-solving with the need to move quickly. Rather than exploring every possible direction, I focused on defining strong foundations and iterating as requirements matured.","Designing a large CMS solo. CMS platforms are inherently broad—many screens, states, workflows, and permissions. Carrying discovery, UX, UI, component creation, documentation, and development support independently meant constantly balancing depth against deadlines without letting quality or consistency slip.","Designing without direct user observation. Without direct access to user behavior, decisions were informed through research, CMS best practices, stakeholder collaboration, and continuous evaluation of workflow risks.",{"title":178,"body":358},[359],"While business metrics cannot be disclosed, the project established a strong foundation for the platform's continued growth. The creation of a design system improved consistency across the product while supporting faster feature development. Reusable components and shared patterns strengthened alignment between design and development, reducing duplication and improving maintainability. Beyond interface design, the project transformed a collection of loosely defined requirements into a structured product experience, providing a scalable framework for future enhancements and expansion.",{"title":183,"body":361},[362,363],"The biggest lesson from this project was that successful product design often begins long before screens are created. Requirements are rarely complete. A large part of the work was actively identifying gaps, asking the right questions, and anticipating future needs rather than waiting for a finished brief.","It also deepened how I think about design systems—not as a collection of UI components, but as a shared foundation that connects design and development. Working across UX, UI, QA, and front-end strengthened my ability to think beyond individual screens and treat the product as a complete system. Most of all, it reinforced the value of ownership, adaptability, and proactive problem-solving when building a product from the ground up.",{"title":187,"body":365},[366],"The Internal CMS Platform was more than a design project—it was an opportunity to help define a product from the ground up. By combining product thinking, UX design, design systems, and front-end development, I helped transform broad business requirements into a scalable platform foundation. The experience strengthened my ability to navigate ambiguity, create systems that scale, and contribute across the full product development lifecycle.",{"title":191,"body":368},[369],"My involvement with the platform continues today. As new business requirements emerge, I remain responsible for designing new features, refining existing workflows, expanding the design system, and supporting front-end implementation.","Internal","\u002Fimages\u002Fprojects\u002Finternal-cms\u002Fcms.mp4","Defining product workflows, design systems, and front-end architecture from scratch",{},"\u002Fprojects\u002Finternal-cms-platform","2023-09-01",{"title":229,"description":372},"projects\u002Finternal-cms-platform",[379,223,380],"Web App","Front-End","2025 - Present","y3eF0-2szdF9R0M0gOSj030I0XnfhmrXh9vW_6Qh2xY",1781710858822]