AKQA ↓AKQA ↓AKQA ↓AKQA ↓AKQA ↓AKQA ↓AKQA ↓AKQA ↓AKQA ↓AKQA ↓AKQA ↓AKQA ↓AKQA ↓AKQA ↓AKQA ↓
New-Project-copy

UX/UI DESIGN - MOBILE DESIGN - DIGITAL STRATEGY 

AKQA x Tanger Outlets Redesigned an interactive membership experience for responsive web and mobile native apps.

Project Overview

My role was User Experience Designer. I worked with a cross-functional team of project managers, creative directors, art directors, strategists, designers, copyrighter, analysts, developers, and more to create a new web and app experience.

 Overall Project Process:
→ Articulated the UX journey map for web and mobile experience
→ 
Design low-fidelity to high-fidelity wireframes
→ 
Worked with researcher and strategist on content strategy
→ 
Design for all breakpoints
→ UX annotations for handoff and approval

698a23_d17001bcca2a40ea8e536c4acae54274mv2

Phase 1:
Designing UX for Web & App

Cross-collaborating across the team, we designed the UX for web and app experiences. We brought our ideas to life by mocking up low-fi wireframes that were later put in hi-fidelity using an application-wide design system for both web and app. 

User research and data analysis were conducted, which influenced the design decisions made by the team.

 All stages of the user journey were ideated and defined at this stage, from content strategy to emails to error states and everything in between. This was a lengthy process to ensure we were getting everything in the experience across the web and app experience. 

Flows and screens that were designed out: 

→ Sign-up flow (error states) 
→ Authenticated states for whole web experiences 
→ Homepage and location-specific homepage states
→ Upgrade account payment flow
→ Marketing pages 
→ Upselling opportunities 
→ Linked cards flow (error states) 
→ Interactive toast notifications 
→ Receipt capturing flow 
→ Receipt scan status pages
→ The item list and detail pages 
→ Filter components 
→ Redemption flows
→ Unsubscribing flows 
→ History pages 
→ Account settings 
→ Footer pages 
→ Account Menu 
→ Interaction design 
→ Accessibility was prioritized 

Interactive prototypes were built to explore and present our design to receive feedback from the team on how our design functions.  

Close communication was had with the development team to ensure our design would not cause any constraints on their end. In addition, we focused on reusing components to ease development building pressure.

698a23_a26f5ad0d37f4c2cbbd44457d1587fe0mv2
698a23_4244d6b4b7e0473782d40ff436c9bf01mv2

Phase 2:
Responsive Design

Once the initial UX was built, breakpoints were defined for the web experience. Wireframes were built out on desktop, large tablet, small tablet, and mobile. App wireframes were also designed separately, considering both IOS and Android interface functionality.

698a23_f5212f644de74b24b84fb13de600c9b0mv2
698a23_4a75849a57e3418c88cbd4a8e8481fddmv2-1

Phase 3:
Design Sprints & UX Annotations

A series of sprints were put into place lasting over ten weeks, grouping a series of wireframes and screens to prepare UX wireframes for handoff to development. UX responsibilities were to lay out the wireframes and write annotations, user flow diagrams, etc. We ensured that development received everything it needed.

698a23_f61ae6275784400ba4b084eae0be8ed9mv2

Phase 4:
Design Handoffs & Development

The web and app experience is currently in development. 

698a23_e50822d9819d4f20b071c605db705803mv2
Contact Matt ↓Contact Matt ↓Contact Matt ↓Contact Matt ↓Contact Matt ↓Contact Matt ↓Contact Matt ↓Contact Matt ↓Contact Matt ↓Contact Matt ↓Contact Matt ↓Contact Matt ↓Contact Matt ↓Contact Matt ↓Contact Matt ↓

➤ Want to get in contact with Matt?

berglogo_black

Matt Julius Rosenberg

→ A Digital Consultant and Product Designer based in New York.

Matthew Julius Rosenberg  @2023

Back to top Arrow
View