A Home Design Journey

We launched three design iterations of the Cosmo Beauty and AI photo editor app's home screen, guided by data, user feedback, and product strategy. Each iteration outperformed its predecessor 💎.

In Collaboration with

Lyrebird Studio

Role

UX Designer, Product Designer

Company size

80+

Duration

3 Months

State

Launched

Team

Product Managers, Mobile Developers

Try it

Overview

This case study outlines the transformation of Cosmo's user experience, exploring various approaches to the home screen that greets users when they open the app.

Due to my privacy commitments, I can't disclose many important parts of the process in my case study.

What is Cosmo

Cosmo Editor is an all-in-one photo editing app that offers a comprehensive set of tools for face, hair, and makeup editing, body reshaping, AI eraser, enhancement, and AI avatars. We are constantly enhancing its features to meet user needs and to establish it as an industry-leading editing app.

The target users are quite broad, with the largest groups being women from Gen X and Gen Y.

Starting point

Cosmo's home screen after it was first launched. This was a balanced and minimal screen, which was answering to the user's and product's needs for a long time. However, adding new features and establishing a hierarchy was difficult. From this point, we needed to add even more features.

Solution

To tackle these challenges, I led a comprehensive redesign:

Streamlined Home Screen: Revamped to improve navigation and feature accessibility, optimizing the carousel to highlight key features while providing direct access to advanced editing tools.
Unified Editing Experience: Merged disparate editing tools into a cohesive interface, collaborating with developers to integrate the modules through a complex process. You can read about this in another case study " 🔗 Enhancing Usability: Cosmo Photo Editor".
User-Centric Focus: Prioritized features and design elements based on user feedback and data, incorporating advanced editing tools.
Iterative Design Process: Employed an agile approach, continuously refining the app through user testing and feedback, ensuring each version met user needs and business goals. We developed 3 iterations of the home page through this process.

Overview

This case study outlines the transformation of Cosmo's user experience, exploring various approaches to the home screen that greets users when they open the app.

Due to my privacy commitments, I can't disclose many important parts of the process in my case study.

What is Cosmo

The target users are quite broad, with the largest groups being women from Gen X and Gen Y.

Starting point

Solution

To tackle these challenges, I led a comprehensive redesign:

Streamlined Home Screen: Revamped to improve navigation and feature accessibility, optimizing the carousel to highlight key features while providing direct access to advanced editing tools.
Unified Editing Experience: Merged disparate editing tools into a cohesive interface, collaborating with developers to integrate the modules through a complex process. You can read about this in another case study " 🔗 Enhancing Usability: Cosmo Photo Editor".
User-Centric Focus: Prioritized features and design elements based on user feedback and data, incorporating advanced editing tools.
Iterative Design Process: Employed an agile approach, continuously refining the app through user testing and feedback, ensuring each version met user needs and business goals. We developed 3 iterations of the home page through this process.

Overview

This case study outlines the transformation of Cosmo's user experience, exploring various approaches to the home screen that greets users when they open the app.

Due to my privacy commitments, I can't disclose many important parts of the process in my case study.

What is Cosmo

The target users are quite broad, with the largest groups being women from Gen X and Gen Y.

Starting point

Solution

To tackle these challenges, I led a comprehensive redesign:

Streamlined Home Screen: Revamped to improve navigation and feature accessibility, optimizing the carousel to highlight key features while providing direct access to advanced editing tools.
Unified Editing Experience: Merged disparate editing tools into a cohesive interface, collaborating with developers to integrate the modules through a complex process. You can read about this in another case study " 🔗 Enhancing Usability: Cosmo Photo Editor".
User-Centric Focus: Prioritized features and design elements based on user feedback and data, incorporating advanced editing tools.
Iterative Design Process: Employed an agile approach, continuously refining the app through user testing and feedback, ensuring each version met user needs and business goals. We developed 3 iterations of the home page through this process.

* For the V2 iteration I worked as a UX designer, designing the general layout, hierarchy, and interaction flows. UI elements, images, and icons were designed by the UI designer in our team.

* For the rest of the project we worked as 2 designers.

Initial Analysis

The carousel occupied significant space but attracted only a small fraction of user clicks (🔗 shouldiuseacarousel.com).
The home page lacked a clear hierarchy, diminishing the visibility of more preferred features.

Collaborative Workshop:

I led a workshop with the entire team, starting with identifying problems collaboratively, proceeding to brainstorming sessions ('Crazy 8s'), and concluding with discussions on success metrics, guided by our product managers.

Benchmarking and Design Exploration:

Conducted an extensive benchmark of 32 apps to understand market standards and innovative approaches and categorized competitors by their home structures.

We explored various design alternatives, seeking a cleaner, more user-friendly solution. We also explored new flow possibilities. I cannot share these alternatives due to privacy commitments.

Decision

The chosen design maintained the carousel but allowed more space for content and direct access to popular tools. This redesign aimed to balance familiarity with improved functionality.

Outcomes of First Iteration

Improved Metrics: The feed-to-edit conversion rate was significantly improved.
User Feedback: Positive reception of the new UX writing and enhanced feature discoverability.
Subscription Growth

Second Iteration: Simplification and Optimization

User Research: Collaborated with a UX researcher on user recruitment methods. This initiative aimed at gathering direct user feedback for further refinements was partially successful.

New Features: Introduction of new features to the homepage to align with the vision of making Cosmo a leading photo editor app.
Refined Design: Further streamlining the homepage to spotlight crucial functionalities.

Third Iteration: A Bold New Approach

Comprehensive Redesign: We implemented a more radical redesign with a different approach based on insights from various user studies and experiments, including UX cam analysis.
Focus on User Behavior: Tailored the design to accommodate users' preferences for using multiple editors and their editing habits across different apps.
Innovative Changes: Introduced changes in the app's structure and flow, enhancing the overall user experience.

* The 4th screenshot above was designed by designers in another team and integrated into the Cosmo App.

Video Recording from the launched product!

Here, you can see the new editor design (photos can't be recorded unfortunately). You can also see the Splash animation, home and share screens I've designed for Cosmo Editor.