https://www.mariahaynie.com/musings daily 0.75 2022-07-19 https://www.mariahaynie.com/musings/mothercoders-zs98l monthly 0.5 2022-07-19 https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/1638649989193-WNQ4L0T6G8T75R5MDDW6/MotherCoders.jpg Musings - Teaching design thinking and UX 101 to MotherCoders https://www.mariahaynie.com/musings/uxpa-3nhex monthly 0.5 2022-07-19 https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/1638649989204-8I2U12DA9FX6R2HL6UC2/UXPABlog.png Musings - UXPA Panel on Mentorship https://www.mariahaynie.com/musings/tag/UXresearch monthly 0.5 https://www.mariahaynie.com/musings/tag/UXdesign monthly 0.5 https://www.mariahaynie.com/musings/tag/GettingStarted monthly 0.5 https://www.mariahaynie.com/fixing-a-frontline-problem-with-a-mobile daily 0.75 2022-07-19 https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/ac1650a3-f2e0-41ae-b902-bbbd06371817/SayDesisgnSprintScreens.jpg Fixing a frontline problem with a mobile Using the brand’s existing colors and components, I quickly created a mobile prototype to test during the design sprint with an interactive progress bar and the hub-and-spoke idea for forward and backward movement in the quote flow. https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/46a9bd9f-96cf-4a7b-b796-4fe28f3d7fa9/Final+REcap+page.gif Fixing a frontline problem with a mobile - Make it stand out Final mobile designs I created for the hub pages. This is an example of the Drivers Recap page. This design showcases components from the new design system, the updated progress bar, and the new sequencing of the quote flow. https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/1638649978647-K6S57LX5LQACMXW4ILWA/quote_start.jpeg Fixing a frontline problem with a mobile These high-fidelity desktop designs show the quote flow from the starting screen to the first recap page (from the first spoke to the first hub). https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/1638649978660-2L4K8NGAEGD6Z2FN0Y7P/2-email.jpeg Fixing a frontline problem with a mobile These high-fidelity desktop designs show the quote flow from the starting screen to the first recap page (from the first spoke to the first hub). https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/1638649978679-GIBJSU8PJBEWXIVW8MHU/3-address.jpeg Fixing a frontline problem with a mobile These high-fidelity desktop designs show the quote flow from the starting screen to the first recap page (from the first spoke to the first hub). https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/1638649978758-BRML6NP5CGCU1DO8GHE0/4-phone.jpeg Fixing a frontline problem with a mobile These high-fidelity desktop designs show the quote flow from the starting screen to the first recap page (from the first spoke to the first hub). https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/1638649978769-1CST2273YGKOF39YHL92/5-start.jpeg Fixing a frontline problem with a mobile These high-fidelity desktop designs show the quote flow from the starting screen to the first recap page (from the first spoke to the first hub). https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/1638649978638-9WQMZ2ZWL8OAIF2XV4VB/6-hardstop.jpeg Fixing a frontline problem with a mobile These high-fidelity desktop designs show the quote flow from the starting screen to the first recap page (from the first spoke to the first hub). https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/1638649978669-534F2F3NBJF5QIZLSGBW/7-currentlyinsured.jpeg Fixing a frontline problem with a mobile These high-fidelity desktop designs show the quote flow from the starting screen to the first recap page (from the first spoke to the first hub). https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/1638649978691-2WR6JZQXIS5EJJXKWIU2/8-gender.jpeg Fixing a frontline problem with a mobile These high-fidelity desktop designs show the quote flow from the starting screen to the first recap page (from the first spoke to the first hub). https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/1638649978722-ECGYZF6ZQ3L5ROHD89T0/9-marital%2Bstatus.jpeg Fixing a frontline problem with a mobile These high-fidelity desktop designs show the quote flow from the starting screen to the first recap page (from the first spoke to the first hub). https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/1638649978734-XJWRVF9342OLAIVRFGZ7/10-no_accidents.jpeg Fixing a frontline problem with a mobile These high-fidelity desktop designs show the quote flow from the starting screen to the first recap page (from the first spoke to the first hub). https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/1638649978703-MIV5X2IFWAJ8AW5UPR59/11-driving%2Bviolations.jpeg Fixing a frontline problem with a mobile These high-fidelity desktop designs show the quote flow from the starting screen to the first recap page (from the first spoke to the first hub). https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/1638649978778-17TF5ITZC5SND3E75TZT/drivers%2Brecap-2driver.png Fixing a frontline problem with a mobile These high-fidelity desktop designs show the quote flow from the starting screen to the first recap page (from the first spoke to the first hub). https://www.mariahaynie.com/home daily 1.0 2024-12-02 https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/4ce23791-586e-4b3e-84ad-bd669eb2a20c/Upload+lInks Home - Improved UX yielded a 30% boost with at-risk clients. Read the case study https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/b433971e-b9e7-44b8-b083-9242d6727c22/Cover+image+for+automation.png Home - Automation at scale enabled enterprise certificate discovery and management. Read the case study https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/1638650007451-6K0K6UE7RUZ0LVVBS99Q/IMG_2834.jpg Home - Led the design of a new internal tool projected to save $3 million annually. Read the case study https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/854c013b-2fc0-45ee-8895-bfbe549e2c06/Skiplink.png Home - Drove accessibility initiatives to improve the product experience and design process. Read about the initiative https://www.mariahaynie.com/about daily 0.75 2025-09-30 https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/7551769a-89f1-4cff-abe8-0d5872c6836e/7X8A7690-Enhanced-NR.jpg About - How do you solve a problem with Maria? https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/57841207-51a4-445a-af06-c46608478f36/IMG_7825.JPG About - Making complexity easier to manage. I was recently playing a card game with my siblings and the question came up: “Who would be the one to plan a prison escape?” I was the unanimous choice. I find it rewarding to turn big, thorny problems into clever and intuitive solutions, though I haven’t tried to break any one out (yet). https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/1054194c-e429-4f21-b037-5ba748893c6a/IMG_8916+%281%29.JPG About - Racing I’m a lifelong swimmer and recently picked up running and cycling, wanting to get healthier. I compete in sprint triathlons, road races, and trail run races (5k, 10k, and half marathon distances). I’m currently training for open water endurance swims next season. https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/1638649992119-OT95W5K48KWPB0DLA3JB/LTUXPanel.jpg About - Learning and speaking about UX as a craft and career. Always open to discuss new collaboration opportunities! Since 2020, I’ve been volunteering my time as a co-lead of my local Ladies That UX chapter in SLC. I enjoy being a part of the local design community, planning and hosting events, mentoring UXers, and connecting with others in this space. Connect with me on LinkedIn. https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/22308746-23c3-4c54-a151-c8a6536ad1cf/UX-Certified-NNg.png https://www.mariahaynie.com/internalwebapp daily 0.75 2024-12-04 https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/4aa57daa-22c2-4e0b-b389-449ddc80abbe/BEFORE+AND+AFTER.png Powering internal teams at DigiCert with a sleek new web app https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/395f7303-2310-4c60-b0ad-ece15f4884e9/People+and+business+needs+whiteboard.jpg Powering internal teams at DigiCert with a sleek new web app - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/7aa55966-6fb5-4f67-9fb5-d44cb0c5192c/plugintoRCM.gif Powering internal teams at DigiCert with a sleek new web app - Make it stand out GIF of an agent using the plug-in to capture an image from a source, upload it into the new system and apply the image to a pending validation requirement by highlighting and right-clicking on the data on the image. https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/9f37477d-5df1-4207-9535-ed05f275e608/BnbandRCMv1.gif Powering internal teams at DigiCert with a sleek new web app - Make it stand out Initial prototype whipped up in 24 hours for testing in the design sprint, this scrappy prototype was refined enough to test the big ideas of browser-in-browser and right-click magic. https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/3b943d79-0c97-4e93-a529-59a805dc2483/v2BnBRCM.gif Powering internal teams at DigiCert with a sleek new web app - Make it stand out The next major version of the design refined the visuals and included a mark-up mode so a user would be able to move from navigating in browser-in-browser mode and start applying a document to verification tasks. This didn’t test well, and we were able to eventually eliminate the need for formally entering mark-up mode before being able to highlight. https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/df45856c-ea41-4fac-990c-dff8bd1a38a2/MatrixofTiles.png Powering internal teams at DigiCert with a sleek new web app - Make it stand out A sample of the matrix I created of categories and the states within them. This was an early version, and I refined these based on usability testing and feedback. For example, in the final version, no information is conveyed by color alone for improved accessibility. https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/82800cf1-7a9d-426e-8b74-812541208218/escalation.gif Powering internal teams at DigiCert with a sleek new web app - Make it stand out Example of the escalate feature being activated from a validation requirement. https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/54d3207f-8fb5-495b-a945-e396abbf240a/Format+suggestion+found+modal.png Powering internal teams at DigiCert with a sleek new web app - Make it stand out An example of a modal that I designed to offer a time-saving option to an agent for validating addresses. Agents preferred to see details, so I created a side-by-side view with colors, underline, and icons to highlight the impacted address details quickly without overwhelming the modal. https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/b5237393-0c30-46b0-84c1-6bfcfeeca198/Before-savephoto.png Powering internal teams at DigiCert with a sleek new web app - Make it stand out BEFORE: In these screenshots from the old systems, agents had to open an order, click on pending tasks, go to a new tab to an approved source, save a screenshot of the source, upload the screenshot, and then apply the upload to a pending validation requirement. https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/b7dbda4a-0a00-4bd6-a574-b39485541ae4/Gowkermap.png Powering internal teams at DigiCert with a sleek new web app - Make it stand out User flow identifying when to appropriately introduce a variety of possible API results to an agent https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/e4c0d169-d552-4db6-920e-9d8e536ad4e1/MVP+Plugin+states.jpg Powering internal teams at DigiCert with a sleek new web app - Make it stand out Designs and interaction notes for various states of the plug-in https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/3e8f87ec-b0df-4190-bee4-c94f18b1707b/Error+modals.png Powering internal teams at DigiCert with a sleek new web app - Make it stand out Agents could accept the API’s results, or apply their own judgment to override suggestions through an escalate feature that pushed an order up to a manager for review. https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/762c56f0-4162-457d-850a-a318ea15a0cf/2022-02-18_00-29-22.jpg Powering internal teams at DigiCert with a sleek new web app - Make it stand out Screenshot from a remote usability test with a European agent evaluating the address modals to make sure the address formatting worked in different geographies. https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/cb94b679-0742-40c8-a6de-f0484aeafee5/FeedbackSlack.png Powering internal teams at DigiCert with a sleek new web app - Make it stand out Positive feedback from agents as parts of the system were released. https://www.mariahaynie.com/creating-a-parent-experience-for-zott daily 0.75 2021-12-08 https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/1638650003971-64VKWLATN8M886MQSNHM/parent_identitymodel.jpeg Creating a parent experience for ZOTT The identity models and design implications I created after interviewing parents of hospitalized children and teens. https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/1638650003975-SGEGUN0D3V1EHMZ60VFH/userflow.jpeg Creating a parent experience for ZOTT Early onboarding user flow and parent features https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/1638650003979-S5GF83E9NN55YZXCY7O6/KeyTakeaway.jpeg Creating a parent experience for ZOTT One of our key takeaways from the second usability test showed how cost-wary parents of hospitalized children were regarding any type of non-essential service offered them in the hospital setting. https://www.mariahaynie.com/accessibility-initiative daily 0.75 2024-12-04 https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/36c6cee6-fa25-4318-a220-c253a634abd6/formfieldupdates.jpg Accessibility initiative - Make it stand out Example of redesigned form field components to address default, focus, and error states on white and gray background colors. https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/854c013b-2fc0-45ee-8895-bfbe549e2c06/Skiplink.png Accessibility initiative - Make it stand out I looked at the skip link pattern from a variety of other websites, identified a clear universal pattern, and translated that to CertCentral’s styles. This link appears when a keyboard user starts to tab into a page. https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/324f7ea7-7887-4ca3-81fe-ee63dde8a546/Final+link+proposal.png Accessibility initiative - Make it stand out The final link proposal avoids introducing new colors, meets the 3:1 contrast requirements with both of the main non-link text font colors and on the products’ white, gray, and dark backgrounds. https://www.mariahaynie.com/contact daily 0.75 2024-12-02 https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/05762e2e-9213-432e-95d3-e8050e9c81eb/IMG_5771.jpg Contact I appreciate hills, but unfortunately, do not sing in them. Outside of work, you can often find me trail-running, swimming, watching movies and soccer games, or crafting pizza from scratch for my family. https://www.mariahaynie.com/perfecting-a-microanimation daily 0.75 2021-12-08 https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/0d4a71b3-a3d5-4290-aba7-b64943aeeddc/ratereveal.png Perfecting a microanimation - Make it stand out Desktop design of the insurance score in context on the rate reveal page. https://www.mariahaynie.com/automation daily 0.75 2022-08-31 https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/9e9140a6-8ab6-449e-8bc8-f45fd1ed43d4/ManageAgentTable.jpg Automation - Make it stand out The starting point for deploying agents onto user’s servers to scan for existing certificates and import those certificates into the platform, DigiCertONE, for automated management. https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/807ba50b-6db1-419f-80a4-8392f71f8aaa/Customized+table+v1.png Automation - Make it stand out An early version of the table for users to add server details in bulk instead of uploading a spreadsheet (customers had security concerns). https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/6165ef9f-9263-43ad-984e-c26c26f179b5/Dashboard.png Automation - Make it stand out I introduced a “Web Servers” dashboard widget and an alert for communicating deployment errors at medium and high levels of detail. https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/5840c5da-3e1b-4654-b8c5-0acd4aa4fc3e/Agent+deployment+erros+open.jpg Automation - Make it stand out Agent deployment issues page with error categories open https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/1c4a4a8f-c636-46ba-a439-d56772e7e2a0/BulkDeployFlow.jpg Automation - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/ead187b7-7023-4c4d-a84d-9dabc6658bc9/Enhanced+table+v2.png Automation - Make it stand out As the project progressed, I ran into limitations with the table and designed enhancements like a sticky column option for easier scanning. This image shows an example of the annotations I created alongside visuals for engineers. https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/23b710c0-3b1b-4a70-bb6a-dbd7d4fd5291/Agent+deployment+issues+page.png Automation - Make it stand out Close-up system feedback on the agent deployment issues page, with errors organized into categories for easy triaging https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/40a10611-662b-44e0-b4c5-20424bac085e/Pre-deployment+errors.png Automation - Make it stand out Pre-deployment issue management: When a user tried to submit the table, the table would be checked for errors and they would presented with any rows that had issues. They could resolve the issues or deploy with issues from this screen. https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/488e7cc8-229a-410d-aa7a-d0ceafe34578/Managing+groups.png Automation - Make it stand out Example of designs showing how to manage groups from the agents table https://www.mariahaynie.com/uploadlinks daily 0.75 2024-12-04 https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/9ab8ff51-051c-4900-bc38-0243fc6c0684/Before.png Upload Links at Revver - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/c74f6a6b-6cf0-46b3-87e6-6339f450952f/Frame+2608627+%281%29.png Upload Links at Revver - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/b93fac5a-e259-4a7a-b964-babfd77a56dd/Upload+LInk+Gif.gif Upload Links at Revver - Make it stand out Creating an Upload Link generates a link that users can easily pass on to their clients to securely upload files into Revver. Before, creating a link like this with an automation to be notified if any files were uploaded, took a total of 37 clicks, 4 page loads, and 5 input fields. The new feature only requires 4 clicks, 2 modal loads, and one optional input field. https://images.squarespace-cdn.com/content/v1/61abd07a17615c14fa0dc09c/d301c5de-bee2-444a-a299-9cd7d393ce39/Frame+2608628+%282%29.png Upload Links at Revver - Make it stand out Whatever it is, the way you tell your story online can make all the difference.