Website Redesign & Brand Refresh
Challenge
The Luxe Affair Co., formerly Amanda's Errands & Events, was looking to revamp their website to better represent their recent brand refresh. They plan events ranging from weddings, to birthday parties, and more. The project would have a budget of fifteen hours and a website launch date within one month.
Objectives
Design and develop a fully responsive website
Increase CTR through Conversion-Centered Design
Design a website that reflects brand refresh
Project Scope
Website Redesign & Brand Refresh
Tools
Figma, Photoshop, Illustrator, HTML5, CSS3, Squarespace
Role
UI/UX Designer (Freelance)
Duration
2-3 Weeks (15 hours)
Initial Research
Competitive Analysis
To get a better understanding of who the client's competition is, I searched for other planners via TheKnot as I knew that The Luxe Affair had been featured on their website. I sorted the competitors by ratings and chose three of the highest rated businesses.
Strengths:
Display of images & content
Clean sections and blocks
Thin containers for copy
Weaknesses:
Cluttered layout for packages
Navigation bar too short
Body font too small
Strengths:
Display work via couples
Luxury style interface
Clear display of services
Weaknesses:
Unlegible testimonials section
Unclear CTAs/user journeys
Lacks interaction design
Strengths:
Prominent buttons
Choice of fields in form
Simple website structure
Weaknesses:
Images too large
Wide containers for copy
Packages lack click-through
What They Did Well
The structure of the websites above ranged from simple to complex. The simple structure for Your Day Your Way made it easy to identify and process information. The navigation (while difficult to read because of the hero image) was also clear, and the use of a CTA button in the header is an element of conversion-focused web design.
Points of Opportunity
The biggest points of opportunity lay in interaction design. The competitor websites lack active and hover states or lack in visual design. Some pages that are copy heavy lack balance and would benefit from additional visual elements such as images or graphics. The service packages lack visual hierarchy and are difficult for end users to digest. Lastly, a lot of pages do not flow, as sections within each page lack unity.
What to Look For
When choosing a platform that best fit the needs of my client and end users, I had to take a few things into consideration. I wanted to the client to able to navigate the backend with little friction, but I needed a platform that would allow me to inject custom code into the website. The spreadsheet below represents the research I conducted to determine which platform to build and host the website on.
Client Budget
While the client's budget did not put any constraints on choosing a platform, it is my job to make sure that what they pay for in a platform meets the needs of their business and customers. They would need the proper amount of features, support, customization, and the new website should be able grow with their business.
Project Timeline
The hours budgetted for the project were rather low, so I needed a platform that help make the development and content upload phases be efficient. I am proficient in all the platforms I conducted research on, but each one varies in the amount of work required before launching.
Target Audience
The end user must always be taken into account when making decisions like these. I had to ask myself if I have the tools to craft a website that my client's target audience can navigate without friction. The goal of the website was to display my client's services and previous work in a way that the end user would easily locate and take in, as well as lead the end user to a contact form to fill out and submit.
Chosen Platform: Squarespace
After conducting research on each of the platforms, I concluded that Squarespace would best meet the needs of the client and their target audience. Additionally, I felt that the tools included in the platform (simple drag and drop UI paired with a simple custom code panel) would allow me to meet the project deadline with ease. As an added bonus, the client's old website was already hosted on Squarespace, so I would not need to take the time to migrate the domain, content/graphics, or assist them in navigating through the backend (unless requested.)
Approach
As displayed below, the website's structure would be simple: only one set of parent-child pages, and the rest being landing pages. This approach would provide the highest probability in the end user locating what they are looking for, and increasing conversion rates for the client.
High Fidelity Wireframes
Due to the quick turnaround time necessary for the project, I decided it would be best to lay out the home page via a high fidelity wireframe before beginning development. After getting on the same page with the client on what information to emphasize on, sections to include, and overall flow of the home page and website, I was able to begin the development phase of the project.
Responsive UI Design
When beginning the development phase, I had to keep all devices in mind. Squarespace makes it easy to design with a mobile-first approach. The different viewport tabs automatically lay out elements and sections for the selected screen size (with some manual adjustments as needed.) Below is a comparison of the desktop and mobile versions of the home page.
Custom CSS3
With my knowledge of CSS, I was able to design custom layouts that would otherwise not be possible. The contact form in the screen below has been styled entirely via code. All platforms have their limitations, and forms is one of them for Squarespace. Without CSS, a two column form would not be possible. I was also able to reposition the form to overflow into the hero. This makes for a aesthetically pleasing, high-converting landing page.
General Notes
As shown below, I was able to design and develop a visually appealing website that would accurately depict their recent brand refresh. The new website is user-friendly, has a clean and legible UI, and is capable of growing with the business.
Next Steps
Further frontend development will be completed to enhance the user experience on all devices. Unfortunately, Squarespace's editor does not account for tablet users, so all pages must be made responsive for tablet via media queries in the custom code panel. The process for this has started and will be completed soon.
Final Thoughts
As with all projects, I am most grateful for the opportunity to not only put my skills and experience to work, but to further my education in the design industry with a hands on approach. The client was very pleased with the final product and I hope to work with them again soon. I look forward to tackling more web design projects that will make me a better UI/UX Designer while also helping businesses achieve their goals. Thank you for reading.