Part 3 Software engineering assignment for University of Auckland, handling UX/UI design.
This assignment involves designing a high-fidelity prototype for a freecycling program, including a landing page and a registration form. The main objective is to practice skills in web design using HTML, CSS, and JavaScript, while adhering to visual design principles and accessibility guidelines.
- Visual Hierarchy: The homepage uses a large background image to draw attention, with central figures scaled down to guide the user's focus.
- Colour Contrast: A dark, low-opacity background contrasts with bright white and green elements to highlight key features.
- Interactive Elements: Green borders distinguish interactive buttons from regular text, enhancing usability.
- Consistency: All navigation options share a uniform font, size, and colour, following the similarity principle.
- Proximity and Symmetry: Grouped navigation options and vertical symmetry improve readability and ease of use.
- Enhanced Accessibility: Icons and numeric indicators in the wishlist option maintain visibility of system status.
- Emphasis and Balance: Larger font sizes for the Freecycling slogan and central text alignment create a balanced, visually appealing layout.
- Contrast: White font colour against a low-opacity background ensures text visibility.
- Proximity and Common Fate: Divided search and category sections with shared visual characteristics aid in user navigation.
- Brand Colours: Integrated brand colours and gradients maintain a cohesive design.
- Visual Hierarchy: Asymmetrical division into signup and welcome sections directs user attention efficiently.
- User Control: A prominent close button aligns with familiar user interface patterns, enhancing control and freedom.
- Meaningful Green Elements: Green elements align with environmental values and improve ease of learning and memorability.
- Quick Recognition: Consistent visual cues reduce cognitive load and enhance intuitive use.
- Dropdown Menus: Dropdowns reduce user errors and increase efficiency by minimising typing.
- Primary Colour: The brand's signature colour (#26252D) is used throughout the platform, providing a consistent visual identity.
- Contrast and Emphasis: White text on dark backgrounds and highlighted action buttons ensure key elements stand out.
This Freecycling! High Fidelity Prototype was a project aimed at refining design and user experience skills. I undertook this project to deepen my understanding of UX design principles and to create an intuitive, user-friendly platform. It provided an excellent opportunity to expand my knowledge in both technical and design aspects.
The goal was to build a visually appealing and user-friendly interface for the Freecycling! platform. The design aimed to ensure a seamless user experience while promoting the exchange of household items in an environmentally friendly manner.
Throughout the design cycle, I followed an iterative process that involved research, prototyping, user testing, and refinement. This approach ensured continuous improvement and alignment with user needs and expectations.
- Usability: The platform is designed to be intuitive and easy to use, with clear navigation and interactive elements that guide users effectively.
- Memorability: Consistent visual cues and the use of green elements help users remember their actions and the overall platform layout.
- Emotional Impact: The design aims to evoke a positive emotional response, encouraging users to engage with the platform and participate in the freecycling community.
The design incorporates Nielsen's heuristics for user interface design, ensuring principles such as visibility of system status, user control and freedom, consistency and standards, error prevention, and recognition rather than recall are adhered to.
- Unity: Consistent use of colours, fonts, and styles throughout the platform creates a unified and cohesive design.
- Balance: The layout balances elements to ensure a visually appealing and harmonious appearance.
- Emphasis: Key actions and important information are highlighted to draw user attention and guide interactions.
A major challenge was applying various design principles effectively to create a cohesive and engaging user interface. Addressing these challenges improved my understanding of UX design and enhanced my problem-solving skills.