Auyea: UI/UX Designer & Frontend Developer

September 1, 2024

Auyea

HackMelbourne Homepage

Role: UI/UX Designer & Frontend Developer

As a UI/UX Designer & Frontend Developer at Auyea, I worked closely with the founders to define project requirements and collaborated with a senior full-stack developer. I redesigned Auyea's customer facing front end user flow from landing to checkout and implemented the changes through Angular 12 and onto production.

All images shared are screenshots of the website, designed and developed by me. Backend functionality and business logic is developed by another developer.

Key Achievements

  • Enhanced User Experience: Conducted user research and redesigned the website, reducing friction in the checkout process.
  • Brand-Aligned Redesign: Revamped the frontend while maintaining brand consistency and ensuring continued API functionality.
  • CMS Integration: Implemented a Notion-based CMS for blog content, allowing non-technical managers to create and manage posts easily.
HackMelbourne Homepage

Skills Developed

Communication & Project Management

  • Requirement Analysis: Engaged directly with founders to define priorities and refine project goals.
  • Deadline Management: Balanced multiple tasks within tight deadlines while ensuring quality delivery.
  • Backend Coordination: Facilitated seamless integration between frontend UI and backend API.
  • Adaptability: Quickly learned unfamiliar frameworks and navigated an existing complex codebase.

Technical Proficiency

  • Angular 12: Developed UI components within a legacy Angular framework.
  • SCSS & TailwindCSS: Ensured consistent styling and responsiveness.
  • CSS & JavaScript Animations: Added dynamic UI elements to enhance user engagement.
  • Figma: Designed high-fidelity UI mockups to streamline development.
  • Microsoft Azure: Worked within cloud-based deployment environments.
HackMelbourne Homepage

Challenges & Solutions

Challenge 1: Navigating a Large Legacy Codebase

Problem: The existing codebase was extensive and built on Angular 12, an outdated version with dependency issues that made upgrading infeasible. Additionally, there was limited documentation, making it difficult to understand the structure and dependencies.

Solution: To adapt efficiently, I:

  • Focused on maintaining compatibility by minimizing changes to utility functions and API methods while refining the UI.
  • Leveraged peer assistance from colleagues with prior experience on the system to accelerate understanding.
  • Utilized debugging tools and breakpoints to trace functionality and learn how components interacted.
  • Documented key findings and created internal notes to aid future developers facing similar challenges.

Challenge 2: Frequent Requirement Changes

Problem: Founders would approve Figma designs, but after development began, they would request modifications, sometimes requiring significant rework and leading to wasted effort.

Solution:

  • Improved the fidelity and detail of initial designs to better reflect the final product, reducing ambiguity.
  • Scheduled check-in meetings during development phases to confirm alignment before committing to major implementations.
  • Clearly explained design decisions and trade-offs to stakeholders, ensuring they understood the impact of requested changes.
  • Created a requirement checklist before starting development, asking stakeholders to validate all specifications upfront.
HackMelbourne Homepage

Lessons Learned

  • Thorough Requirement Gathering: Clearer task definitions prevent unnecessary revisions.
  • Proactive Communication: Articulating design decisions effectively helps align stakeholders early in the process.
  • Seeking Help is Valuable: Leveraging team expertise accelerates adaptation to unfamiliar codebases and technologies.