A mock-up, or dummy site built for Moltin. The styling and code I created was implemented into a React boiler plate, which was built to help give users a better idea of what the Moltin API can do, and even base their online store off. In fact, one customer did end up basing their store on this, which has since been replaced by a more bespoke site.
The designs provided for me to work from were made for desktop, but the requirement was to build a responsive and accessible site. Therefore, I went to work and built a this dummy site, making decisions regarding how it would look in smaller viewports, and make the site accessible. This meant adding of additional context to make the site better to use for those using screen readers and other assertive technology. Of course, while I was given more or less free reigns, I also made sure to get the input from our designer.
One of the things which will make an online shopping experience good is making sure the checkout system works well. As this part of the process gathers a lot of information in the shape of form. We opted to ensure the form got filled in through smaller steps, which in part was dictated by the information which needed to be gathered for the Moltin API and payment gateways. Of course we also spent extra attention to the form states, ensuring it is clear which form element has focus, and highlighting missing or faulty content being entered into the form. From this image it may look like we’re only using placeholder text as labels for each form field, however, the form uses labels fully accessible to screen readers.