Redesign Casetify App
This project was to redesign the Casetify app and improve its user experience. Generative Artificial Intelligence (GenAI) was added to the app to provide better alternative results. The app allowed users to customize mobile cases and buy cases based on their designs.
Role
UX/UI Designer
Industry
E-commerce
Tools
Figma, FigJam, Notion
Problem
Casetify has been using the same design for about 5 to 10 years without making any style updates to the app. After using the app, I noticed that it lacks visual appeal, has a complicated user flow, and suffers from inconsistencies in design throughout the app. There are some more significant problems here:
Why
Casetify is a popular e-commerce app that allows users to customize and buy mobile cases. However, the app has not been follow the design in a long time, and it outdated.
Solution
Improve the application's design ability by implementing a design system on the app to maintain the design across the app. Add a GenAI feature to attract customers to use the custom case by prompting the AI to generate images.
Discovery
Heuristic Evaluation
First, I chose to do a heuristic evaluation to understand the app and its flow. My goal is to accomplish the task by purchasing a custom case.
What I found when I used the app was the inconvenience on the app that it didn’t provide me an option to go back or hop to another page. The experience was bad; it took time to understand the buttons and icons and more problem as I listed below:
Problem 1
Doesn’t explain about the product.
First-time users struggle with the app due to unclear homepage guidance and limited navigation options. The static homepage prevents scrolling for more information, while the missing bottom navigation bar restricts user flow. Non-intuitive icons and poor accessibility further hinder the user experience.
Problem 2
No options and informations.
The product details page lacks essential information about the product, leaving users without adequate details to make informed decisions. Key product information is only displayed on the same page after users complete the customization process, which may lead to confusion and frustration. Additionally, the page does not offer users the option to reselect their device or switch to other device variants, further limiting flexibility and customization.
Problem 3
Unable to communicate the design to user.
The customize page lacks clarity in its functions and does not include an onboarding process to help users understand how to use it effectively. The limited actions available for customization make it difficult for users to navigate and utilize the features to personalize their case, resulting in a suboptimal user experience.
Competitor Analysis
How does our competitor work? I did research on how each competitor values them-self to sell the mobile phone cases on the app. I found that both competitors has a good visual and experience. The PopSockets had difficulty buying a custom case because the app isn’t allowed to go back to the home page or find a case to customize. On the other hand, CaseMate is easy to use but doesn’t have a custom feature.
"What about the user, how do they think about the app?"
Exploratory Usability Test
I'm running an exploratory usability test to see how people use the app to buy or customize their mobile phone cases. I want to understand how they navigate, what they enjoy about the experience, and where they might run into any challenges.
Interviewed with 3 participants: None of the participants had ever used the app before. One participant knew the brand, but two others just heard the name.
“I couldn’t understand the icons.”
“I don’t understand how it works.”
“I want to find inspiration before customizing it.”
Define
HOW I COME UP WITH SOLUTION
This project aims to redesign the app. I want to explore how we can make the app more unique and aligned with lasting AI trends. Additionally, I want to investigate how AI can enhance user creativity and expand their options. AI can help users in many ways, from generated content to images and videos; if the app has this feature, it will help expand awareness for both old and new customers.
Solution
Business Goal
To increase user adoption.
Added AI features to follow the technology trend and to provide the user more options to explore more designs to customize their cases. Adding AI features increases the user's adoption of the new features and increases the time on the app.
Design Goal
To increase better user experience of the app.
To improve user experience, I'll simplify task flow with a navigation tab and integrate mobile model selection on the case page. Icons will be updated for consistency, customizable case templates will foster creativity, and an AI image editor will offer enhanced personalization options.
Develop
user flow
The user flow, I planned to make the flow easier but still give users options to explore both inspiration from the community feature and the option for users to select the customize button.
sketches
The purpose of the sketch is to make the app as clean as possible. The purpose is to reduce the cognitive overload before the user uses the customize function, which can cause confusion during the task, where the inspiration for the sketch comes from Mobbin and Refero.
Usability Test with High-FI
The purpose of doing a usability test with high fidelity is that I want them to experience how to customize the new design and how it will function in the app.
The results showed that users had struggled with the customize button, where the color made the user overlook and made them unable to customize the case.
Interviewed from 3 participants who had experience with the app.
“I don’t see the customize button.”
“Where is the AI button to customize?”
“I don’t feel like it a community.”
“I am confused with the product image.”
Updated Design
Delivery
Final Design
Improve the application's design ability by implementing a design system on the app to maintain the design across the app. Add a GenAI feature to attract customers to use the custom case by prompting the AI to generate images.
Design System
Reflection
AI Implementation
This project explored the integration of AI in product design, specifically focusing on creating phone case designs. Through this case study, I have learned about AI-assisted design processes, but also need to improve areas for growth. Moreover, I want to driven my understanding of AI image generation techniques and develop a more structured approach to documenting the technical aspects of AI-driven design workflows. This knowledge will be play a role for optimizing future AI-design collaborations and achieving more refined results.
