[{"data":1,"prerenderedAt":193},["ShallowReactive",2],{"project-\u002Fprojects\u002Finternal-cms-platform":3,"surround-\u002Fprojects\u002Finternal-cms-platform":187},{"id":4,"title":5,"body":6,"caseStudy":23,"client":170,"cover":171,"description":172,"extension":173,"featured":174,"meta":175,"navigation":174,"order":20,"path":176,"publishedAt":177,"role":32,"seo":178,"stem":179,"tags":180,"url":184,"year":185,"__hash__":186},"projects\u002Fprojects\u002Finternal-cms-platform.md","Internal CMS Platform",{"type":7,"value":8,"toc":18},"minimark",[9,14],[10,11,13],"h2",{"id":12},"overview","Overview",[15,16,17],"p",{},"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":19,"searchDepth":20,"depth":20,"links":21},"",2,[22],{"id":12,"depth":20,"text":13},{"meta":24,"hero":41,"sections":48},[25,29,33,37],{"icon":26,"label":27,"value":28},"material-symbols:event-available-outline-rounded","Timeline","1 Month & 2 Weeks",{"icon":30,"label":31,"value":32},"material-symbols:face-4-outline","Role","UI\u002FUX Designer & Front-End Developer",{"icon":34,"label":35,"value":36},"material-symbols:sdk-outline-rounded","Tools","Figma, Vue.js, Storybook, SCSS",{"icon":38,"label":39,"value":40},"material-symbols:tactic-rounded","Project Type","System Design & Development",{"frame":42,"columns":43,"items":44},"plain",1,[45],{"src":46,"alt":47},"\u002Fimages\u002Fprojects\u002Finternal-cms\u002Fcms-thumbnail.jpg","Internal CMS platform login screen",[49,53,72,85,114,126,147,153,157,162,166],{"title":50,"body":51},"Project Summary",[52],"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":54,"body":55,"list":57,"outro":70},"The Problem",[56],"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":58,"items":59},"material-symbols:asterisk-rounded",[60,62,64,66,68],{"text":61},"How should users navigate between projects?",{"text":63},"What content structures are needed?",{"text":65},"What actions should be available across modules?",{"text":67},"How should future features scale within the platform?",{"text":69},"What system behaviors are required for edge cases?",[71],"Before solving usability problems, I first needed to identify them.",{"title":73,"list":74},"Constraints",{"icon":26,"items":75},[76,79,82],{"title":77,"text":78},"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":80,"text":81},"Multiple Responsibilities","As the sole designer and front-end developer, I was responsible for product thinking, UX, UI, design systems, and implementation simultaneously.",{"title":83,"text":84},"Evolving Requirements","As stakeholders gained a better understanding of the product, requirements continued to evolve, requiring solutions that could adapt without sacrificing consistency.",{"title":86,"body":87,"list":89,"outro":105,"figures":107},"Building a Design System",[88],"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":90},[91,93,95,97,99,101,103],{"text":92},"Color foundations",{"text":94},"Typography styles",{"text":96},"Spacing standards",{"text":98},"Reusable components",{"text":100},"Form patterns",{"text":102},"Layout structures",{"text":104},"Design documentation",[106],"As the platform expanded, the system significantly improved consistency and efficiency.",[108],{"frame":42,"columns":43,"caption":109,"items":110},"Design system foundations documented for design and engineering.",[111],{"src":112,"alt":113},"\u002Fimages\u002Fprojects\u002Finternal-cms\u002Fds-doc-1.jpg","Design system documentation — colour and typography",{"title":115,"body":116,"figures":120},"Process & Approach",[117,118,119],"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.",[121],{"frame":42,"columns":43,"items":122},[123],{"src":124,"alt":125},"\u002Fimages\u002Fprojects\u002Finternal-cms\u002Fflow-pages.jpg","Content pages module",{"title":127,"body":128,"list":130},"My Contributions",[129],"As the sole UI\u002FUX Designer and Front-End Developer, I:",{"icon":131,"items":132},"material-symbols:workspace-premium-outline-rounded",[133,135,137,139,141,143,145],{"text":134},"Designed the platform from scratch",{"text":136},"Defined user flows & feature requirements",{"text":138},"Created & maintained the design system",{"text":140},"Designed a responsive web application",{"text":142},"Implemented interfaces using Vue.js",{"text":144},"Managed component documentation through Storybook",{"text":146},"Collaborated with stakeholders to translate business requirements into product solutions",{"title":148,"body":149},"Challenges & Trade-offs",[150,151,152],"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":154,"body":155},"Outcomes",[156],"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":158,"body":159},"Reflection & Learnings",[160,161],"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":163,"body":164},"Conclusion",[165],"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":167,"body":168},"Ongoing Involvement",[169],"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","md",true,{},"\u002Fprojects\u002Finternal-cms-platform","2023-09-01",{"title":5,"description":172},"projects\u002Finternal-cms-platform",[181,182,183],"Web App","Design Systems","Front-End",null,"2025 - Present","y3eF0-2szdF9R0M0gOSj030I0XnfhmrXh9vW_6Qh2xY",[188,184],{"title":189,"path":190,"stem":191,"description":192,"children":-1},"Idaho Lottery Mobile App","\u002Fprojects\u002Fidaho-lottery-mobile-app","projects\u002Fidaho-lottery-mobile-app","Modernizing a live lottery application while establishing a scalable design foundation",1781719491028]