Homepage refresh
The Bookaway homepage refresh project aimed to tackle low SEO optimization, outdated design, and backend database issues. It sought to boost website speed, traffic, and visual appeal while preparing for a subsequent design rebrand. The focus was on gradually enhancing the homepage and platform for seamless new brand integration, prioritizing improved user experience and technical performance.
Challenges
1. Present links to more than 100 routes with appealing layout.
2. Use a white background for flexible section testing.
3. Address limited brand assets creatively.
Process
1. Research Phase: Conducted comprehensive research including competitor analysis, reference exploration, and user feedback to inform the redesign strategy.
2. Wireframing: Outlined the structure and layout of the new homepage design to optimise user navigation and engagement.
3. Design Asset Creation: Developed a photographic language, illustrative style (creating transportation and benefits illustrations), and ensured consistency in icon usage.
4. UI Implementation: Translated wireframes and design assets into a cohesive user interface across all devices.
3. Design Asset Creation: Developed a photographic language, illustrative style (creating transportation and benefits illustrations), and ensured consistency in icon usage.
4. UI Implementation: Translated wireframes and design assets into a cohesive user interface across all devices.
Developed solutions
1. Established a photographic language and illustrative style to enhance visual appeal and brand consistency.
2. Managing a large number of links on the page while maintaining navigational simplicity.
3. Ensured responsiveness across all devices for seamless user interaction.
2. Managing a large number of links on the page while maintaining navigational simplicity.
3. Ensured responsiveness across all devices for seamless user interaction.
Photographic language and illustrative style
Consistent photographic language:
- Ensure destination photos maintain uniformity by capturing them from similar angles, avoiding excessive saturation, and ensuring easy recognition of the locations. This approach creates visual consistency across all destination images.
Illustrative style:
- Developed illustrations using a restricted color palette to maintain coherence.
- Differentiate various modes of transportation (e.g., buses, cars, trains) by ensuring unique visual representations for each, enhancing visual diversity and clarity within the illustrations.
- Ensure destination photos maintain uniformity by capturing them from similar angles, avoiding excessive saturation, and ensuring easy recognition of the locations. This approach creates visual consistency across all destination images.
Illustrative style:
- Developed illustrations using a restricted color palette to maintain coherence.
- Differentiate various modes of transportation (e.g., buses, cars, trains) by ensuring unique visual representations for each, enhancing visual diversity and clarity within the illustrations.
Handling a Large Number of Links for Set Optimisation:
1. To enhance user experience and optimise the layout for various sections, I've created distinct designs:
a) First Links Section - Inspiring Visuals:
- Featuring larger, captivating images of destinations alongside the links. This approach aims to inspire users and create a visually engaging experience, albeit with fewer links per screen.
b) Second Links Section - Compact Presentation:
- Utilising smaller-sized links to accommodate more on a single screen. This design focuses on efficiency, enabling users to access a larger volume of links without excessive scrolling.
c) Subsequent Links Sections - Textual Representation or Brand Logos:
- Displaying links without accompanying photos, opting for a concise list format or integrating country flags or company logos. This style prioritizes content density and quick accessibility, catering to users seeking specific destinations or brands efficiently.
1. To enhance user experience and optimise the layout for various sections, I've created distinct designs:
a) First Links Section - Inspiring Visuals:
- Featuring larger, captivating images of destinations alongside the links. This approach aims to inspire users and create a visually engaging experience, albeit with fewer links per screen.
b) Second Links Section - Compact Presentation:
- Utilising smaller-sized links to accommodate more on a single screen. This design focuses on efficiency, enabling users to access a larger volume of links without excessive scrolling.
c) Subsequent Links Sections - Textual Representation or Brand Logos:
- Displaying links without accompanying photos, opting for a concise list format or integrating country flags or company logos. This style prioritizes content density and quick accessibility, catering to users seeking specific destinations or brands efficiently.
2. Each section is tailored to cater to different user preferences and browsing needs, offering varying link densities and visual formats to optimise user experiences across the platform.
Responsiveness across all devices
I meticulously crafted the homepage design to guarantee flawless adaptability across various devices. This involved creating tailored designs for desktop, tablet, and mobile resolutions, ensuring a consistent and intuitive user experience on all platforms. Furthermore, I furnished the developer with comprehensive and precise information, equipping them with all the necessary details to effectively implement the designs across these different resolutions.
Comparison
The redesigned Bookaway homepage successfully addressed SEO challenges, improved visual appeal, and provided a user-centric interface across devices. Through meticulous research, creative design asset development, and overcoming various challenges, the project aimed to elevate user experience and drive increased traffic to the website.
