Tone It Up
648
portfolio_page-template-default,single,single-portfolio_page,postid-648,bridge-core-2.3.7,qode-page-transition-enabled,ajax_fade,page_not_loaded,,qode-title-hidden,qode_grid_1300,side_area_uncovered_from_content,qode-child-theme-ver-1.0.0,qode-theme-ver-24.6,qode-theme-bridge,disabled_footer_bottom,qode_header_in_grid,wpb-js-composer js-comp-ver-6.2.0,vc_responsive,elementor-default,elementor-kit-10

Tone It Up / Deutsch

—

Overview

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.

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
ToneItUp.com

Process

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.
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

The finalized screens that were implemented by the visual designer executing on the flows designed.

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

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.