The Challenge
Create a unique landing page to convert app users and potential new users into paid subscribers for the TIU ecosystem and utilize discount codes (and tracking).
Summary
Designed app conversion pages for both mobile and desktop, as well as an administrative portal for managing subscriptions. Then developed the user flows and worked directly with the client, pitching the overall execution of the sites. Worked with a visual designer to implement these flows within their updated design system.
Results
Successful handoff of assets and finalized site by the team. It has been in place in some variation of the original designs and flow for a few years now and converting more customers into their subscription ecosystem.
_________________________________
Business Goals & Flows
Began by understanding the needs of the organization and the challenge they were facing. They had provided an initial workflow for the user experience and technical implementation. We audited and updated that flow to create this diagram to make sure all parties understood the necessary behaviors of the user and the required engineering behind it. Worked with the developers to make sure all aspects of authentication were in place.
Industries
Fitness, Social Media, Subscriptions, eCommerce, Health & Wellness, Lifestyle
Roles
UX Design Lead, UX Design & Oversight, Client Presentation & Management
Services
UX Design, Responsive Design, UX Flows, User Experience (UX), Wireframing, Prototyping, InVision, Sketch, Mobile Web Design, Marketing, Conversion Design, eCommerce UX, eCommerce Web Design, Design, Presentations, Client Interface & Management
Link
Responsive Wireframes
Created responsive wireframes for the landing page flows. It was designed to be blocked pieces that could be rearranged, tested, and updated.
___
Mobile Landing Page & Flow Wireframes
Wireframes for the mobile landing page targeted at converting paid subscribers utilizing discount codes. Designed a step by step process for choosing a membership plan and easily signing up.
Desktop & Tablet Landing Page Wireframes
The desktop wireframes work within a desktop or tablet environment—leveraging the same block system in a responsive way.
The ultimate goal was to make it easier to signup and guide the user through the subscription purchase process in an intuitive way.
Overall Mobile Mockups
An overview of the flow of the landing page with error states, profile page, and editing screens. Along with annotations, notes, flows, and organized screens. We worked off this to create prototypes, get user feedback, and discuss with the developers the assets and annotations they needed.
___
Landing Page Screens
After collaborating with the visual designer to find the right visual language, we updated the wireframes and screens to engage customers and optimized them for conversion.
Admin Portal Wireframes
Designed the administrative portal and backend they wanted to implement for TIU employees managing users, discount codes, and support tickets. Admin screens were also responsive for mobile, tablet, and desktop, while maintaining all the information and not sacrificing ease of use in the different sizes.
___
Final Thoughts on Agency Optimization
Working with Deutsch to help design and optimize the signup flow for Tone It Up’s app and subscription services proved to be a great collaboration and fulfilling project. The in-house development and design teams at Deutsch worked hand in hand with Tone It Up’s team to understand their business problems and goals and implement a straightforward and flexible solution. Ultimately the landing page converted more customers into their monthly subscription ecosystem.
___
