What is CakeFlix?
CakeFlix is a subscription-based platform that provides users with online courses in cake decorating, baking, and cake business.
CakeFlix offers several membership plans with varying benefits: Free, Standard, Premium, and Pro. The target audience varies for each of these subscription plans.
The Problem
I browsed the membership plans on Cakeflix's website on my iPhone and noticed that the pricing plan section was difficult to understand. I couldn't easily understand what each plan included. In my opinion, it wasn't designed with a mobile view in mind.
The Goal
The goal of this project was to make the different pricing plans on CakeFlix's website easier to find, navigate, and understand at a glance.
Ingredients Come from Research
Before I began designing the new pricing plan, I researched how other companies utilized this user interface pattern. I took note of how those design examples differed from CakeFlix's pricing plan, and I incorporated captivating elements that some of those plans incorporated.
Through my research and reflections listed in the table above, I noticed a few things and incorporated them into my designs:
- Photos or icons of subscription plans can capture the user's attention, so I illustrated dessert icons for each subscription plan.
- The placement of buttons can create either a smooth or frustrating user experience, so I planned to place the buttons right beneath each plan.
- Mobile view looks much cleaner when each plan is stacked on top of one another, so I reflected this in my mobile design.
- A "Pricing" section is listed in the Navigation bar on several sites that had pricing plans, while Cakeflix's does not. I planned to add a "Pricing" tag into the Navigation bar on the Desktop version so users can easily find subscription plans.
-The "Most Popular" plan is often called out. Cakeflix already did this, so I strengthened what they currently had in their design.
- The placement of buttons can create either a smooth or frustrating user experience, so I planned to place the buttons right beneath each plan.
- Mobile view looks much cleaner when each plan is stacked on top of one another, so I reflected this in my mobile design.
- A "Pricing" section is listed in the Navigation bar on several sites that had pricing plans, while Cakeflix's does not. I planned to add a "Pricing" tag into the Navigation bar on the Desktop version so users can easily find subscription plans.
-The "Most Popular" plan is often called out. Cakeflix already did this, so I strengthened what they currently had in their design.
Using my research and reflections, I began designing the solution.
Designing the Solution: Mobile View Redesign (Before VS After)
Designing the Solution: Desktop View Redesign (Before VS After)
Key Takeaways & Outcomes
- The purpose of this challenge was to make the pricing section easier to understand and more fun to browse, and while I tackled this issue, I also unearthed other issues that I didn't expect to find. Throughout the process, I noticed how CakeFlix did not have a "Pricing" section in their global navigation, even though it generally existed on other sites that had price plans.
- While I achieved my goal of creating a pricing plan page that was easy to navigate, I came across a few obstacles such as laying out the mobile version. Thankfully, my research helped me identify how design patterns can be used to the make web content flow in the redesigned version.
- I realized how designs can vastly change from desktop to mobile view. This sounds like a given, but it's more noticeable when you see a design that is not changed... which is what inspired this project in the first place!
- I learned that giving myself an outline for this case study helped me organize my thoughts and important sections. Defining the problem at the beginning helped propel me forward for the remainder of this project.
- I learned, once again, about the importance of organizing my work. It's one thing to design pages, but it's another thing to find ways to communicate how and why I made those designs.
- Doing thorough user testing and gaining qualitative feedback would have allowed me to get more appropriate insight into what changes would need to be made to these designs.
The Final Designs!
View the scrollable mobile design below:
https://www.figma.com/proto/K2kT0plrlpxpXNYLqIMAh9/CakeFlix-Mobile-Design?node-id=307%3A308&scaling=scale-down&page-id=0%3A1
https://www.figma.com/proto/K2kT0plrlpxpXNYLqIMAh9/CakeFlix-Mobile-Design?node-id=307%3A308&scaling=scale-down&page-id=0%3A1
View the scrollable desktop design below:
https://www.figma.com/proto/uwk1BwM8lZWJfBwgGwVxj1/CakeFlix-Desktop-Design?scaling=scale-down&page-id=0%3A1&node-id=333%3A4
https://www.figma.com/proto/uwk1BwM8lZWJfBwgGwVxj1/CakeFlix-Desktop-Design?scaling=scale-down&page-id=0%3A1&node-id=333%3A4
Credits:
Mobile screen mockup:
<a href="http://www.freepik.com">Designed by zlatko_plamenov / Freepik</a>
Mobile screen mockup:
<a href="http://www.freepik.com">Designed by zlatko_plamenov / Freepik</a>
Desktop screen mockup:
<a href="http://www.freepik.com">Designed by syifa5610 / Freepik</a>
<a href="http://www.freepik.com">Designed by syifa5610 / Freepik</a>
