Introduction

Founder and CEO of Zone In, Kush Mahan approached me earlier this year to work on his mobile app, Zone In. Over the last six months, I've worked very closely with Kush to help him increase engagement and motivate athletes to track their health.

What is Zone In?

ZoneIn is a Health, Wellness and Fitness app that allows athletes to perform their best by meal, hydration and injury tracking.

My Process

As the sole Designer on the project, I worked on redesigning the

UX and UI for the nutrition screen and later moved on to creating the concept for hydration tracking.

Approach

Research > Strategy > Prototype > Design > Build > Test > Development

Software used

Sketch, Adobe Suite, Invision

Gathering inspiration

Analyzing trends amongst competitors helped me to gain inspiration. I analyzed brands that are on top of the game for their visuals and functionality.

Nike Training

Nikes simple visual approach inspired me to approach my design in this way. Kush and I agreed that the platform should be engaging but also focus on the data and logging aspect of the app. In this case, a simple visual design could be highly effective.

Calm

Zone In is a platform for meditation as much as it is for nutrition.

Calm gave me insight on what a more visually heavy data could look/feel like. While I did not take much from this approach, the structure and photo treatment allowed me to take on a new perspective for the visuals.

Lifesum

Lifesum was the perfect medium for a clean but visually engaging design. The UX execution for the meal log is pretty flawless and captures you immediately. In 3 clicks, you can log your meal and you're immediately redirected to your stats for the day. I decided to follow a similar execution when designing as I found it the most practical and engaging. The visuals were also very, very nice.

Breaking down the existing UX

Logging is the most important action on this screen. The current log button feels hidden and doesn't create engagement.

The clock is meant for users to see their status right now vs. overall status for the day. There is no affordance indicating that this is clickable or what it is supposed to do.

This messaging is meant to create motivation and engagement for the user. Currently, it remains unseen due to the data and messaging overload.

The timeline is meant to show the user if they're keeping up with their meals per the meal plan they have set up. Feedback from users have concluded that this can be unclear unless you're in contact with the app regularly.

Log a meal appears for the second time on the screen which could be an easy solve for the lack of engagement from the top plus button, however, this isn't always the card that will appear.

Tackling a direction

First iteration

Other than the obvious interface changes and clean up, some of the initial improvements included:

Data Visualization - This new view was explored for real estate purposes and provide more room for the numeral data.
Timeline - Provided a clearer indication of a logged workout vs. meal by giving them individual columns.
Meal Cards - Cards were redesigned to view more than one at a time. In the previous design, you had to swipe to find previous meals logged.
Navigation Log button - As one of the most important features in the app, I decided to add the log to the navigation for extra accessibility and engagement.

Second iteration

After testing out version 1, I received feedback from a couple of users that thought it could be more engaging.

Data Visualization - My initial exploration tested well, however, when compared to this visualization, 4/5 users preferred this view as it felt clearer.
Copy for engagement - I missed the copy from the original design and re incorporated it. Still unsure of how to make it more engaging, I added an icon for visual interest.

Final Design

After testing version 2, users felt it could still be more engaging and could use more clarity on each function. Changes included:

Now/Daily Overview - I removed the clock icon from the top left and created tabs to toggle between now and daily progress.
Cards - Added behind graphs to provide a clearer separation of data and to make visuals stand out.
Notifications - After brainstorming different ways to engage the user in their progress, I created notification like messaging with different statuses to update athletes on their health status. Users can clear these out, forcing them to engage with them even more.

Click on notifications to see messaging

Where are we now?

We are currently in the process of creating and designing the flows for the actions on this screen. The Hydration feature is in its final stages and you can expect to see this, as well as on boarding in the near future.

My designs are already being tested by athletes and have increased engagement by 25%, as well as new client acquisition through presenting the redesigned application.

I am grateful and excited to be working on this project and look forward to sharing the rest of my work with you soon.

Thank you!

Elevating the digital ordering guest experience across web, app + kiosk.

Founder and CEO of Zone In, Kush Mahan approached me earlier this year to work on his mobile app, Zone In. Over the last six months, I've worked very closely with Kush to help him increase engagement and motivate athletes to track their health.

ZoneIn is a Health, Wellness and Fitness app that allows athletes to perform their best by meal, hydration and injury tracking.

Analyzing trends amongst competitors helped me to gain inspiration. I analyzed brands that are on top of the game for their visuals and functionality.

Nikes simple visual approach inspired me to approach my design in this way. Kush and I agreed that the platform should be engaging but also focus on the data and logging aspect of the app. In this case, a simple visual design could be highly effective.

Zone In is a platform for meditation as much as it is for nutrition.

Calm gave me insight on what a more visually heavy data could look/feel like. While I did not take much from this approach, the structure and photo treatment allowed me to take on a new perspective for the visuals.

Logging is the most important action on this screen. The current log button feels hidden and doesn't create engagement.

The clock is meant for users to see their status right now vs. overall status for the day. There is no affordance indicating that this is clickable or what it is supposed to do.

This messaging is meant to create motivation and engagement for the user. Currently, it remains unseen due to the data and messaging overload.

The timeline is meant to show the user if they're keeping up with their meals per the meal plan they have set up. Feedback from users have concluded that this can be unclear unless you're in contact with the app regularly.

Log a meal appears for the second time on the screen which could be an easy solve for the lack of engagement from the top plus button, however, this isn't always the card that will appear.

Other than the obvious interface changes and clean up, some of the initial improvements included:

