Masa’sPortfolio

I architected a unified digital experience across five core platforms, covering mobile apps, web portals, and internal enterprise tools. A single scalable UI Design System powers this entire ecosystem to accelerate development and ensure visual consistency. By replacing manual offline processes with intuitive digital tools, we significantly lowered communication costs across the business. The new workflows translate complex agricultural data into clean interfaces, allowing users to handle their daily operations with complete autonomy.

I designed a tailored ecosystem for three core user groups. SFF suppliers, field teams, and their global customers use the mobile and web apps to access real-time data and manage livestock bookings. Overseas corporate clients track shipments and access market resources through self-service portals. Internal marketing teams rely on modular digital tools to run campaigns independently.

A primary challenge was re-architecting the complex website navigation to make thousands of unpredictable legacy pages logical and accessible. Instead of designing page by page, I built a highly reusable component library and a clear structural hierarchy. While the website continues to undergo optimisation today, my design strategy established the critical structural foundation for its long-term roadmap. This systemic approach allowed our team to migrate content rapidly while keeping development costs controlled.

The resulting ecosystem balances immediate utility with future scale. The Flutter app serves members in high-stress situations, replacing complex menus with fast, one-tap actions for emergency requests. For the corporate website, I built a flexible, themeless UI design system. This system preserves the established AA visual identity during the current migration, while remaining structurally prepared to support future brand updates without requiring another technical rebuild.

I managed the complete design lifecycle while mentoring internal and external teams to ensure high-quality execution. By building a scalable UI design system from the ground up, I streamlined developer handoffs and created a reliable framework for future app updates. This structured approach allowed us to maintain a consistent visual standard while scaling the product efficiently.

I designed a complete UI suite focused on clarity and practical utility. The mobile experience covers onboarding, usage tracking, straightforward bill payments, and account management. A key feature is the tailored dashboard system, which translates raw data into clear, segment-specific energy insights, making it easy for customers to understand and manage their daily power consumption.

My most important role was acting as the bridge between brand design and technical delivery. I helped the local brand team understand the constraints and incremental rhythm of agile development, while translating their creative direction into scalable UI components, design specifications, and platform-compatible design files that developers could apply efficiently within AEM. This ongoing dialogue reduced ambiguity between teams, kept each release achievable within the project’s time and budget constraints, and allowed the experience to become progressively more branded without disrupting the migration roadmap.

The resulting system was designed to evolve in stages. Its first release provided a flexible, themeless component framework capable of carrying existing website content into the new platform. Each subsequent phase introduced more of Auckland Airport’s renewed identity through refined typography, spacing, and branded visual elements. Alongside designing new pages and scalable components, I continually aligned the brand and development teams so the replatform could meet its phased deadlines while moving steadily towards a complete branded experience.

I translated the shift from a legacy payroll provider to a modern, human-centred HR platform into a unified digital experience. I architected the core journeys, information structures, and interface patterns across mobile and web, then built the original UI Design System and digital brand component library from the ground up. This shared system gave design and engineering teams reusable patterns for faster iteration, protected visual consistency across products, and created room for future feature development.

The Smartly mobile app enables employees to access payslips, book leave, and complete everyday self-service tasks quickly. The People Management web platform brings broader HR workflows into a clear, connected workspace, while the corporate website communicates the new brand through flexible, conversion-focused layouts. Together, these products established the first cohesive digital expression of Smartly and positioned the business to grow beyond payroll into a broader people-management ecosystem.

I redesigned the platform’s core journeys—from property search and data visualisation to subscription onboarding—around clarity, speed, and responsive behaviour. Alongside the product experience, I built a production-ready design system containing reusable components, typography rules, colour tokens, and layout grids. This shared system streamlined developer handoffs, reduced inconsistency between screen sizes, and supported future feature rollouts without compromising the brand.

The finished design suite supports high-speed property research across desktop and mobile, turning dense market data into accessible, easy-to-scan interfaces. A reusable component library connects property search, data visualisation, and subscription onboarding within one coherent system. By bringing the product experience into line with Relab’s refreshed identity, the redesign strengthened its position as a sleek, trustworthy, and modern property technology platform in New Zealand.

I defined the core brand language across typography, colour, layout, and interface patterns, then documented these decisions through the UI Design System. The website components were designed to align with Tailwind CSS conventions, giving each pattern a clear relationship to the chosen front-end framework. This approach carried the same visual language across the website’s different page and content types.

The official website brings together AMA’s homepage, brand story, testimonials, membership registration, news, team content, FAQs, and contact information. Shared interface patterns connect content pages, forms, calls to action, and supporting states—including the error page—within the same visual language. The branding, website design, UI Design System, and component library form one coordinated set of digital design deliverables.