Background
Tanger Outlets owns and operates numerous shopping centers across the US and Canada, with over 500 brand-name retail companies and a promise to deliver the best shopping experience and value to customers. Many shoppers associate the retail outlet with being up to date on the latest trends and having fashionable savings, but when it came to the mobile app experience Tanger Outlets knew it was time for a makeover. Whether their shoppers were at a physical location or accessing their stores virtually, Tanger Outlets wanted their customers to have the best shopping experience possible.
Project Details
Timeline: 10 weeks | My Role: Lead UX/UI Designer
Our team was comprised of a project manager, an Android developer, an iOS developer, and myself as the UX/UI designer. Our team also worked with the client's internal team of product owners and developers, using the Scrum framework and tools like Azure DevOps, Miro, and Invision to collaborate remotely.
As the UX/UI designer, I was responsible for:
Improving the User Experience. The existing app hadn't truly been updated since it was first created, presenting limitations for new features and challenges with functionality. In an effort to improve the overall user experience, I focused first on the navigation, creating an information architecture diagram to demonstrate how we could rearrange the structure to create a more streamlined experience.
Redesigning the User Interface. I was responsible for redesigning the interface to give the app a visual upgrade that better resonated with the client's evolved branding. I created a pattern library in Sketch with reusable design components.
Presenting Prototypes. To make sure the team and stakeholders were aligned with look and functionality before development, I designed and presented clickable prototypes in Invision.
Design Handoff. I was responsible for making sure all the design elements, including animations, were exportable and easy for developers to access.
Information Architecture
The mobile app needed a look and feel that better reflected the trendy reputation shoppers associated with the Tanger Outlets’ brand, but to improve the app's user experience, it would require more than just visual changes. The existing app was structured similarly to their website with a homepage that was designed to function as a lead page, using call-to-actions to redirect users back to the main navigation pages. Since the new app design would have a fixed navigation bar at the bottom to help users achieve this same result, I saw an opportunity to restructure the app’s layout for a better user experience. I proposed a new architecture that would allow the homepage to be used for Tanger Outlet’s highest-priority deals and timely promotional offers instead of functioning as an additional navigation menu.
Pattern Library
As a team, we agreed to use the proposed architecture and moved forward with creating the visual design. Since the interface was being redesigned in its entirety, I began by creating a Sketch pattern library of all the components we needed to construct the pages. This helped to ensure visual consistency across the platform, while also providing the developers with reusable components to build the app.
Mockups & Prototypes
Next, I designed high-fidelity mockups using the components from the pattern library. Using Invision, I linked pages together to create a clickable prototype that our team could use to preview what the finished app would look like and make sure we were all on the same page with the design.
Animation
While developing the onboarding screens, our team discovered that we needed some type of indicator to let the user know when the app was busy loading. To solve this, I designed a loading animation in Adobe AfterEffects and then converted it into a JSON animation using LottieFiles.
Final Thoughts
In the end, our team sufficiently delivered the new version of the Tanger Outlets app. Although we did not have the opportunity to talk and test with users, the Tanger Outlets team did express that they would conduct user testing in the future and actively monitor feedback from users in the App and Google Play store. Ultimately, the redesign of this coupon experience with over 8,000 stores led to an additional revenue of $200k per week. All in all, it was very successful!
I gained a lot of experience working on this project — from building out a pattern library from scratch to learning how to hand off animation files to developers. I look forward to seeing how the app will evolve over time with more research and user testing to continue to provide customers with the best shopping experience possible.
