Nala’s Baby
Nala’s Baby is an Ecommerce website that sells a range of natural skin and hair products for babies.
Project Brief
The client requested that a new re-design of their existing online presence be created. They requested that the new site incorporate more of the existing branding and imagery while allowing for a quick and easy user journey. The original site was created to help them get the store up and running, and now that they had a successful business they felt that it was time for a new design. They had a small budget and a basic Shopify theme to use.
UX / UI Review on old site
Shopify Theme design customisation
Sourcing suitable images
Icon creation
The Process
The process involved with this particular project was very simple as the only requirements where to create new page designs based on the existing website after I had performed a UX UI review. The standard iterative design loop was used, where I would create the designs and submit to the client for amends and then I would action any changes received. The format used to gather feedback was a mix of online face to face design meeting or comments added to the working Figma document. To ensure design creep was not a factor there was a hard launch date to meet. In addition, the signed off designs would then be handed off to the developer whom I would closely collaborate with to ensure that what was built matched the signed off designs.
The Old Site
The site that was to be replaced was limited to 4 pages and didn’t encourage exploration and wasn’t promoting the clients brand sufficiently. In addition, a mobile optimised version was not working as intended, with hero images having the text embedded into them and no mobile friendly image alternatives to use when viewed on tablet or mobile.
Working within an existing theme
A Shopify theme had already be chosen by the client and I had to base designs within the constraints of what this theme allowed. Working this way has specific challenges as creativity has to be tempered so that the budget is adhered too. Some degree of customisation would be required though so I could do the Nala’s Baby brand justice, but a fine balance had to be met to ensure that the project did not become a full bespoke build, which was not budgeted for.
During every design review meeting it was imperative that any requests made by the client were carefully considered before they were signed off. It was entirely possible for me to add any number of changes to the design as requested, but I had to consider what some changes would mean for the development team in terms of additional functionality, or how design changes could be implemented, and if this would be possible within the time and budget set aside for this project. As I have knowledge of HTML & CSS, plus experience of working to pre-existing template themes I could give honest and informed opinions during the meetings. For more complex requests by the client, I would have discussions with the development team to find a suitable solution to the request or test it’s viability.
Figma: New Design
Design concepts were created using Figma. Wire frames were not required enabling the creation of high fidelity designs from the offset. The working Figma document was shared online and used during live video calls with the clients during design review meetings. Amends and changes were discussed during the meeting so the clients could see the effects of any changes / revisions they would like to see. In addition the Figma document was available online for the clients to review at all times and allowed them to post comments on the document. I was notified directly through Slack and via emails when the clients posted any comments, so I could act swiftly to make changes.
As a result of the UX research and site redesign, the clients saw an instant increase in purchases of artwork and conversion rates and a decrease in bounce rates. In addition the smoother user experience and addition of a frame builder has ensured that users can now purchase from a range of framing options which has increased the AOV. As a result client was very happy with the final product.
