WeddingDates Client Area
WeddingDates is a web platform that makes life easier for wedding venue managers and engaged couples. In November 2016, I partnered with WeddingDates to take the client area of their expanding product to the next level.
The Client
Founded in 2008 by award-winning entrepreneur Ciara Crossan, WeddingDates is an online platform for wedding venues and suppliers to manage enquiries, availability and promote their business to a captive target audience.
The Brief
WeddingDates has grown significantly since first launching and the UI is experiencing growing pains. Re-imagine the platform to better accommodate current and future features while prioritising customer needs.
The Result
After an intense few months of design and development, the major new responsive iteration of the WeddingDates client area is rolled out to customers in March 2017.
Great for couples, great for venues
WeddingDates is a smart, powerful online platform with great customer experience at its core. There are two distinct sides to the platform; the public-facing websites and the client area application that supplies listings to these websites.
The public-facing websites WeddingDates.ie and WeddingDates.co.uk list the hundreds of venues across Ireland and the UK using the WeddingDates client area. Not only does this save couples time and effort by centralising the search effort, but showing the venue's availability on each listing helps them quickly make decisions around preferred dates and venues without having to contact or visit each individual venue.
On the flip-side, this drives better quality leads to venues and suppliers. The client area also allows the venue or supplier to manage the entire sales pipeline in a centralised place where they can collaborate with colleagues and leave the Excel tracker behind. Sales reporting, a birds-eye view of availability and benchmarking against competitors gives WeddingDates users a significant edge for running their business.
The WeddingDates eco-system and customer base has grown significantly since first launching in 2008. In this time, features have been added and iterated upon while customer needs evolved. The behaviour and expectations of both sets of stakeholders have also changed dramatically and so WeddingDates embarked upon a system-wide overhaul in 2017.
Once new iterations of the public-facing websites launched, WeddingDates shifted focus to the client area. In November 2017, I partnered with WeddingDates to begin a customer-centric re-design of the client area, with a specific emphasis on research and prototyping. I spent the first week of the project on-site with the WeddingDates team in Cork, working remotely from Dublin for the remainder of the project.
There's always time for research
The project had a tight timeline which made the research phase even more critical to the project's success. We had to assess the customer and business while taking the product roadmap into consideration. We also needed to evaluate a significant criterion of the project brief – design a mobile-first, responsive interface for the new client area.
Research consisted of:
- Phone interviews with a cross-section of customers in Ireland and the UK
- Face-to-face interviews with WeddingDates team members including onboarding, sales and support staff
- Customer surveys (one for venues, one for suppliers)
- Review and evaluation of the current product interface including scenario-based walkthroughs and behavioural analysis
While it was short and intense, it was also a highly productive phase that laid foundations we felt confident in while allowing various stakeholders feel involved and invested in the project. Once we had discussed the outcomes of the research report, I used the Jobs To Be Done (JTBD) framework to begin grouping and prioritising features and changes with the team.
Key recommendations that emerged included:
- Overall, a more action-oriented experience particularly on the dashboard
- Improved labelling and guidance throughout the interface
- Increased efficiency of frequent tasks and workflows
- Incentivising particular feature usage that result in improved experiences for both the client area customer and their prospective customers on weddingdates.ie/.co.uk
Maintaining focus
With priorities identified, I moved on to wireframing the new interface. Research indicated sufficient demand and use cases from customers for a responsive client area so each layout and element was considered from a mobile-first design approach. Low-fidelity wireframes allowed us to iterate quickly and focus on making decisions and solving problems without getting hung up on typography and colour choices. Considering any individual screen had three layouts for review (small screen, mid-sized screen & large screen), maintaining focus at this stage was important.
Wireframes of the new WeddingDates enquiry dashboard
Device mirroring in Sketch and prototyping experiences on Invision allowed us to better evaluate each iteration and reach consensus quickly. Getting sign-off on features and workflows in this phase also allowed the in-house developer to start working on any new API endpoints required for the new interface keeping us on track for our delivery date.
Look & feel
Once a complete set of wireframes were ready to go, I moved on to developing a look and feel for the product. The previous palette drew heavily from the branding which created challenges for communicating priority and directing attention in the UI.
Mindful that customers would be adjusting to a lot of change already, I also wanted to ensure the aesthetic differentiated from competitors but moved towards a more modern, sophisticated feel. As there is quite a lot of text in areas of the app, I gave special attention to typography using some of the most repeated UI elements get a sense of what the type would look like in context.
Gibson
Mr Eaves XL
Freight Sans
Managing change
Concurrently, I developed a number of palettes based on the bespoke icon set comissioned previously for WeddingDates. I wanted to carry the set through for continuity but also to add a little personality and to act as visual cues in the interface.
I did not create a full set of mockups during this phase not just because of the tight schedule but because such efforts often lead to unrealistic notions of pixel-perfection, wasting time and energy. Taking the approach of designing a system rather than a set of artefacts is far more effective when designing an application, particularly one that is to be used on a myriad of screen sizes and devices.
Applying palettes to the tiles used to make decisions around typography allowed us to narrow in a direction for the app's look and feel quickly.
Bespoke icon set
Experimenting with colour palettes
Final colour palette
Final iterations
Selecting four core screens of the product that contained complex and commonly-used UI elements, I worked out the finer details of the interface using the chosen colour palette and typography.
The final iterations of the interface
Implementing the system
As this was the developer's first large-scale responsive application, I kick-started the front-end development of the new app by getting the core pattern library in place and building a handful of layouts to demonstrate how the pattern library and its elements worked.
Continuining the design process in the browser is sometimes used as a means of expediting a project but in the context of a responsive web application, it was a practical necessity. The only way to see how your layouts and various elements within behave and work together in a fluid environment is to get it into a browser and on to devices.
This also afforded me the opportunity to design some of the more nuanced aspects of the experience such as the animation of the main menu, hover states for buttons and so on.
In the digital realm in particular, no product is ever "done". Tools like pattern libraries and a more systems-based approach to design allows for flexibility, growth and change over time as needs and expectations change. Flexible, modular systems also provide the opportunity to experiment and test new ideas at a lower cost, particularly in contexts where design resources are limited.
Elements from the component library
“When we wanted to redesign our software for hotels and wedding vendors to make it mobile responsive, I knew that user experience was key. We provide a vast amount of information to our clients and in our old system alot of it was buried, difficult to find and rather clunky.
For the duration of the project Steph became 100% part of the WeddingDates team. We are based in Cork and she spent a week in our offices immersing herself in our culture, talking to each member of the team on their role and how the system impacts them as well as surveying and interviewing our customers. She has an amazing ability to quickly understand all the players and how they connect and the key drivers for them. She collated all the ideas as well as my brief into a system that is something I am truly proud of.
Steph kept to the tight timeframe and though she worked remotely we communicated well with weekly Skype meetings and sharing visuals on inVision. Steph has a great can-do attitude and is a fantastic collaborator. We had lots of fun on this project and we will always consider Steph an ‘honourary’ WeddingDates team member!”
— Ciara Crossan, Founder & CEO of WeddingDates
More than just "great UX"
Working with Ciara, Chris and the entire WeddingDates team was a wonderful experience. They were all in on the project, open to ideas, fantastic collaborators and communicators. Throughout the customer interviews and survey responses, the enthusiasm and love that customers have for WeddingDates was abundant. Spend even a day with the team and you'll see why – positive experiences and happy customers are at the core of what they do.
I can't wait to see what 2017 brings for Ciara and the team; I have a feeling it's going to be a big year!
If you want to find out more about how WeddingDates works, check out the website, sign up for a plan or get in touch with the team. Also check out the WeddingDates Toolkit site for tips, trends, demos and where you can next catch Ciara speaking.
Iterations of the "header area" of the UI