9:41
Adapitifurn Homepage
Mobile-First Homepage Design and Accessibility Enhancements
For the same company, I designed a homepage mockup with a "mobile-first" approach using Figma. Starting from previous wireframes, I adapted them to prioritize mobile usability, incorporating the provided logos, visuals, and text to align with the client’s themes.
The mockups were crafted to appear fully functional, including intuitive navigation, responsive buttons, icons, and text, ensuring a seamless user experience on mobile devices.
Tools
Figma
Freeform
Unsplash
1. Objectives
To design a mobile-first homepage mockup prioritising usability on smaller screens.
To ensure the design aligns with the client’s themes and brand identity.
To enhance the design’s accessibility through evaluation and application of usability principles.
2. Project Overview
Client Context: The client required a homepage design tailored for mobile devices, with a focus on usability and accessibility to accommodate diverse user needs.
Task: Develop a mobile-first homepage design, then refine the design based on an accessibility evaluation using ten key usability principles.
3. Design Process
Phase 3.1: Mobile-First Design
Adapted existing desktop wireframes for mobile usability.
Prioritised essential content and simplified navigation to align with mobile-first principles.
Created a polished mockup featuring:
Touch-friendly buttons and responsive icons.
Optimized typography and spacing for readability.
Navigation menus designed for smaller screens, such as a collapsible hamburger menu.
Phase 3.2: Accessibility Evaluation and Enhancements
Using ten usability principles, the design was reviewed and refined:
Visibility of System Status: Included indicators to inform users of ongoing processes.
Match Between System and the Real World: Used familiar language and visuals.
Consistency and Standards: Maintained uniform styles and predictable interactions.
User Control and Freedom: Ensured users could easily navigate back or correct mistakes.
Recognition Rather Than Recall: Kept key actions visible to reduce cognitive load.
Error Prevention: Designed safeguards like confirmation prompts to avoid errors.
Aesthetic and Minimalist Design: Removed non-essential elements for clarity.
Flexibility and Efficiency of Use: Provided shortcuts for frequent users without overcomplicating the interface.
Help Users Recognize, Diagnose, and Recover From Errors: Added actionable error messages with clear recovery steps.
Help and Documentation: Embedded guidance where needed, such as tooltips or FAQs.
#621808
#CB1F27
#001834
#FFFFFF
#18ACFE
#000000
4. Key Features
Mobile Optimization: Created an intuitive, accessible homepage tailored for mobile users.
Accessibility Enhancements: Improved design for inclusivity through thoughtful application of usability principles.
Error Management: Provided clear, actionable feedback to users in error scenarios.
5. Challenges and Solutions
Challenge 1: Balancing visual design with accessibility considerations.
Solution: Used accessibility tools in Figma to maintain compliance without sacrificing aesthetics.
Challenge 2: Simplifying complex wireframes for mobile while preserving functionality.
Solution: Prioritised essential features and reorganised content for clarity.
6. Outcomes and Learnings
Delivered a mobile-first homepage mockup with accessibility-focused refinements.
Enhanced skills in both mobile-first design and accessibility evaluation.
Gained insights into balancing design aesthetics with usability standards.
9:41