Project Overview 📃
Challenge
An existing project that offered an SDK for mobile subscription analytics had been fully developed but was not receiving sufficient positive feedback from potential users. It became evident that the team had designed the interface for internal needs, which were narrowly targeted and technical. Common users, who were the intended audience, couldn’t comprehend it.
Objectives
- Review and refine dashboard UI
- Analyze user journey, enhance overall UX
- Develop visual style for brand presentation
Solutions
Collaborating with the product manager, we identified project personas and found that 75% of potential users lacked technical expertise. The primary focus became simplifying the project for effortless out-of-the-box usage.
User Interface: I aimed to replace the schematic and unappealing interface with a new light style, enriched with vibrant accents and spacious design.
User Experience: I curated a feature list, organizing it logically into groups and establishing seamless transitions between them.
Visual Style: To imbue the project with a friendlier ambiance, I crafted a mascot, a series of illustrations featuring this character, and a set of general illustrations for use in blogs and social networks.
Project Type
Web dashboard for subscription analytics
Project Scope
- User journey analysis & UX
- UI design
- Illustrations
Tools
- Miro
- Adobe XD
- Adobe Illustrator
Team
Small (5-15 members)
Country
🇸🇬 Singapore
Brand Refresh ✨
Before
The initial design, crafted by the developers who pioneered the project, strictly adhered to the Material Design framework.
However, despite following the framework’s recommendations, it exuded a somber mood due to excessive use of dark backgrounds, low contrast, and disproportionate spacing between elements.
Since it was initially designed for internal use, the interface required extensive configuration and a deep understanding of platform logic to start providing valuable data analytics.
After
While keeping the brand palette I proposed eliminating dark backgrounds to prevent them from diverting attention from crucial content.
To enhance readability, I replaced elevated material cards with a subtle outline and incorporated white space between widgets.
Instead of large output fields requiring manual configuration, I introduced a set of pre-configured widgets organized by data type, offering users a comprehensive view of their performance.
User Journey and UX ✈
Personas
Together with the product manager, we identified four target personas and discovered that three of them lacked technical experience. This insight highlighted the need for a solution that works seamlessly from the start, eliminating the necessity for initial configuration. Understanding our users’ capabilities allowed us to focus on creating an intuitive and user-friendly interface and analytics dashboards.
User Onboarding
Based on these personas, we understood that the primary pain point was the experience of adding the first app to the platform, as it required not only account setup but also a complicated configuration of App Store and Play Store keys. Without proper configuration, the platform wouldn’t be able to receive data to process and represent, rendering it ineffective.
To address this, I suggested enhancing the step-by-step onboarding process to guide users through all the required setup steps, ensuring a smoother and more accessible experience.
Data Mapping and Insights
To maximize the platform’s analytical capabilities, I designed a data map that grouped all the data the platform can analyze. This involved categorizing user metrics, subscription trends, and app performance indicators into logical groups for easier access and interpretation. Additionally, I identified opportunities for the platform to suggest supplementary data to users, including predictive analytics and personalized recommendations.
By doing so, the platform not only reports on current performance but also provides actionable insights to help users make informed decisions. Furthermore, I conducted an in-depth analysis to identify weak points and potential gaps in the data. This proactive approach ensures that users are aware of areas needing attention and can take steps to address them, ultimately leading to more robust and effective subscription management.
User Journey
Building a seamless user journey was critical to addressing the challenges identified through our personas. We mapped out each step users would take from signing up to successfully using the platform, focusing on simplifying complex processes. By breaking down the user journey into clear, manageable stages, we aimed to eliminate friction points and enhance the overall user experience. This involved creating intuitive navigation, providing contextual help, and ensuring that users received immediate feedback and guidance throughout their interaction with the platform. Our goal was to create a fluid and engaging journey that empowered users, regardless of their technical expertise.
User Interface Highlights ⭐
Dashboard
The development followed the Agile methodology, allowing us to adapt and refine our approach based on continuous feedback and iterative improvements. Over three major iterations, we crafted an analytics dashboard that encapsulates all the essential features identified as important for the majority of our target audience.
This iterative process ensured that the dashboard provides a comprehensive view of both current and strategic data representations while offering seamless access to all key features of the platform. Additionally, we integrated gentle monetization strategies by giving users a peek at premium features, encouraging them to upgrade and test these features with their own data. This approach balances user experience with strategic upselling, driving engagement and potential revenue growth.
Analytics
In addition to single-value info blocks and tables, I created various charts for a visually appealing representation of analytics. These included bar charts, donut charts, and both simple and complex line charts. Each type of chart was carefully chosen to best represent specific metrics, providing clear and intuitive insights. For example, bar charts were used for comparing discrete categories, donut charts for showing proportions, and line charts for tracking changes over time. This thoughtful selection ensures that users can easily interpret the data and make informed decisions based on accurate visualizations.
Innovative Solutions
In addition to data analytics this project includes several notable breakthrough solutions designed to enhance user experimentation and customization. Among these are the Visual Constructor for the Welcome Screen, the Paywall, and In-app messages. These features empower users to tailor their app experiences without needing any coding expertise.
One of the challenging tasks I fulfilled was designing a form that allows users to configure parts of their app effortlessly. Users can make adjustments and immediately see the results in a live preview. This user-friendly approach ensures that even those without technical backgrounds can personalize their apps effectively, enhancing overall satisfaction and engagement with the platform.
Design Process 💻
Platform Screens
To cover every aspect of the app, I designed over 400 unique screens, illustrating platform features, various states of blocks and forms, errors and user notifications, and popups. By providing detailed layouts for each scenario, I made it easier for developers to implement the design, reducing guesswork and enhancing the overall efficiency of the development process.
Responsive Mockups
To ensure a consistent and seamless user experience across all devices, each of designed screens was reproduced in four basic sizes: desktop, tablet landscape, tablet portrait, and mobile. This approach allowed me to represent specific interface behaviors for each device, ensuring that the design adapted smoothly to different screen sizes and orientations.
A Friendly Mascot 🐈
To add warmth and approachability to the interface I introduced a mascot in the form of a chunky, friendly female cat named Muffin.
This delightful character makes occasional appearances throughout the interface, assumes funny poses in advertising materials, and leaves playful paw prints in areas deserving extra attention, adding a touch of whimsy to the user experience.
Furthermore, within the experimental feature, this cute feline serves as the face of an artificial intelligence system. This system is intricately designed to provide users with personalized recommendations on revenue growth strategies and other essential parameters, adding a dynamic layer of interaction and guidance to the platform.
Samples of Character Illustrations
Screens Featuring Muffin the Cat
Content Strategy and SEO Enhancement 📈
To increase organic traffic and improve SEO, team planned to release blog posts every week. To support this initiative, I created a set of blog illustrations using an extended brand palette of complementary colors. These illustrations not only enhance the visual appeal of the posts but also maintain brand consistency.
Regular blog post illustrations focus on analytics aspects or depict humans interacting with analytics tools, making the content more relatable and engaging. For company feature announcements and significant blog posts, I included our mascot character to highlight key information and create a more memorable connection with the audience. This strategic use of visuals aims to boost engagement and drive more traffic to the platform.
