Responsive website redesign
My Wedding in Los Cabos
- 2017 - 2018
Role:
User Experience Designer, Web Designer
Overview
01 Initial statement
My Wedding in Los Cabos is a photography and videography company in Los Cabos, Mexico. They needed to expand their offerings outside the only hotel they work at. Most of their customers lived in the United States and Canada, so their website was the most important channel to showcase their work and get new clients. They were not getting any leads online.
02 Team
I worked with the 3 main stakeholders at the company, the owner who made the final decision, the administrator who helped with all the material needed, and finally but not least, their social media manager. She was a big help in understanding the companies business goals.
03 Constraints
The stakeholders were very involved in the design process and wanted to participate in a lot of decisions. It was really hard to please all of them, without losing focus on the business goals, user goals, and best practices. The owner was not very convinced about the benefits of UX.
I was not able to travel from Guadalajara to Los Cabos, so the entire process had to be remote. It had its pros and cons, but it definitely made the communication slower.
The company didn't meet in person with their customers until a couple of days before their wedding, and by that time, they were usually very stressed out. Having face-to-face time with our users was complicated, so I suggested that we added a few questions in the survey they completed when signing their contract.
Research insights
01 Website analytics
- 285 monthly sessions.
- 207 monthly users.
- 3.9 pages per session.
- 42.11% bounce rate.
- Poor site performance.
- 04:03 minutes average duration.
- The homepage was the most visited page.
- Zero conversion rate.
02 Content audit (current website)
- The homepage lacked compelling information.
- Broken links in the entire website.
- No call-to-action encouraging customers to contact.
- Pixelated images.
- Lacked meta tags to improve SEO.
- The company didn´t know where messages from the contact form were been sent to.
- Average of 10 to 20 unanswered live chat requests.
03 Competitor analysis
- Client reviews.
- Attractive visual content.
- Detailed information about their services.
- Encourage users to contact them.
- Strong SEO strategies
- Logos from other authority websites.
- About section to make it more personal.
- Galleries from past clients.
- Instagram as their strongest social media.
- Clean and minimal design.
04 Contextual interviews
What were you looking for when searching online for a wedding photographer and videographer?
- Make sure the company really exists.
- Testimonials from previous clients.
- View past work.
- Be able to contact them quickly.
- Learn about their services.
- View detailed pricing.
How did you find us?
Hotel referral.
Did they navigate to our website previous to hiring the company? If so, did you find useful information?
Yes and no, most clients had to call the office several times.
What problem was I trying to solve?
Convey trust to foreign clients and encourage them to request more information about the services.
Possible solution
Design a clean, detailed and personal experience to alleviate most client's concerns when navigating through the website.
User goals and specific solutions
- Verify past client reviews: add Facebook and Google reviews that can´t be removed by the company.
- View galleries from past weddings: show galleries as "love stories" told by the client´s very own words.
- Understand pricing and services in an easy way: group information together and dismiss what is not relevant.
- Be able to contact the company quickly: integrate a live chat and a Contact page.
- Know the team behind the scenes: display all team members with their picture and a short description.
- Plan their trip to the destination: add a section with detailed information about Los Cabos, such as weather and places to go.
- Verify the integrity of the company: register in authority websites related to destination weddings.
Design process
01 Understanding our users
Our main users were women, but without excluding men, searching online for a wedding photographer and videographer for their special day. They can quickly compare multiple providers, so after visiting multiple websites, the information starts to become overwhelming and the decision gets more complicated. They have a budget defined, so viewing the information about their services and pricing is essential to them.
02 User scenarios
The initial scenario helped define the new SEO strategy, so I proposed link building with other wedding providers in exchange for images so they could also showcase their work. I also defined where some features could be included, such as Facebook and Google reviews, quick contact links, among others. Another important element was to define the length of their current pricing design, it was very long and complicated, so I decided to compress the information as much as possible and arrange it comprehensively.
03 Flowchart
I found this flowchart very helpful to understand which screens had to be designed, and how they interact with each other. There was a lot of internal linking to promote the navigation within the website, and some useful external links from authority websites using a target"_blank" action to keep users in our website.
04 Paper first and navigation
At this stage, I started to place all my ideas into something more visual to prioritize the most relevant content for our users. Because of the nature of the company, I had to play around a lot with the use of high-quality portfolio images and videos. I also used these sketches to align the screens to my flowchart's proposed interactions.
Click on image to enlarge.
05 Wireframes
With these medium-fidelity wireframes, I started defining the look of the website, I wanted to convey minimalism through the use of whitespace and spacing between elements. I also started defining the typographies that could match well together. I used a grid of 2 and 3 columns in most cases but designed a 4 column grid for certain screens.
06 User flow
After designing navigation using the rough sketches, I realized that there were a lot of call-to-action buttons and links missing to align with the flowchart's navigation. I also decided that not all Request a free quote button would take to the Contact Us page. For example, when viewing the portfolio, a pop-up shows up with a form, so users don't have to leave the section and keep them entertained with more past weddings.
Click on image to enlarge.
Click on image to enlarge.
07 Information architecture on Homepage when scrolling
Click on image to enlarge.
- Navigation header on top with social media icons to promote engagement.
- A hero image, so that the work showcases from the start.
- Call-to-action button to learn more about their packages and pricing.
- Three of the most important wedding provider websites are shown to generate credibility.
- The main services are displayed with actions to view their portfolio.
- To build trust, a photo and a description of the very own founder is shown with a link to meet the entire team.
Click on image to enlarge.
Click on image to enlarge.
- Call to action to encourage users to contact the company.
- As part of the trust-building, real testimonials are shown with a link to view even more.
- Almost at the end of the homepage, the 3 latest weddings are shown, encouraging users to view the portfolio one more time before leaving the website.
- Part of the new marketing strategy was to build a client base to send monthly newsletters. A signup form was connected to MailChimp.
Click on image to enlarge.
Click on image to enlarge.
- The latest Instagram posts are shown to promote client engagement on social media.
- Quick links that allow the user to keep navigate through the website or contact them directly by phone or email.
- Navigation header on top with social media icons to promote engagement.
- A hero image, so that the work showcases from the start.
- Call-to-action button to learn more about their packages and pricing.
- Three of the most important wedding provider websites are shown to generate credibility.
- The main services are displayed with actions to view their portfolio.
- To build trust, a photo and a description of the very own founder is shown with a link to meet the entire team.
- Call to action to encourage users to contact the company.
- As part of the trust-building, real testimonials are shown with a link to view even more.
- Almost at the end of the homepage, the 3 latest weddings are shown, encouraging users to view the portfolio one more time before leaving the website.
- Part of the new marketing strategy was to build a client base to send monthly newsletters. A signup form was connected to MailChimp.
- The latest Instagram posts are shown to promote client engagement on social media.
- Quick links that allow the user to keep navigate through the website or contact them directly by phone or email.
Final product
Click on images to enlarge.
Conclusion
01 How I measured success
These were the results we had 4 months after we updated the website and implemented the SEO strategy, along with the company's social media manager's marketing strategies.
- 683 monthly sessions. (Increased by 223%)
- 385 monthly users. (Increased by 85%)
- 4.08 pages per session. (Increased by 4.6%)
- 39.50% bounce rate. (Reduced by 6.2%)
- 04:08 minutes average duration. (Increased by 6 seconds)
- 30 live chat and 20 contact form request. (Contact conversion rate of 12.72%)
- The company sold $8,000 USD from leads that came through their website.
- After 4 months, the company ranked 1st on most organic searches.
02 Learnings
It is very important to define who the main point of contact will be, right from the beginning. This person should be responsible for expressing the other stakeholder's ideas and opinions. If that is not done properly, there can be a lot of misunderstandings and you end up working double.
I learned that although selling UX may be challenging because the initial process is not something tangible, if you are able to communicate its benefits properly and show results, you will end up with very happy customers that will recommend you.
Living in different regions makes the process more complex, but the most important thing is clarity and good communication. Sometimes a quick zoom call can be much more productive than the traditional emails.
I also learned that implementing an SEO strategy from the beginning plays a huge part in the information architecture and flow of any website.
03 In retrospective
I would have designed a system in which we could receive more and better feedback from users so we could keep making improvements. In the end, that's what UX is all about, iteration.