My role in the project
UX Research
UI Design
Creating personas
Creating Information Architecture
Creating Wireframes
Creating Mockups
Creating Hi-fi protoype
Project Objectives
UI uplift inline with updated branding
Improve conversions to prop hire
Allow customers to view prop details
Previous Pain Points
Users asking the same questions regarding prop hire via email, resulting in duplication of time responding via emails.
Customers are looking for packages but cannot find these on the website, resulting in high bounce rate.
Persona Creation
When working with Leah, it was important to highlight how personas can impact the user journey, for one user group they may want to directly view different information compared to another user group.
I worked with Leah on identifying her target audience and then identifying user groups and developing these into different personas.
This had a huge impact leading into the wireframe stage as we were able to cater for multiple personas in the collections list part of her website.
I could adjust the user journey to allow users who wanted to view packages but also those who wanted individual props. Previously the website design did not allow for both cases and Boho and Bloom was impacting conversion rates.
Information Architecture
Once I had created Leah's user personas, I then created a draft information architecture for her website. This was a critical part before moving into wireframes as it sets the hierarchy of how the user will navigate through pages and find information.
I highlighted to Leah the importance of the collections page being placed in the primary level in the navigation. We had different personas and user groups, ultimately the goal of the website is to improve conversions for prop hire. Locating the collections tab in the primary navigation allows users the opportunity to navigate quickly and either explore packages suited by event or by individual props.
Previously this was hidden away and the user was not able to view collections by packages at all, however Leah said it's a great service for clients that have a set budget and type of event such as a baby shower.
Conventionally I would have recommended that terms and conditions and FAQs to sit in the footer of the website, however Leah mentioned in her line of business this is highly requested bit of information around hire and location questions. With this in mind we made a decision to place this in the secondary dropdown for users to find but also not to clutter the primary navigation. We will then test out this change and iterate where required.
Branding
I created a stylesheet of Boho and Bloom's branding, pulling out key colours from their Instagram account, current website and logo typography.
By creating the stylesheet ahead of hi-fidelity mockups it allowed me to create the initial components such as the header and the footer and then add in the powerful imagery Leah captures in her photos.
Wireframes
When creating wireframes, I used lots of placeholder for images, Leah's branding and art direction is so strong I wanted to draw the user's attention to the styling of the prop hire with text supporting the products available as secondary information.
I built a number of iterations of the wireframes so that I could ideate and explore the different layout options to allow customers to view packages and individuals props if required. This would allow for both personas we created to get what they needed from the website without cluttering the structure of the webpages.
Low-Fidelity Prototype
I put together a low-fidelity prototype so I could get quick feedback from Leah on how the user journey felt to her for the way she structures her prop packages. By spending time on low-fidelity prototype and get feedback will allow me to do any re-structures to the user journey before spending additional time when in the design process with more detailed hi-fi designs.
Hi-Fidelity Mockups
Below are the final hi-fidelity mockups which I showcased back to Leah which she absolutely LOVED! I took her on a journey through the designs, walking through why I designed certain components such as the 'Our Services' now appealing to more than one persona right from the homepage to the 'Featured On' section to build trust with her new potential customers.
High Fidelity Prototype
When I presented back to Leah I had created a prototype in Adobe XD to give Leah the final look and feel of her website. I am working with Leah's development team to bring this website to life and support her ongoing website design :)
You can access the Adobe XD prototype here.
