I used a CSS flexbox layout to build a prototype of a fully responsive new module in Sitecore, GoDaddy's CMS.
We can use this new module on any GoDaddy page to help visitors easily compare two GoDaddy products on any device.
HTML, CSS, responsive web design, prototyping, front-end development, troubleshooting, quality assurance
Step 1: Build the Prototype
After my UX designer and copywriter provided me with a mockup of the new prototype they wanted to test on GoDaddy's Website Builder page, I used GoDaddy's flexbox prototyping tool to build the prototype in Sitecore. Because I was only given a mockup for the Desktop breakpoint, I used my design skills to determine the specs for the other breakpoints myself.
Step 2: Conduct Qualitative User Testing
After I finished building and testing the prototype on all breakpoints, I duplicated GoDaddy's Website Builder page layout onto a no-index, no-follow page, added our prototype onto the layout, and published the page. Next, my UX designer set up a test in UserTesting.com to get user feedback on the updated page layout and the prototype. Here are the two key highlights from the user videos:
Step 3: Turn the Prototype into a Module
Once we confirmed that our users found my prototype valuable, I worked with our developers to turn it into a fully scalable, user-friendly Sitecore module. This step enables anyone on my team to use this module on any GoDaddy.com page in all 56 markets, and with any copy and icons they desire.
This new module is currently still being built, but it should be completed soon. I will update this page when the final product is available!