Data Visualization - This new view was explored for real estate purposes and provide more room for the numeral data.

Timeline - Provided a clearer indication of a logged workout vs. meal by giving them individual columns.

Meal Cards - Cards were redesigned to view more than one at a time. In the previous design, you had to swipe to find previous meals logged.

Navigation Log button - As one of the most important features in the app, I decided to add the log to the navigation for extra accessibility and engagement.

After testing out version 1, I received feedback from a couple of users that thought it could be more engaging.

Data Visualization - My initial exploration tested well, however, when compared to this visualization, 4/5 users preferred this view as it felt clearer.

Copy for engagement - I missed the copy from the original design and re incorporated it. Still unsure of how to make it more engaging, I added an icon for visual interest.

After testing version 2, users felt it could still be more engaging and could use more clarity on each function. Changes included:

Now/Daily Overview - I removed the clock icon from the top left and created tabs to toggle between now and daily progress.

Cards - Added behind graphs to provide a clearer separation of data and to make visuals stand out.

Notifications - After brainstorming different ways to engage the user in their progress, I created notification like messaging with different statuses to update athletes on their health status. Users can clear these out, forcing them to engage with them even more.

Click on notifications to see messaging

We are currently in the process of creating and designing the flows for the actions on this screen. The Hydration feature is in its final stages and you can expect to see this, as well as on boarding in the near future.

My designs are already being tested by athletes and have increased engagement by 25%, as well as new client acquisition through presenting the redesigned application.

I am grateful and excited to be working on this project and look forward to sharing the rest of my work with you soon.

Thank you!

Elevating the digital ordering guest experience across web, app + kiosk.

Contribution
UX, UI, Redesign

Timeline
2018-2020

Client
Zone In

Alex Rodriguez is a New York City based Product Designer. For more info on her work, please reach out at alex.design.rodriguez@gmail.com

Founder and CEO of Zone In, Kush Mahan approached me earlier this year to work ​on his mobile app, Zone In. Over the last six months, I've worked very closely with Kush to help him increase engagement and motivate athletes to track their health.

ZoneIn is a Health, Wellness and Fitness app that allows athletes to perform their best by meal, hydration and injury tracking.

Analyzing trends amongst competitors helped me to gain inspiration. I analyzed brands that are on top of the game for their visuals and functionality.

Nikes simple visual approach inspired me to approach my design in this way. Kush and I agreed that the platform should be engaging but also focus on the data and logging aspect of the app. In this case, a simple visual design could be highly effective.

Zone In is a platform for meditation as much as it is for nutrition.

Calm gave me insight on what a more visually heavy data could look/feel like. While I did not take much from this approach, the structure and photo treatment allowed me to take on a new perspective for the visuals.

Logging is the most important action on this screen. The current log button feels hidden and doesn't create engagement.

The clock is meant for users to see their status right now vs. overall status for the day. There is no affordance indicating that this is clickable or what it is supposed to do.

This messaging is meant to create motivation and engagement for the user. Currently, it remains unseen due to the data and messaging overload.

The timeline is meant to show the user if they're keeping up with their meals per the meal plan they have set up. Feedback from users have concluded that this can be unclear unless you're in contact with the app regularly.

Log a meal appears for the second time on the screen which could be an easy solve for the lack of engagement from the top plus button, however, this isn't always the card that will appear.

Other than the obvious interface changes and clean up, some of the initial improvements included:

Data Visualization - This new view was explored for real estate purposes and provide more room for the numeral data.

Timeline - Provided a clearer indication of a logged workout vs. meal by giving them individual columns.

Meal Cards - Cards were redesigned to view more than one at a time. In the previous design, you had to swipe to find previous meals logged.

Navigation Log button - As one of the most important features in the app, I decided to add the log to the navigation for extra accessibility and engagement.

After testing out version 1, I received feedback from a couple of users that thought it could be more engaging.

Data Visualization - My initial exploration tested well, however, when compared to this visualization, 4/5 users preferred this view as it felt clearer.

Copy for engagement - I missed the copy from the original design and re incorporated it. Still unsure of how to make it more engaging, I added an icon for visual interest.

After testing version 2, users felt it could still be more engaging and could use more clarity on each function. Changes included:

Now/Daily Overview - I removed the clock icon from the top left and created tabs to toggle between now and daily progress.

Cards - Added behind graphs to provide a clearer separation of data and to make visuals stand out.

Notifications - After brainstorming different ways to engage the user in their progress, I created notification like messaging with different statuses to update athletes on their health status. Users can clear these out, forcing them to engage with them even more.

Click on notifications to see messaging

We are currently in the process of creating and designing the flows for the actions on this screen. The Hydration feature is in its final stages and you can expect to see this, as well as on boarding in the near future.

​

My designs are already being tested by athletes and have increased engagement by 25%, as well as new client acquisition through presenting the redesigned application.

​

I am grateful and excited to be working on this project and look forward to sharing the rest of my work with you soon.

​

Thank you!

Elevating the digital ordering guest experience across web, app + kiosk.

Contribution UX, UI, Redesign

Timeline 2018-2020

Client Zone In

Alex Rodriguez is a New York City based Product Designer. For more info on her work, please reach out at alex.design.rodriguez@gmail.com

Founder and CEO of Zone In, Kush Mahan approached me earlier this year to work on his mobile app, Zone In. Over the last six months, I've worked very closely with Kush to help him increase engagement and motivate athletes to track their health.

Contribution
UX, UI, Redesign

Timeline
2018-2020

Client
Zone In