As the lead UI/UX designer, I optimized the Kmart Australia photo experience with responsive design
The goal of this project was to elevate the mobile experience with responsive design, focusing on improving mobile navigation and enhancing search functionality.
Responsive Design
The team recognized the advantages of building a responsive web experience. With responsive design, the website adapts to various screen sizes, providing a consistent and seamless experience across desktops, tablets, and mobile devices. As mobile usage grows, this approach ensures that mobile users have an optimized experience, leading to increased engagement and traffic. Additionally, Google prioritizes responsive websites in search rankings, and using a single URL for both mobile and desktop versions improves SEO. The shift from an adaptive to a responsive website was necessary.
Mobile Navigation
I concentrated on optimizing mobile navigation to ensure a smooth, user-friendly experience that helps users quickly find what they need without frustration. Simplified navigation encourages users to explore more content and interact with the site, which boosts engagement. It also facilitates faster purchases or sign-ups, leading to improved conversion rates. Additionally, better mobile navigation can enhance retention, as a seamless experience increases user satisfaction and the chances of visitors returning to the site.
Sticky Navigation Bar
To ensure key navigation options like the menu and search are always easily accessible, I suggested keeping the navigation sticky (or fixed) at the top, allowing consumers quick access to these features. A sticky navigation bar stays at the top of the screen as users scroll, so they don’t need to return to the top to access important links. Optimized navigation, including sticky menus and prominent search bars, ensures that vital actions (such as completing a purchase) are always within reach. With the navigation constantly visible, users are more likely to explore other sections of the site, such as different product categories or services.
Drawer Menu
I suggested consolidating the website's full menu into a compact, collapsible format. The drawer menu, a commonly recognized icon, keeps the mobile interface tidy while still providing access to various navigation options. By hiding the menu off-screen, drawer menus help preserve valuable screen space, which is crucial on mobile devices. This approach ensures a clean and simple UI, allowing more room for primary content (i.e. photo products). Additionally, drawer menus offer smooth transitions between different sections of the site, with the menu sliding in and out, enhancing the overall user experience.
Icon-based Navigation
With limited space on mobile devices, simplifying navigation is crucial, so I suggested using icon-based navigation. Icons for sections like account, search, and shopping bag were grouped together. These icons included interactive features, such as hover states, which make the navigation more engaging and dynamic, ultimately encouraging greater user interaction. Icons allow for quicker recognition than text-based navigation. With fewer words to read, users can navigate more quickly, which is especially useful for mobile users or those on the go.
Account
Search
Shopping Bag
Scrollable Navigation Menu
Instead of displaying long lists of categories, I recommended using a scrollable navigation menu that allows users to swipe horizontally through options, making it easier to navigate large menus. For websites with numerous categories, scrollable menus provide an efficient way to organize and present content without overwhelming users, ensuring everything stays accessible. A well-designed scrollable menu offers an intuitive and responsive experience, enabling users to effortlessly explore available options with a simple scroll or swipe. This type of navigation encourages users to explore different sections of the site, potentially increasing engagement by exposing them to more content.
Search Functionality
Search allows users to quickly find specific products without having to manually browse through categories or multiple pages. This reduces frustration and saves time, particularly for users who know exactly what they're looking for. A smooth, fast, and efficient search process creates a positive perception of the site, making customers more likely to return. Users can explore more options, increasing engagement and the chances of upselling or cross-selling.
Search Auto Suggestions
Auto-suggestions help users find what they’re looking for more quickly. By offering suggestions as they type, users can choose from a list of pre-populated terms, reducing the time it takes to type a full query. This leads to a smoother and more efficient experience, improving user satisfaction, especially for mobile users or those who don’t want to type long queries. It’s also helpful for less experienced users who may not know what terms to use or what the platform offers. This can increase engagement as users are more likely to explore recommendations.
Summary
Overall the project improved the mobile experience through responsive design. By adopting a responsive approach, the website adapts to various devices, providing a consistent experience across all platforms. This lead to increased mobile engagement and traffic. These improvements encouraged users to explore content, complete purchases, and boosted retention by enhancing satisfaction and conversion rates.