https://emilyjamesdesign.com Emily James Design Thu, 04 Dec 2025 02:36:15 +0000 https://emilyjamesdesign.com en https://emilyjamesdesign.com/Home Wed, 04 Apr 2018 02:12:23 +0000 Emily James Design https://emilyjamesdesign.com/Home Senior Product DesignerCreating systems and experiences that scale I focus on long-term platform cohesion while delivering value through thoughtful, incremental design decisions. Key focus areas: Complex platform design across enterprise softwareSystems thinking and scalable UX patternsInteraction design for data-dense, multi-role experiences https://emilyjamesdesign.com/Work Tue, 30 Sep 2025 00:35:28 +0000 Emily James Design https://emilyjamesdesign.com/Work Work My work centers on systems thinking within complex, enterprise-level software. The case studies featured here span multiple platforms and focus on designing end-to-end experiences within environments shaped by complex data sets, legacy systems, and fragmented workflows. These projects emphasize scalability, alignment, and efficiency, with a focus on finding meaningful value through smaller, intentional iterations that support larger platform efforts.&nbsp; Featured projects <img width="2048" height="1536" width_o="2048" height_o="1536" data-src="https://freight.cargo.site/t/original/i/b136c6201cceda1f79de90683e8caa33089d479c5d8caa930b4ae03926f139cc/Natural-Language-Search-thumb.png" data-mid="245812744" border="0" alt="Natural language UX &middot; AI integration &middot; Adaptive search interactions" data-caption="Natural language UX · AI integration · Adaptive search interactions" src="https://freight.cargo.site/w/1000/i/b136c6201cceda1f79de90683e8caa33089d479c5d8caa930b4ae03926f139cc/Natural-Language-Search-thumb.png" /> <img width="2048" height="1536" width_o="2048" height_o="1536" data-src="https://freight.cargo.site/t/original/i/6d6c9ac09ffbd7b98ce86fcc03942812797915467de2cdb2fbeb5ea9c044f5e8/People-Search-thumb-new.png" data-mid="245918842" border="0" alt=" Filtering systems &middot; Information architecture &middot; Cross-functional collaboration" data-caption=" Filtering systems · Information architecture · Cross-functional collaboration" src="https://freight.cargo.site/w/1000/i/6d6c9ac09ffbd7b98ce86fcc03942812797915467de2cdb2fbeb5ea9c044f5e8/People-Search-thumb-new.png" /> <img width="2048" height="1536" width_o="2048" height_o="1536" data-src="https://freight.cargo.site/t/original/i/6b2f1a3a047101ca23ba904e23ce62af2ab05441e32ec6861be5d6cf616c3ce0/Shamrock-thumb2x.png" data-mid="245645771" border="0" alt="Complex workflow simplification &middot; Mobile design &middot; Interaction design" data-caption="Complex workflow simplification · Mobile design · Interaction design" src="https://freight.cargo.site/w/1000/i/6b2f1a3a047101ca23ba904e23ce62af2ab05441e32ec6861be5d6cf616c3ce0/Shamrock-thumb2x.png" /> <img width="2048" height="1536" width_o="2048" height_o="1536" data-src="https://freight.cargo.site/t/original/i/f6a8750a4c636b676b53ab52d132002803a4cc8f792abd26eaf3018304715f9d/Direct-Deposit-OOUX-thumb-new.png" data-mid="245919581" border="0" alt="Object-oriented UX &middot; Systems thinking &middot; Cross-platform consistency" data-caption="Object-oriented UX · Systems thinking · Cross-platform consistency" src="https://freight.cargo.site/w/1000/i/f6a8750a4c636b676b53ab52d132002803a4cc8f792abd26eaf3018304715f9d/Direct-Deposit-OOUX-thumb-new.png" /> Legacy projects <img width="1024" height="768" width_o="1024" height_o="768" data-src="https://freight.cargo.site/t/original/i/ffd414241c0a3278a92188658ca415ba78c5cc6ee4b8b331ca9c4c49d5b942d0/RFP360-thumb.png" data-mid="238822740" border="0" alt="User research &middot; Complex data mapping &middot; Facilitation" data-caption="User research · Complex data mapping · Facilitation" src="https://freight.cargo.site/w/1000/i/ffd414241c0a3278a92188658ca415ba78c5cc6ee4b8b331ca9c4c49d5b942d0/RFP360-thumb.png" /> <img width="1024" height="768" width_o="1024" height_o="768" data-src="https://freight.cargo.site/t/original/i/5bf77b89ff744f18bceac77884ad4478454634c3da8a640ddde47d952060c752/Hallmark-design-system-thumb.png" data-mid="238963154" border="0" alt="Design system creation &middot; Scalability &middot; Cross-functional delivery" data-caption="Design system creation · Scalability · Cross-functional delivery" src="https://freight.cargo.site/w/1000/i/5bf77b89ff744f18bceac77884ad4478454634c3da8a640ddde47d952060c752/Hallmark-design-system-thumb.png" /> <img width="1024" height="768" width_o="1024" height_o="768" data-src="https://freight.cargo.site/t/original/i/cb466115354992817ccf5c2897aac9b294888dcd532e2af3d1be1641d19b6582/Hallmark-accessibilty-thumb.png" data-mid="238963335" border="0" alt="Accessibility strategy &middot; Inclusive design &middot; Compliance alignment" data-caption="Accessibility strategy · Inclusive design · Compliance alignment" src="https://freight.cargo.site/w/1000/i/cb466115354992817ccf5c2897aac9b294888dcd532e2af3d1be1641d19b6582/Hallmark-accessibilty-thumb.png" /> <img width="1024" height="768" width_o="1024" height_o="768" data-src="https://freight.cargo.site/t/original/i/2c5bfcb90e202de6a856eca3bc3656fdf2fb19b1422f03b9748337e7299a1fbc/Hallmark-C-B-thumb.png" data-mid="238963134" border="0" alt="E-commerce design &middot; Template design &middot; Cross-functional collaboration" data-caption="E-commerce design · Template design · Cross-functional collaboration" src="https://freight.cargo.site/w/1000/i/2c5bfcb90e202de6a856eca3bc3656fdf2fb19b1422f03b9748337e7299a1fbc/Hallmark-C-B-thumb.png" /> https://emilyjamesdesign.com/Art Wed, 04 Apr 2018 03:09:30 +0000 Emily James Design https://emilyjamesdesign.com/Art Art I have nearly 20 years of painting experience, gained through various extracurricular classes. My favorite subjects to paint are land and cityscapes photographed during my travels abroad. I primarily work in oil paint with an impressionistic style. <img width="1024" height="576" width_o="1024" height_o="576" data-src="https://freight.cargo.site/t/original/i/ae24037bd1894c59d1f144bc5d6343116ab46cad4c296dec6fdb7f268b00c04b/IMG_4525.JPG" data-mid="14786355" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/ae24037bd1894c59d1f144bc5d6343116ab46cad4c296dec6fdb7f268b00c04b/IMG_4525.JPG" /> https://emilyjamesdesign.com/About Wed, 04 Apr 2018 03:14:00 +0000 Emily James Design https://emilyjamesdesign.com/About About My approach I design within complex product ecosystems where ambiguity, legacy constraints, and competing priorities are common. I start by grounding the work in what’s known, understanding the current experience, mapping user flows, and identifying friction points before proposing solutions. This foundation helps balance long-term platform strategy with near-term delivery. How I workI collaborate closely with product and engineering partners, prioritizing clear documentation, early alignment, and ongoing communication. When embedded on a team, I participate in standard agile activities: standups, sprint planning, and refinement. When supporting multiple initiatives, I maintain regular triad syncs to share updates and coordinate decisions. I value accountability, transparency, and trust, and I do my best work in environments where expectations are clear, feedback is direct, and collaboration is grounded in mutual respect. What I care about I care deeply about design quality at scale. I build on existing design systems and shared patterns to reduce fragmentation and ensure experiences feel cohesive and familiar across a platform. My goal is to make complex systems feel intentional, navigable, and trustworthy. Outside of work Outside of product design, I’m an artist and art enthusiast who enjoys painting, attending live music, and traveling.&nbsp; ContactContact formLinkedIn: linkedin.com/in/emilycjames https://emilyjamesdesign.com/Natural-Language-Search Thu, 04 Dec 2025 02:32:57 +0000 Emily James Design https://emilyjamesdesign.com/Natural-Language-Search Natural Language SearchB2B HR Platform Project overview As we built out People Search, a core workforce search experience, we were tasked with considering how to incorporate natural language processing (NLP), an emerging product strategy, into the experience. <img width="1111" height="542" width_o="1111" height_o="542" data-src="https://freight.cargo.site/t/original/i/552f375550234466bdb8592ef66ca07918e83a7625af49ef2d7db62d1179888c/Stakeholder-prompt.png" data-mid="241435584" border="0" src="https://freight.cargo.site/w/1000/i/552f375550234466bdb8592ef66ca07918e83a7625af49ef2d7db62d1179888c/Stakeholder-prompt.png" /> Project goalsEasily educate and onboard users to a new search paradigmProvide a personalized experience by surfacing tailored search recommendationsPartner with the AI team to integrate people search patterns into the global AI and chatbot strategy Role &amp; team In this phase, my role expanded beyond designing the core People Search experience to shaping how natural language capabilities would be introduced. I partnered closely with the Data Science team to understand model limitations and translate them into actionable design decisions. While still collaborating with my Product and Engineering peers, I also aligned our local search patterns with broader AI initiatives, including the global search experience and chatbot strategy. This required influencing not only implementation details, but also how the organization thought about scaling AI-driven interactions across the platform. ProcessDiscovery To frame the problem, I asked:What level of complexity makes sense in this context?What level of complexity can we support?How does the platform AI chatbot fit in?How do we manage cost and scope?Are we keeping up with consumer trends and expectations?<img width="3137" height="2191" width_o="3137" height_o="2191" data-src="https://freight.cargo.site/t/original/i/9339ea25358238c7ee06c3fe04c28c1fea101983cc0bb773051b572fd76b367f/Discovery-1.png" data-mid="241394615" border="0" src="https://freight.cargo.site/w/1000/i/9339ea25358238c7ee06c3fe04c28c1fea101983cc0bb773051b572fd76b367f/Discovery-1.png" /> I analyzed usage data and saw that users typically applied 1-2 filters at a time. That insight guided me to focus the MVP around the 5 most common filters: employment status, hire date, termination date, position, and cost centers related to department and location. I defined some initial query examples. <img width="765" height="655" width_o="765" height_o="655" data-src="https://freight.cargo.site/t/original/i/1c70b5e76ddebb085ab7d206e892f611cd8a59b6dc79af08cdfc135585f443cb/query-examples.png" data-mid="241394616" border="0" data-scale="40" src="https://freight.cargo.site/w/765/i/1c70b5e76ddebb085ab7d206e892f611cd8a59b6dc79af08cdfc135585f443cb/query-examples.png" />From there, I developed visual concepts to effectively convey my ideas. With more open-ended directives, such as “integrate NLS”, having a visual representation of the overall vision was necessary to achieve quick alignment. First visit: Conversational placeholder textDefault suggestions<img width="750" height="756" width_o="750" height_o="756" data-src="https://freight.cargo.site/t/original/i/c50ea2f8ee12fd31d33af359db006e756ecd732f0d583f91049524e0d4545409/Discovery-concept---first-visit.png" data-mid="241435843" border="0" src="https://freight.cargo.site/w/750/i/c50ea2f8ee12fd31d33af359db006e756ecd732f0d583f91049524e0d4545409/Discovery-concept---first-visit.png" /> Subsequent visits: Recent searchesDynamic suggestions based on usage <img width="750" height="756" width_o="750" height_o="756" data-src="https://freight.cargo.site/t/original/i/daa8bbdf50df468cfdc81aca624495bf28313879fbf02fb1650e27f0fb1009e9/Discovery-concept---subsequent-visits.png" data-mid="241435844" border="0" src="https://freight.cargo.site/w/750/i/daa8bbdf50df468cfdc81aca624495bf28313879fbf02fb1650e27f0fb1009e9/Discovery-concept---subsequent-visits.png" /> Design &amp; iteration After aligning on direction, I partnered with Data Science to translate query ideas into a feasible MVP. Together, we narrowed the scope to the filters that could be reliably supported within the timeframe: employment status, hire date, termination date, and position. We excluded cost centers (often used for departments or locations) because their usage varies across clients. This decision ensured we could launch with a high-quality foundation and expand in the future. <img width="831" height="655" width_o="831" height_o="655" data-src="https://freight.cargo.site/t/original/i/e9ca752ad7a14544f2bee4ea60126044492cfc82515937fcd53d79986cb1f71d/feasible-query-examples.png" data-mid="241435596" border="0" data-scale="40" src="https://freight.cargo.site/w/831/i/e9ca752ad7a14544f2bee4ea60126044492cfc82515937fcd53d79986cb1f71d/feasible-query-examples.png" />I designed a system of dynamic suggestions that adapted to what a user typed, showing them how queries could be phrased and combined. Typing “new hires” could trigger suggestions such as:people hired this weekpeople hired last monthpeople hired in 2025<img width="1515" height="1274" width_o="1515" height_o="1274" data-src="https://freight.cargo.site/t/original/i/0127ec9952af91c67a4fa0cbcbe48afa3cb60f107694473cd30f4279a7613598/dynamic-suggestions.png" data-mid="241435604" border="0" src="https://freight.cargo.site/w/1000/i/0127ec9952af91c67a4fa0cbcbe48afa3cb60f107694473cd30f4279a7613598/dynamic-suggestions.png" /> To reinforce the new paradigm, I also defined contextual placeholder text in the search bar. Default state:&nbsp;Broad and conversational <img width="750" height="588" width_o="750" height_o="588" data-src="https://freight.cargo.site/t/original/i/6cb08e5f157ddd85952f0226e8bd2d089bc725c60b2cf4c749293dc47b9b92fe/search-bar---default-state.png" data-mid="241435845" border="0" src="https://freight.cargo.site/w/750/i/6cb08e5f157ddd85952f0226e8bd2d089bc725c60b2cf4c749293dc47b9b92fe/search-bar---default-state.png" /> Focus state:&nbsp;Specific and instructional <img width="750" height="588" width_o="750" height_o="588" data-src="https://freight.cargo.site/t/original/i/5d8ac82e2a447f61e37152e2cd6cb8b5bbd877dd0189f1312601fb321aa3a526/search-bar---focus-state.png" data-mid="241435846" border="0" src="https://freight.cargo.site/w/750/i/5d8ac82e2a447f61e37152e2cd6cb8b5bbd877dd0189f1312601fb321aa3a526/search-bar---focus-state.png" /> MVP design <img width="2880" height="1084" width_o="2880" height_o="1084" data-src="https://freight.cargo.site/t/original/i/797c1f3c3ebba5e86b2988458e48516b2b6422650f0e783f7a1fe1628a1d5c02/MVP-design-2a.png" data-mid="245812721" border="0" alt="Search bar focus state" data-caption="Search bar focus state" src="https://freight.cargo.site/w/1000/i/797c1f3c3ebba5e86b2988458e48516b2b6422650f0e783f7a1fe1628a1d5c02/MVP-design-2a.png" /> <img width="2880" height="1084" width_o="2880" height_o="1084" data-src="https://freight.cargo.site/t/original/i/266bef8621265f2c92da312ad43be34207f2ea7e9b0e7f7e38545502c6d50027/MVP-design-2b.png" data-mid="245812722" border="0" alt="Suggested search selected and triggered" data-caption="Suggested search selected and triggered" src="https://freight.cargo.site/w/1000/i/266bef8621265f2c92da312ad43be34207f2ea7e9b0e7f7e38545502c6d50027/MVP-design-2b.png" /> <img width="2880" height="1084" width_o="2880" height_o="1084" data-src="https://freight.cargo.site/t/original/i/5cf2354c36c946f948c7cf57973d55dd198f723d2ddeff01791237dea180851a/MVP-design-2c.png" data-mid="245812723" border="0" alt="Hire date filter automatically applied" data-caption="Hire date filter automatically applied" src="https://freight.cargo.site/w/1000/i/5cf2354c36c946f948c7cf57973d55dd198f723d2ddeff01791237dea180851a/MVP-design-2c.png" /> Outcomes The first iteration of natural language search was built in one quarter. It was rolled out internally and to a select group of clients in Beta. Early feedback confirmed the potential of NLS to make searching more intuitive.Because the MVP supported only a subset of available filters, stakeholders decided to hold back the functionality from the broader People Search launch. This allowed us to protect trust in the new search experience while positioning NLS for future integration with the upcoming universal search initiative. Reflection I’m proud of what the team achieved in a short time. We proved out the concept, created a scalable foundation, and accelerated learning in AI and Data Science practices. While not part of the initial People Search release, this work provided us with clarity on the path forward and informed the universal search strategy. Personally, I strengthened my ability to collaborate deeply with Data Science, navigate emerging technologies, and shape platform-level conversations. https://emilyjamesdesign.com/People-Search-Filtering Sat, 27 Sep 2025 22:26:13 +0000 Emily James Design https://emilyjamesdesign.com/People-Search-Filtering People Search &amp; FilteringB2B HR Platform Project overview Across the platform’s suite of products, the people search functionality had grown fragmented. Different teams had implemented their own filters, layouts, and behaviors. This led to inconsistent experiences and unreliable results, making it hard for users to trust the data or complete tasks efficiently. To solve this, we needed to unify the experience, but we couldn’t tackle everything at once. <img width="1882" height="340" width_o="1882" height_o="340" data-src="https://freight.cargo.site/t/original/i/aa8ffb9badb589beba325beb37d61a675e3856e8504310e9042521e561b99d6c/Project-overview-4.png" data-mid="245918297" border="0" src="https://freight.cargo.site/w/1000/i/aa8ffb9badb589beba325beb37d61a675e3856e8504310e9042521e561b99d6c/Project-overview-4.png" /> We began with the platform's most heavily trafficked search page, which receives over 14 million views per month and serves as a daily home base for thousands of HR administrators. <img width="2843" height="1317" width_o="2843" height_o="1317" data-src="https://freight.cargo.site/t/original/i/f1958a42e817430c6123806e2845adff94ef69c1c6c259e5872c5180cbc3429a/Project-overview---ee-search-page.png" data-mid="245918598" border="0" src="https://freight.cargo.site/w/1000/i/f1958a42e817430c6123806e2845adff94ef69c1c6c259e5872c5180cbc3429a/Project-overview---ee-search-page.png" /> Project goalsRestore trust in searchSet a scalable foundation for people search across the platformRebrand from “employee” to “person” to better represent the full user lifecycle and incorporate “non-employee” archetypes (e.g., recruiting candidates, new hires in onboarding, 1099 contractors) Role &amp; team I was the Lead Product Designer on this initiative, responsible for the end-to-end design process from discovery through delivery. I worked closely with a Product Manager, an Engineering Manager, and five Engineers. I also partnered with a UX Researcher on usability testing and collaborated with the design system team to define and codify scalable patterns. Process Discovery I began by taking inventory of all of the people search experiences across the platform, identifying inconsistencies in filtering, layout, and behavior. I cross-referenced those flows with the filters Product had flagged as key requirements, aiming to build a foundation that could support needs across the suite, not just this one page. I then conducted a thorough analysis of the Employee Search page itself, examining usage patterns, support tickets, and previous feedback. This helped me define core user archetypes, everyday use cases, and key pain points. I also conducted a competitive analysis to assess modern conventions in search, filtering, and data table layout. This helped ground our direction in best practices. <img width="1687" height="764" width_o="1687" height_o="764" data-src="https://freight.cargo.site/t/original/i/76b684e6a14a7355468c84344b2e6a4aff995ed83ecffd539f31ac1225efae01/Discovery-1.png" data-mid="241393908" border="0" src="https://freight.cargo.site/w/1000/i/76b684e6a14a7355468c84344b2e6a4aff995ed83ecffd539f31ac1225efae01/Discovery-1.png" /> <img width="1687" height="887" width_o="1687" height_o="887" data-src="https://freight.cargo.site/t/original/i/c65b3378c9b7b8c09ac6da9fb5449d1cff561145e92e1898f28dcfd4f9120b29/Discovery-4.png" data-mid="245918655" border="0" src="https://freight.cargo.site/w/1000/i/c65b3378c9b7b8c09ac6da9fb5449d1cff561145e92e1898f28dcfd4f9120b29/Discovery-4.png" /> Design &amp; iteration With a clear picture of user needs and platform constraints, I began wireframing design concepts and created a robust wireframe proposal that encompassed the full set of desired functionality. This prototype facilitated initial conversations with Engineering and enabled quicker design iterations as I moved into higher fidelity. <img width="2884" height="1856" width_o="2884" height_o="1856" data-src="https://freight.cargo.site/t/original/i/7bd8ad1177f0dc15a3f95f06dc7845e5fb41f778fe2041e398776591f1d8645b/Lo-fi---Admin---default.png" data-mid="245918814" border="0" src="https://freight.cargo.site/w/1000/i/7bd8ad1177f0dc15a3f95f06dc7845e5fb41f778fe2041e398776591f1d8645b/Lo-fi---Admin---default.png" /> <img width="2880" height="1074" width_o="2880" height_o="1074" data-src="https://freight.cargo.site/t/original/i/563c850c64c606fb974fcb2c319f05b2aca1eb8e8ad7cf8b0d1bb17f15cfd66a/Design-iteration-3.png" data-mid="241394300" border="0" src="https://freight.cargo.site/w/1000/i/563c850c64c606fb974fcb2c319f05b2aca1eb8e8ad7cf8b0d1bb17f15cfd66a/Design-iteration-3.png" /> As the design evolved, I paid particular attention to filter behavior, layout consistency, and accessibility across screen sizes. I collaborated closely with the design system team to ensure components were aligned with platform standards. Where gaps existed, we codified new patterns together. <img width="2327" height="431" width_o="2327" height_o="431" data-src="https://freight.cargo.site/t/original/i/6c53cbac3e76140eeead3566252946e60d365a43afaff1cddb00bced9efd9b1a/Design-iteration-7.png" data-mid="245918681" border="0" src="https://freight.cargo.site/w/1000/i/6c53cbac3e76140eeead3566252946e60d365a43afaff1cddb00bced9efd9b1a/Design-iteration-7.png" /> Usability testing To pressure-test the new experience, I partnered with a UX researcher to define goals, develop a test plan, and recruit users. We set out to test how easily users could find filters, how well new interaction patterns performed, and where we could continue improving the design. I ran six moderated sessions with active users of the current Employee Search page. Overall, participants found the new layout intuitive and completed tasks with ease. However, some supplemental actions were unclear, so I iterated on labeling and positioning to improve clarity. I also surfaced broader visual concerns to the design system team for follow-up. MVP design After incorporating testing feedback, I finalized the MVP design and supported implementation through sprint planning, handoff documentation, ongoing engineering check-ins, and design QA. <img width="3840" height="2180" width_o="3840" height_o="2180" data-src="https://freight.cargo.site/t/original/i/b0812cd6dd480fbcb21d9cf5112f73958fae49f819a56c15a1027c8eaa0b3576/MVP-design-3.png" data-mid="245918698" border="0" src="https://freight.cargo.site/w/1000/i/b0812cd6dd480fbcb21d9cf5112f73958fae49f819a56c15a1027c8eaa0b3576/MVP-design-3.png" /> <img width="3040" height="1692" width_o="3040" height_o="1692" data-src="https://freight.cargo.site/t/original/i/58860e0da1137a28cb6ba41ecb181b7632359d44cdb9f5e4339890341e57fb03/MVP-design-2.png" data-mid="241394486" border="0" src="https://freight.cargo.site/w/1000/i/58860e0da1137a28cb6ba41ecb181b7632359d44cdb9f5e4339890341e57fb03/MVP-design-2.png" /> The redesigned experience launched in phases: Beta, Early Access, and General Availability. It received positive internal and customer feedback. It also served as a reference model for future search experiences, unlocking new platform-level initiatives, including Natural Language Search and updates to our filtering system. Outcomes Resolved 6 of the top customer-reported feedback requests related to Employee Search, impacting $21.5M+ in revenue. Improved customer satisfaction by increasing system reliability, improving search accuracy, and addressing long-standing admin pain points.Established reusable patterns that informed additional roadmaps to consolidate people search experiences. Next stepsContinue usability iteration and simplification based on customer feedback.Extend patterns across modules (e.g., Benefits, Recruiting, Reporting).Partner with the universal search initiative to ensure a consistent, intuitive people-search experience.Explore support for natural language search queries. Reflection This project challenged me to strike a balance between platform consistency and immediate customer needs. By starting with Employee Search, we were able to address a high-impact problem while building scalable patterns for the entire suite. The phased rollout, combined with usability testing, ensured we delivered immediate value while laying the groundwork for long-term impact. One area for improvement was the design QA process. Starting it earlier would have reduced rework toward the end. Still, the team rallied to uphold quality, and I’m proud of how we closed out the release. https://emilyjamesdesign.com/Direct-Deposit-OOUX Thu, 04 Dec 2025 02:36:15 +0000 Emily James Design https://emilyjamesdesign.com/Direct-Deposit-OOUX Direct Deposit OOUXB2B HR Platform Project overview Direct deposit is one of the most critical employee self-service features, yet the experience had become fragmented. Over time, three different versions emerged:Legacy WebResponsive WebMobile Onboarding TaskMaintaining three separate experiences was inefficient for our teams and confusing for customers. The team needed to reconcile these fragmented experiences into a single, modern solution.&nbsp;But it was difficult to know what to prioritize or how to unify the flows. <img width="1160" height="954" width_o="1160" height_o="954" data-src="https://freight.cargo.site/t/original/i/79d56cd1a9c5613ac7cda567bd113d87177f974137f26a08f61f2c302d135c56/project-overview.png" data-mid="241541697" border="0" src="https://freight.cargo.site/w/1000/i/79d56cd1a9c5613ac7cda567bd113d87177f974137f26a08f61f2c302d135c56/project-overview.png" /> Project goalsSimplify the setup processImprove understanding of various direct deposit states: pending, invalid, incomplete, etc.Reduce errors Process Before jumping into wireframes, I used Object-Oriented UX (OOUX) to clarify the system's underlying structure. OOUX is a method for identifying and defining the real-world objects in a product before designing anything. With three fragmented versions of the same experience, I needed to establish shared language and a clear mental model before the team could meaningfully align on a direction. Noun foraging I reviewed screenshots, documentation, and customer feedback to surface and sort every noun in the system. This revealed several opportunities to consolidate and clarify. <img width="2846" height="1104" width_o="2846" height_o="1104" data-src="https://freight.cargo.site/t/original/i/6c14bd65b877afb88a5f39b82b9c339e60b22aa705f8fdfb937323f29c1b79e4/noun-foraging-insights.png" data-mid="245919349" border="0" src="https://freight.cargo.site/w/1000/i/6c14bd65b877afb88a5f39b82b9c339e60b22aa705f8fdfb937323f29c1b79e4/noun-foraging-insights.png" /> Paycheck and direct deposit felt synonymous, pointing to a need for clearer definitionsBoth concepts relate to compensation, so we needed to incorporate that into our object definitionsAllocation, setup, and split were being used interchangeably, so we needed to consolidate terminology Verifying objects With nouns sorted, I applied three questions to each candidate to determine whether it qualified as a core object: Does it have structure? Can instances be created of it? Does it serve a useful purpose? <img width="2610" height="789" width_o="2610" height_o="789" data-src="https://freight.cargo.site/t/original/i/0b889e8f1f2f78db3a909edbb2984e5726f77d1bc2a4176b4520e49ef83fcaad/2-SIP-insights.png" data-mid="245919575" border="0" src="https://freight.cargo.site/w/1000/i/0b889e8f1f2f78db3a909edbb2984e5726f77d1bc2a4176b4520e49ef83fcaad/2-SIP-insights.png" />Direct deposit and paper checks are the two forms a paycheck can take, making them attributes of the main object rather than objects themselvesRemaining balance is an attribute of the paycheck, not a standalone object Defining objects Each object also needed a clear, agreed-upon definition. This step forced precision and surfaced assumptions the team hadn't realized they were making. <img width="2421" height="902" width_o="2421" height_o="902" data-src="https://freight.cargo.site/t/original/i/444f2d2f28782cb786bb8f0341b3db576934fd06bf6b9073bf9b961ea4bed4c2/3-Definition-insights.png" data-mid="245919570" border="0" src="https://freight.cargo.site/w/1000/i/444f2d2f28782cb786bb8f0341b3db576934fd06bf6b9073bf9b961ea4bed4c2/3-Definition-insights.png" /> Mapping relationshipsWith objects defined, I mapped how they connected to one another using a nested-object matrix and visual relationship maps. <img width="2646" height="1338" width_o="2646" height_o="1338" data-src="https://freight.cargo.site/t/original/i/00a048bb36e75cfca506327f8e2d62cae3d278cbd2eb94f45262b2e97129e9fd/Relationship-insights.png" data-mid="245919350" border="0" src="https://freight.cargo.site/w/1000/i/00a048bb36e75cfca506327f8e2d62cae3d278cbd2eb94f45262b2e97129e9fd/Relationship-insights.png" /> Defining object relationships was the most challenging part of the process Visual maps helped clarify the matrix and led to revisions in object definitions This confirmed that object definitions sometimes need to evolve based on how relationships are mapped CTAs &amp; attributes Brainstorming actions and attributes for each object surfaced a structural problem in the current experience: bank account attributes and CTAs were being exposed during the allocation step, where they didn't belong. Catching this before any UI was designed meant we could address it early. ArtifactsWith objects, relationships, CTAs, and attributes defined, I created object cards to serve as clear documentation for the team.&nbsp; <img width="1950" height="1275" width_o="1950" height_o="1275" data-src="https://freight.cargo.site/t/original/i/d5087bf1fcceeee43bcde9e656fd6bebdb8f9db723f805dd4efbfb55e678cb42/Object-cards.png" data-mid="241542510" border="0" src="https://freight.cargo.site/w/1000/i/d5087bf1fcceeee43bcde9e656fd6bebdb8f9db723f805dd4efbfb55e678cb42/Object-cards.png" /> I then used a shapeshifting exercise to imagine each object in different contexts: as a card, in a list, or as a detail page. This gave the team a concrete starting point for wireframing. <img width="3038" height="1289" width_o="3038" height_o="1289" data-src="https://freight.cargo.site/t/original/i/9d439cd5a758e750d8709339fd0f8a3eed03bba98f87c324e21814fb98e04bcc/Object-shapeshifting---Bank-account.png" data-mid="241583150" border="0" src="https://freight.cargo.site/w/1000/i/9d439cd5a758e750d8709339fd0f8a3eed03bba98f87c324e21814fb98e04bcc/Object-shapeshifting---Bank-account.png" /> <img width="3038" height="1289" width_o="3038" height_o="1289" data-src="https://freight.cargo.site/t/original/i/49f1d51875f5d4c12246b9f20ead0b471612749538daebeac5f092a170c1cc2d/Object-shapeshifting---Paycheck.png" data-mid="241583151" border="0" src="https://freight.cargo.site/w/1000/i/49f1d51875f5d4c12246b9f20ead0b471612749538daebeac5f092a170c1cc2d/Object-shapeshifting---Paycheck.png" /> OutcomesAlthough the project was deprioritized, the OOUX work laid a strong foundation that the team can build on when the initiative resumes. It clarified the system, aligned partners, and set a clear direction even without moving into high-fidelity design. If the project restarts, I'd prioritize the following next steps: Refine the documentation using the insights gathered. Review the relationship map, object cards, and shapeshifting outputs with engineering to confirm feasibility and uncover gaps. Translate core CTAs into object-oriented user stories. Use the shapeshifting exercise as the starting point for early wireframes. https://emilyjamesdesign.com/Flagged-Invoices Sat, 19 Apr 2025 18:51:47 +0000 Emily James Design https://emilyjamesdesign.com/Flagged-Invoices Flagged Invoices Shamrock Trading Corporation, RTS Pro Project overview Shamrock Trading Corporation is a parent company for transportation, finance, and technology services. One of the financial services Shamrock offers is factoring, which means Shamrock will buy invoices from truck drivers so they get paid in 1-2 days instead of the typical 60-90 days from the company they hauled for. These invoices must be audited by Shamrock account representatives before purchasing.&nbsp; During invoice audits, reps will sometimes flag an invoice, signifying it cannot be purchased due to an issue. For example, if an invoice has bad-quality documents attached or is missing certain documents, it would be flagged. The current process is very manual and requires the reps to reach out to the customer to explain the issue and try to resolve it. Project goalsGive customers visibility to invoice issues in RTS Pro, the web and mobile application for Shamrock customers.Provide a way for customers to resolve invoice issues themselves.Reduce email and call volume for internal reps. Process Discovery To begin this process, we had a kickoff meeting with the product squad and business stakeholders to review project goals, discuss the current process, and brainstorm on initial requirements. After the meeting, I created a Miro board outlining the user flow, decision points, and functionality to ensure all parties were aligned and approved the path forward. <img width="3151" height="1269" width_o="3151" height_o="1269" data-src="https://freight.cargo.site/t/original/i/ae7406bffd2f26bb0143e7d4f1a75501c36fb9319d935fb6b0fc81ec93e59d1e/Flagged-Invoices-Flow.jpg" data-mid="230396854" border="0" src="https://freight.cargo.site/w/1000/i/ae7406bffd2f26bb0143e7d4f1a75501c36fb9319d935fb6b0fc81ec93e59d1e/Flagged-Invoices-Flow.jpg" />Not all customer account teams handle audits the same way, complicating the project's initial scope. Depending on the customer, auditors will either allow time for fixes or flag the invoice and move on to the next audit. Larger customers that submit a high volume of invoices (and generate significant revenue) are usually given the chance to fix issues before auditors submit their purchase for funding. Smaller customers do not get that opportunity and have to create a new invoice submission to be re-audited and (hopefully) funded. Therefore, we had two user flows branching off from the internal audit process: Allowing customers to make updates to an in-progress invoice auditNot allowing updates and requiring a new submission After reviewing the flows with the UX team, I started to wonder whether we were overcomplicating the current same-day processing flow and unnecessarily duplicating functionality in the app. The Product Owner ultimately agreed and noted that larger customers likely won’t change their behavior and will still expect to go through their rep to resolve issues. We were concerned this would be wasted functionality, as the immediate value was in making it easier for smaller customers (often doing business on their phones) to resubmit flagged invoices. We regrouped with the business stakeholders to vet this decision. They agreed and we discussed what terminology reps use with customers to communicate flagged invoices. We learned: “Denied” means we will never purchase the invoice“On hold” or “Held” means we rejected the invoice but would consider purchasing it in a future submission if updates are made After these discussions, we refocused our efforts on the mobile experience for smaller customers who would need to resubmit their invoices. Design &amp; iteration I conducted some mobile competitive analysis and sketched some initial concepts. <img width="294" height="256" src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfCsYVH0a5Po2pf21_AE5W0l19R7rxYII6gXhKndWrm1qj2g6-2CgQsFEAnKuHQzPngEfMHu0ps-2iYItS2ID3kuFGZbtwynf-0gfUV7iLnhEMmaakYLBTw1UmYmHAcRxCHIrBq_m7yoTNkKoZL01kH0sU?key=6WfpWNs_4fzhnlhe5HtqeA"> <img width="289" height="373" src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXehReSa9CshDZ4JT53bYsiRjsL0fsob6YVNcfEk_liIaZBMlAaIoCtGprKSZ2ky_2e8ZYaXVDquOVDmnwqoWvmAmNlHYIULHgunXiXzX5AMloYoPSV6KIptN120DnH8jpP3L0UHEDnLMaq6iXjkTq0C1g?key=6WfpWNs_4fzhnlhe5HtqeA"> <img width="294" height="109" src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfG4PiCb6GNoFVb6jrzgaX-Fhj5cdzUMcKm5BM9ik4nH7QVILWEFVe6n64NdCK1aPkW81SL4vhs-ow4xgbXBj5B1OQixf9_ExuO9MGtdLfqRh2aqrI3OlEUCpEW5ZrOJdsYVc0tAtsffXEr_9SONWACLAo?key=6WfpWNs_4fzhnlhe5HtqeA"> I worked through design concepts to communicate invoice statuses on mobile. Although this project focused only on held invoices, I planned for future status enhancements, including denied and funded. <img width="750" height="1624" width_o="750" height_o="1624" data-src="https://freight.cargo.site/t/original/i/b879326a6476ce979f1f47dcf8e1cae002361df3fb0693105e6fbaf9cdb2da11/invoice-card-statuses1.png" data-mid="230397004" border="0" src="https://freight.cargo.site/w/750/i/b879326a6476ce979f1f47dcf8e1cae002361df3fb0693105e6fbaf9cdb2da11/invoice-card-statuses1.png" /> <img width="750" height="1624" width_o="750" height_o="1624" data-src="https://freight.cargo.site/t/original/i/8352c6f356d8857e38389ed0359e33988ed30dd7c298fe00e08a8e2ee651e94e/invoice-card-statuses4.png" data-mid="230397005" border="0" src="https://freight.cargo.site/w/750/i/8352c6f356d8857e38389ed0359e33988ed30dd7c298fe00e08a8e2ee651e94e/invoice-card-statuses4.png" /> <img width="750" height="1624" width_o="750" height_o="1624" data-src="https://freight.cargo.site/t/original/i/76d943ce4c2c93ea5f2878e8dd05d3ba0605f51ba446626b76734be4312ae744/invoice-card-statuses5.png" data-mid="230397006" border="0" src="https://freight.cargo.site/w/750/i/76d943ce4c2c93ea5f2878e8dd05d3ba0605f51ba446626b76734be4312ae744/invoice-card-statuses5.png" /> We determined the held status should persist on the invoice to provide an accurate record, but we also wanted to convey whether or not a held invoice had been resubmitted. MVP design I refined the design direction and prepared end-to-end visuals for upcoming conversations with the development team. <img width="750" height="1624" width_o="750" height_o="1624" data-src="https://freight.cargo.site/t/original/i/0333b3cc7f6bcb477959a59056f6fc10a6229bb175b1ecab109c4ccf87893bc5/001-Factoring-main-screen2x.png" data-mid="230397108" border="0" alt="Held invoice appears in list" data-caption="Held invoice appears in list" src="https://freight.cargo.site/w/750/i/0333b3cc7f6bcb477959a59056f6fc10a6229bb175b1ecab109c4ccf87893bc5/001-Factoring-main-screen2x.png" /> <img width="750" height="1624" width_o="750" height_o="1624" data-src="https://freight.cargo.site/t/original/i/bc8ed594ba6af0ceb016e71416c30ca01946ffe7acc3db518fd5f6b91042eb8a/002-Invoice-Details---Edit-option2x.png" data-mid="230397109" border="0" alt="View held invoice details" data-caption="View held invoice details" src="https://freight.cargo.site/w/750/i/bc8ed594ba6af0ceb016e71416c30ca01946ffe7acc3db518fd5f6b91042eb8a/002-Invoice-Details---Edit-option2x.png" /> <img width="750" height="1624" width_o="750" height_o="1624" data-src="https://freight.cargo.site/t/original/i/7416efb5b9c2fffdf138c1fcd987741dd6d211df9c3ff93e5705ed08e475e214/003-Edit-Invoice---details-transferred2x.png" data-mid="230397110" border="0" alt="Edit held invoice" data-caption="Edit held invoice" src="https://freight.cargo.site/w/750/i/7416efb5b9c2fffdf138c1fcd987741dd6d211df9c3ff93e5705ed08e475e214/003-Edit-Invoice---details-transferred2x.png" /> <img width="750" height="1624" width_o="750" height_o="1624" data-src="https://freight.cargo.site/t/original/i/570f2e851cc59bdfbb9d12bdd87dac2378a8a32366b27b490b2ec1a708104b26/004-Edit-Invoice---new-docs-added2x.png" data-mid="230397111" border="0" alt="Add missing paperwork" data-caption="Add missing paperwork" src="https://freight.cargo.site/w/750/i/570f2e851cc59bdfbb9d12bdd87dac2378a8a32366b27b490b2ec1a708104b26/004-Edit-Invoice---new-docs-added2x.png" /> <img width="750" height="1624" width_o="750" height_o="1624" data-src="https://freight.cargo.site/t/original/i/78e61bb5149e0714e198e3e7d479b7e326232a1cc911d044b1d26cc09c9e3bfb/005-Saved-Invoice2x.png" data-mid="230397112" border="0" alt="Save new invoice" data-caption="Save new invoice" src="https://freight.cargo.site/w/750/i/78e61bb5149e0714e198e3e7d479b7e326232a1cc911d044b1d26cc09c9e3bfb/005-Saved-Invoice2x.png" /> <img width="750" height="1624" width_o="750" height_o="1624" data-src="https://freight.cargo.site/t/original/i/c7a1dde3c25266876c8416e62dd822f8e34c5e4a7bb06f80f7c30f58203bf1fa/006-Submit-screen2x.png" data-mid="230397113" border="0" alt="Submit new invoice" data-caption="Submit new invoice" src="https://freight.cargo.site/w/750/i/c7a1dde3c25266876c8416e62dd822f8e34c5e4a7bb06f80f7c30f58203bf1fa/006-Submit-screen2x.png" /> <img width="750" height="1624" width_o="750" height_o="1624" data-src="https://freight.cargo.site/t/original/i/a85bd92f3f3999ee5790f823d64c81097efea5d8ac15cafea88a4d4d06a4aa61/007-Confirmation-screen2x.png" data-mid="230397114" border="0" alt="New invoice submitted" data-caption="New invoice submitted" src="https://freight.cargo.site/w/750/i/a85bd92f3f3999ee5790f823d64c81097efea5d8ac15cafea88a4d4d06a4aa61/007-Confirmation-screen2x.png" /> <img width="750" height="1624" width_o="750" height_o="1624" data-src="https://freight.cargo.site/t/original/i/95f9094cc1184a8770d7ab5769555e4927225de9df23220990acbf9d978f765d/008-Held-invoice-resubmitted2x.png" data-mid="230397115" border="0" alt="New invoice appears in list" data-caption="New invoice appears in list" src="https://freight.cargo.site/w/750/i/95f9094cc1184a8770d7ab5769555e4927225de9df23220990acbf9d978f765d/008-Held-invoice-resubmitted2x.png" /> <img width="750" height="1624" width_o="750" height_o="1624" data-src="https://freight.cargo.site/t/original/i/beb46e4c3d0a4bb06c385126178bd5b9dc3e96ea918f15507353a8adc2b77b5b/009-Invoice-Details---Held-Invoice2x.png" data-mid="230397116" border="0" alt="View original held invoice details" data-caption="View original held invoice details" src="https://freight.cargo.site/w/750/i/beb46e4c3d0a4bb06c385126178bd5b9dc3e96ea918f15507353a8adc2b77b5b/009-Invoice-Details---Held-Invoice2x.png" /> <img width="750" height="1624" width_o="750" height_o="1624" data-src="https://freight.cargo.site/t/original/i/1f487a9dae6e1938d63143ab4853556cc75e6db44c2953ccfbd6c14a8a629363/010-Invoice-Details---New-Invoice2x.png" data-mid="230397117" border="0" alt="View new invoice details" data-caption="View new invoice details" src="https://freight.cargo.site/w/750/i/1f487a9dae6e1938d63143ab4853556cc75e6db44c2953ccfbd6c14a8a629363/010-Invoice-Details---New-Invoice2x.png" /> Once the design was finalized, we held a project epic breakout session, focusing on the mobile enhancements first. I walked through the prototype, the team asked questions, and we discussed what stories needed to be created. Once stories were defined, we also wrote acceptance criteria as a team. Throughout development, there was extensive back-and-forth discussion and testing to ensure everything looked and functioned as expected. As we neared the end of development, we collaborated with the marketing team to create an email to customers announcing this change. I provided the following bullet points highlighting the benefits of this change to help inform the email content. Customers now can: Understand which invoices have been held during an audit and why. Easily edit and resubmit held invoices in the next purchase. We save and transfer all data so they don’t have to retype information or reattach documents. Stay organized by seeing which held invoices have been resubmitted and when. Outcomes The feature was well-received as a very intuitive design. Even without the scheduled marketing push, users discovered it and used it without issue.83 invoices were resubmitted through the new process in one day without any formal communication to clients about the change.&nbsp;200 invoices were resubmitted the following day.2 weeks after launch, we hit 5000 resubmit events.4 weeks after launch, we hit 8800 resubmit events.12 weeks after launch, we hit 29,103 resubmit events across 5,566 companies. For reference, there are about 14,000 companies using the factoring service.Internal reps called this feature a “game-changer”. It has saved them a lot of time returning customer phone calls or emails. https://emilyjamesdesign.com/Proposal-Import Sat, 19 Apr 2025 16:40:14 +0000 Emily James Design https://emilyjamesdesign.com/Proposal-Import Proposal ImportRFP360 RFP360, RFP (request for proposal) management software, was acquired by Responsive (formerly RFPIO) in August 2021. The work highlighted in this case study was delivered before that acquisition. Users of RFP360 can upload an external RFP file to the system to map questions, assign responses to subject-matter experts, and then export the results back to the original file. This capability saves users time spent switching between old files and emails and provides all team members with the same context and a streamlined path for collaboration and communication. This platform capability was a hot topic among users. We frequently heard statements such as “It’s too time-consuming” and “There’s not a lot of forgiveness,” so we set out to address these issues. We decided to facilitate a design sprint with a working group of key stakeholders to help narrow our focus. Roles: Design Sprint Facilitator, UX/UI Designer Part 1: Design Sprint Known challengesImport is unreliable. Mapping is time-consuming. Lack of support for complex formats. Process Our working group took part in 3 days of design sprint activities. The focus for Day 1 was to define a goal and create a common understanding of the problem. We created a map of the challenge and gathered valuable stakeholder expertise. Our areas of expertise included Sales, Marketing, and Client Success. We turned pain points from the challenge map into opportunities using How Might We statements. <img width="624" height="468.00000000000006" src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfpmdSN2QdXGLxZQ87RSQ206Ii86T8NZNmSGr0iTKn7XuTttMyRNBGJN3XfCaLL17xzqNLdIY-fOtj09dvfS7VJgNMo14voEHuW5rwLc8qWWr8y7HCNJY_Lr_WnNzNkbE7F07ZlrLYrfcUdSBO6xjA5NTY?key=qOxpfAAM5Jb1eKA_MssthV_l" data-caption="Goal brainstorming"> <img width="624" height="468" src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcuE0wXZxwFZ9IVsK9F2orFv9q7eWdpRm4ujqkHbUpGKZLmDNB_-KuLR-cPH5VZWgrc9ucipsVU8U7VjX5ApDssLZ4eg-5bOIzr8QyXIjsHOBEJt3heSFq0EvKkK6RZicf4i7M01vQGU8tHqjsCVWqq_3c?key=qOxpfAAM5Jb1eKA_MssthV_l" data-caption="Challenge map"> <img width="624" height="283" src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfpER5ge6C8xOmY07c0kEXXwdmJ87nYpsLe6zLchL89ewxXuLJAU9baaYjiIckEDz-ncrbhGJBOjnOXy7kQZXrXGq1dr4hdqEbJGSIDt8O0j1JsCJLjhTbL_-TJGeDwD4LTkWpo8Y0k4ybNcD-NHzTwvFA?key=qOxpfAAM5Jb1eKA_MssthV_l" data-caption="Refined challenge map"> <img width="624" height="468" src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfZpuoVknrhahDy7QJ4HVlG3cCFHO1ZLhaIsDSnM_ucB2Qf-ioCrt_aDhvP4ZUtXfwFxvjey3arQweQxftKGuWLFlnn1c5FPpoVXr7jFkgVZK8dh31_89fhSqIWF-Iawwc7Psk5GnNjPciAiOTIrNN6BtU?key=qOxpfAAM5Jb1eKA_MssthV_l" data-caption="How might we statements"> At the end of the day, we defined key focus areas: Reliability: support for more file types &amp; file complexityUsability: create a more intuitive, flexible, and time-saving interface <img width="4032" height="3024" width_o="4032" height_o="3024" data-src="https://freight.cargo.site/t/original/i/8fbace459ecd5ee928a68bf130f4447a9be8993eebc879da34d0c9402795111a/IMG_2011.JPG" data-mid="230395712" border="0" src="https://freight.cargo.site/w/1000/i/8fbace459ecd5ee928a68bf130f4447a9be8993eebc879da34d0c9402795111a/IMG_2011.JPG" /> The activities for Day 2 were Lightning Demos and sketching. Members of the working group shared one or two examples to inspire solution ideas related to the How Might We statements. <img width="4032" height="3024" width_o="4032" height_o="3024" data-src="https://freight.cargo.site/t/original/i/053a17a7e320942a80783a1269b8876c7c8883dcf1eceef191d0c22d13bb35be/Lightning-Demos1.jpg" data-mid="230395817" border="0" src="https://freight.cargo.site/w/1000/i/053a17a7e320942a80783a1269b8876c7c8883dcf1eceef191d0c22d13bb35be/Lightning-Demos1.jpg" /> The activities for Day 3 were Crazy-8s sketches, solution sketches, and dot-voting. We had the working group participate in Crazy-8s, a fast-paced sketching exercise that takes your strongest idea and explores variations of it. Each participant then focused on creating a final solution sketch, building on what worked best during Crazy-8s and drawing it in more detail. We spent time reviewing each sketch as a team, debating the pros and cons. <img width="3024" height="4032" width_o="3024" height_o="4032" data-src="https://freight.cargo.site/t/original/i/8b2de07ed11788b69c2bf7692f87ecc541b8f11330874d6e35b4e3447ac013a0/Solution-sketch-1.jpg" data-mid="230395823" border="0" src="https://freight.cargo.site/w/1000/i/8b2de07ed11788b69c2bf7692f87ecc541b8f11330874d6e35b4e3447ac013a0/Solution-sketch-1.jpg" /> <img width="3024" height="4032" width_o="3024" height_o="4032" data-src="https://freight.cargo.site/t/original/i/d9bf2b7f55b258b3413261fee3b9601e0a0cc4d542480ef7a87af7a53cef2da7/Solution-sketch-2.jpg" data-mid="230395824" border="0" src="https://freight.cargo.site/w/1000/i/d9bf2b7f55b258b3413261fee3b9601e0a0cc4d542480ef7a87af7a53cef2da7/Solution-sketch-2.jpg" /> <img width="3024" height="4032" width_o="3024" height_o="4032" data-src="https://freight.cargo.site/t/original/i/ded9546056ad5ec03e32339c37276568e4999b396d1d2525ca256014300517d0/Solution-sketch-3.jpg" data-mid="230395825" border="0" src="https://freight.cargo.site/w/1000/i/ded9546056ad5ec03e32339c37276568e4999b396d1d2525ca256014300517d0/Solution-sketch-3.jpg" /> <img width="3024" height="4032" width_o="3024" height_o="4032" data-src="https://freight.cargo.site/t/original/i/840dc2718092b37d09ec89661507719011e5eb30fc7c5ed011ef99df44becdb1/Solution-sketch-4.jpg" data-mid="230395826" border="0" src="https://freight.cargo.site/w/1000/i/840dc2718092b37d09ec89661507719011e5eb30fc7c5ed011ef99df44becdb1/Solution-sketch-4.jpg" /> <img width="3024" height="4032" width_o="3024" height_o="4032" data-src="https://freight.cargo.site/t/original/i/7de9b460aff5ea3d36185079b3bb18580a662a49098f32ccf68e819aca94856c/Solution-sketch-5.jpg" data-mid="230395827" border="0" src="https://freight.cargo.site/w/1000/i/7de9b460aff5ea3d36185079b3bb18580a662a49098f32ccf68e819aca94856c/Solution-sketch-5.jpg" /> <img width="3024" height="4032" width_o="3024" height_o="4032" data-src="https://freight.cargo.site/t/original/i/6785ac1564aa35f35454cc9b6716bfb13689a52c569f080802c2055313d0b487/Solution-sketch-6.jpg" data-mid="230395828" border="0" src="https://freight.cargo.site/w/1000/i/6785ac1564aa35f35454cc9b6716bfb13689a52c569f080802c2055313d0b487/Solution-sketch-6.jpg" /> <img width="3024" height="4032" width_o="3024" height_o="4032" data-src="https://freight.cargo.site/t/original/i/df05e336af01a4677d0da34fc7c09fe6e331b439829a95a5b040a9b469ce39a8/Solution-sketch-7.jpg" data-mid="230395829" border="0" src="https://freight.cargo.site/w/1000/i/df05e336af01a4677d0da34fc7c09fe6e331b439829a95a5b040a9b469ce39a8/Solution-sketch-7.jpg" /> <img width="3024" height="4032" width_o="3024" height_o="4032" data-src="https://freight.cargo.site/t/original/i/1316f6b8d757c3e6c1b7f328f9f38799cfedcf80055e4f02539b99c2b8eb83ab/Solution-sketch-8.jpg" data-mid="230395830" border="0" src="https://freight.cargo.site/w/1000/i/1316f6b8d757c3e6c1b7f328f9f38799cfedcf80055e4f02539b99c2b8eb83ab/Solution-sketch-8.jpg" /> What we learnedWe sent a survey to all design sprint participants to gather feedback on what worked well and what could be improved. Some things we would do differently include pushing for concurrent, condensed days for our working group (rather than multiple sessions spread over multiple weeks), gathering more data upfront to inform our discussions better, and providing more examples to the working group during sprint activities. Part 2: Define project strategy &amp; solutionsThe product team took the design sprint insights back, conducted deeper solution discovery, and ultimately broke down work to begin development. We decided to create development initiatives around five focus areas (in order of priority): 1 - Improving performanceFiles took too long to upload, falling short of user expectations. Sometimes file uploads would fail, but there was no communication to the user, resulting in wasted time and additional frustration. We added support for additional file types and improved how and when errors are displayed to users. 2 - Streamlining navigationThe existing project navigation was confusing and overwhelming to users due to the number and order of links. The layout for each view was inconsistent. Users had to reorient themselves every time they navigated to a different tab in their project. Our goal was to make the navigation more straightforward and intuitive. We removed unnecessary links, reordered the remaining links, and renamed them to reflect the user flow better.&nbsp; <img width="624" height="41" src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXeFmOgQJbKu4O2sEySXT6Y212Vg1svOxGvhh5_8MTV7EF_lGKG1DmT4MpT_tpLPY0ANkvEwMTldJzu-lY_X_N4M0U65lDeZmBPycC9w91_t5s9l3zG6VMrA98khuPRKBP3ZBGMjBgLdO7lbXBd-yVXFom0?key=qOxpfAAM5Jb1eKA_MssthV_l" data-caption="Before"> <img width="624" height="41" src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdM1tMu_gTTtucrBpeRWirbUEwDyb-1cL9k5hGHPtsREgoZ038tSOMQLldNnZiEDNDfFdII_rzC-m_uXnxupyCgD99HxXJeXgc_OVUBStnjg-A9sRWuNZhpaXm67wgiBhehBtEAn3YSeAaJ9xW87YXaQzE?key=qOxpfAAM5Jb1eKA_MssthV_l" data-caption="After"> 3 - Aligning interfaces and interactionsThe two import interfaces and interactions for Word and Excel files were vastly different. They needed to be more consistent, so it would be more familiar, thus easier and faster for users as they switched between file types. We successfully aligned layout, styles, colors, language, and interactions, laying the foundation for new, high-profile features. <img width="624" height="379" src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdhjOHZPw35SRPa5xWmgx9uk4_QyLMXtRQeH60AnmUCOKQqYCUqVrLY7WQAKNfXsZHp-N-CBW5rX2BLE3TqFFnLKGhv1GnyLI6bpxj_rgpIuavJIoB4Q304Us5HWzDXZzeGxJt7z3633W7SFdklUl28mAw?key=qOxpfAAM5Jb1eKA_MssthV_l" data-caption="Before (Excel)"> <img width="624" height="379" src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdO2pDni1lMNtN-BxqIfs33a9g6tsxGXiaFPYgLuSCz5AhRrztBy36vfkG5F1l8tnbB2NpjnnkygAmqKLrZunzV9O-dTDIy2YuInTyb1mN_dYvQFEOO4bfKgmyrVGZpATMjK759CkrE98RrDEKwFHjCkWM?key=qOxpfAAM5Jb1eKA_MssthV_l" data-caption="Before (Word)"> <img width="624" height="379" src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdhiDqLvMLeP-_o73ZnH_7xLTD6pOVYZahNwN2_o74RQ1ckDjKXeKRUFdM2eEhk9sdQ3Pcp7rLRsIJO1aNKeOfsYzWkV704ifwc3MpmySZRuqkn0-gTS0CnaLq4aBo9nFg4r9XXmKLJ53yE4UFlwnxpmkI?key=qOxpfAAM5Jb1eKA_MssthV_l" data-caption="After (Excel)"> <img width="624" height="379" src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdJSz3zdAYIsauKFgPkkL6GoPWr65PjRytlMK--yt5-twVQaubHc8DEHgjv98PJUaBhoViaiIPVPKjRGmYf8HDKkmLNv9h4Zux5Fle7G7dhDFWnCHfV4Gfq5zpC7meYxdSPTcgqDU-jUkhylNyIylLVig4?key=qOxpfAAM5Jb1eKA_MssthV_l" data-caption="After (Word)"> 4 - Addressing feature gapsWe heard from potential clients about gaps in our current experience. Some expected features include: saving as a draft, previewing work in progress, easier user assignments, and expanded content mapping types. 5 - Differentiating the experienceWe wanted to be an industry disruptor and differentiate our platform to delight current and, especially, new customers. Differentiation opportunities include: auto-sensing content, communicating file complexity, estimating time to completion, and intelligent response recommendations. https://emilyjamesdesign.com/Design-System-1 Mon, 20 Aug 2018 23:12:51 +0000 Emily James Design https://emilyjamesdesign.com/Design-System-1 Design SystemE-commerce Website Creation and maintenance of an enterprise-level design system for an e-commerce website.Role: UX/UI designer What triggered the creation of a design system? Multiple product squads with independent processes.Lack of shared knowledge.Difficulty with maintaining an up-to-date source of truth. <img width="1440" height="855" width_o="1440" height_o="855" data-src="https://freight.cargo.site/t/original/i/73ca9c2af612dea48447f456ad320d053482e071ce87b16ec5f509bf481c0b85/ds-sketch0.jpg" data-mid="26278622" border="0" src="https://freight.cargo.site/w/1000/i/73ca9c2af612dea48447f456ad320d053482e071ce87b16ec5f509bf481c0b85/ds-sketch0.jpg" /> Process Educate the team The team did research using various webinars, books, and articles, including: Initiating a Design System for the Enterprise from NNgDesign systems—Zero to oneCreating a Design System: A Practitioner's Case StudyDesign Systems book Identify system definition and objectives A design system is a visual language comprised of styles, components, and guidelines to help designers and developers create unified experiences.Objectives: Provide a shared language for designers and developers.Manage design and development at scale.Scale knowledge across disciplines.Communicate what the site is and what it strives to be.Solve the easy problems so product squads can solve the hard ones. Create a structureWe benchmarked other design systems to see how teams were organizing and categorizing their UI.&nbsp;I partnered with a developer to evaluate our front-end architecture and align the system categories accordingly. <img width="1459" height="1000" width_o="1459" height_o="1000" data-src="https://freight.cargo.site/t/original/i/6df1c55a9ba9e538d0b7b8ac5aca4020a8b9ad6cfa05d64bf51f5fffb3127394/finder-windows-and-whiteboard2.jpg" data-mid="22655138" border="0" data-no-zoom src="https://freight.cargo.site/w/1000/i/6df1c55a9ba9e538d0b7b8ac5aca4020a8b9ad6cfa05d64bf51f5fffb3127394/finder-windows-and-whiteboard2.jpg" /> Consolidate existing contentOur teams had several sources of truth, so we used Google Docs to aggregate information that aligned with the agreed-upon information architecture. This document was shared to enable team members to track progress and provide comments as needed. <img width="1004" height="750" width_o="1004" height_o="750" data-src="https://freight.cargo.site/t/original/i/ac3d673a017479c163e4c1649e48a74dbf866890afe53e8763174d880ae0d9a4/google-doc.jpg" data-mid="22654250" border="0" data-no-zoom src="https://freight.cargo.site/w/1000/i/ac3d673a017479c163e4c1649e48a74dbf866890afe53e8763174d880ae0d9a4/google-doc.jpg" /> Determine guiding principles&nbsp; I set up time for key stakeholders to brainstorm site experience principles. The goal was to describe the best qualities of the site today, but also lay the foundation for future experiences.&nbsp;&nbsp;This session yielded three principles that provided a shared perspective and point of view for future experience strategy, creative direction, and related areas. <img width="2540" height="1140" width_o="2540" height_o="1140" data-src="https://freight.cargo.site/t/original/i/e10f3e1ae7abb5a4ff2a86eb9fd55cb53a20b897a4804c7f109a770a1d4ebde8/principles-detail.jpg" data-mid="22654836" border="0" data-no-zoom src="https://freight.cargo.site/w/1000/i/e10f3e1ae7abb5a4ff2a86eb9fd55cb53a20b897a4804c7f109a770a1d4ebde8/principles-detail.jpg" /> Conduct an extensive UI audit&nbsp;Some parts of the system were working well and were easy to document. However, several key areas lacked clarity, resulting in multiple versions of the same component. From this audit, I identified some core elements that warranted immediate discussion. <img width="1459" height="809" width_o="1459" height_o="809" data-src="https://freight.cargo.site/t/original/i/69888aa0713450f870297878993d61c65ef40c7abf8a4968326b1f657d9c85c5/UI-audit.jpg" data-mid="23487006" border="0" data-no-zoom src="https://freight.cargo.site/w/1000/i/69888aa0713450f870297878993d61c65ef40c7abf8a4968326b1f657d9c85c5/UI-audit.jpg" />Align on foundations and core elements&nbsp;We reviewed the “source of truth” document, which outlined a holistic perspective on visual hierarchy and design. This initial discussion helped the team align on the need to create a cohesive experience across the site. We then had more detailed discussions on specific components, including buttons (styles, descriptions, usage), headings (fonts, styles, standards), and links. Refine the documentation Our product teams use Jira for ticket tracking and Confluence for collaborative documentation, so we decided to host the official first version of our design system in Confluence. <img width="3104" height="2500" width_o="3104" height_o="2500" data-src="https://freight.cargo.site/t/original/i/39bf8b9d3d44d76f4987ddad07556a96a7a8e0f00c215fc8d108d9d640991251/confluence-pages.png" data-mid="23469976" border="0" data-no-zoom src="https://freight.cargo.site/w/1000/i/39bf8b9d3d44d76f4987ddad07556a96a7a8e0f00c215fc8d108d9d640991251/confluence-pages.png" />Create internal tools for faster designIn conjunction with the Confluence documentation, I created various tools to help expedite the design process including: Axure widget library and file templateSketch symbols and file templatePhotoshop component templates Define governance planWe created an initial governance plan that outlined how the system team supports component iteration and how to contribute new features or enhancements. We continued to refine it with each sprint cycle.