My role in the project
- UX Research
- Creating personas
- Creating Information Architecture
- Creating Wireframes
- Creating Mockups
- Creating Hi-fi protoype
Leah at Boho and Bloom Prop Hire wanted a fresh new look to her website to help improve conversions, make props easier to find on her website and to show more details to avoid duplication in email enquires.
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.
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. We could cater for 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 potentially losing out on customers progressing through to conversion.
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.
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 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.
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.