SmartSubs
Introduction
SmartSubs is a thoughtfully designed iOS app I created as a freelance designer for a confidential client, focused on simplifying subscription management. With a sleek, intuitive interface, it allows users to track, monitor, and optimize their subscriptions—offering intelligent recommendations on saving money, such as switching to annual plans or discovering more affordable alternatives.
Design Process
- Define
- Research
- Analysis
- Design
- Prototype
- Usability Test
- Developer Handoff
- A/B Testing
- Implementation Plans
The prototype works seamlessly on desktop browsers like Chrome, Safari, or Firefox. For smartphones, use the Figma app for the best experience, as features like the fixed bottom menu may not display properly in a browser.
Define
Duration: 1 week
Collaborated with: Clients and stakeholders to align on user needs, pain points, and project goals
We conducted a series of stakeholder meetings to define the scope of the app and craft the problem statement. These sessions helped align the design direction with user pain points, financial management challenges, and overarching business objectives. The focus was on identifying actionable insights that informed the product’s features and functionality. Clear KPIs were established to measure the success of the app and guide the design process from conception to delivery.
Problem Statement
How might we create an intuitive, centralized platform that helps users track and optimize their recurring payments, empowering them to save money and avoid unnecessary charges?
Key Objectives
- User Adoption: Achieve at least 1,000 downloads within the first month.
- Engagement: Ensure 50% of users actively input at least three plans within their first session.
- Cost Savings: Help users save an average of $15 per month by identifying better payment options.
- Satisfaction: Target a post-launch satisfaction score of 4.6/5 or higher in user surveys.
- Retention: Maintain a 75% weekly retention rate during the first three months.
Research
Duration: 2 weeks
Collaborated with: Clients, stakeholders, and potential end-users
To lay a strong foundation for SmartSubs, the research phase focused on understanding the market landscape and the specific needs of users managing recurring expenses. By combining insights from competitive analysis and direct user feedback, we identified critical pain points and opportunities to design a product that resonates with the target audience.
Market Research
The research began with a detailed analysis of existing apps and services focused on recurring payment management. We evaluated competitors like Rocket Money, Mint, and Bobby, examining their features, strengths, and gaps. Key insights revealed that while competitors offered tracking and reminders, many lacked intuitive interfaces or actionable cost-saving suggestions. This analysis highlighted an opportunity to stand out by emphasizing simplicity, personalization, and financial empowerment.
User Research
This centered on understanding user needs and building empathy through a variety of methods. We conducted in-depth interviews and surveys to gather firsthand insights, focusing on user preferences and pain points in the shopping experience. Additionally, empathy mapping and user journey mapping helped us visualize user emotions and behaviors throughout their interaction with the product. Tools like affinity diagrams and card sorting allowed us to organize and analyze this data, ensuring the final design reflected users’ expectations and provided intuitive, AI-driven solutions tailored to their needs.
Surveys
Method:
The survey was distributed to a diverse group of users through email and social media channels. The questionnaire included both multiple-choice and open-ended questions to gather quantitative and qualitative data on user behavior, frustrations, and preferences related to managing subscriptions.
Key Findings:
- Subscription Management: 70% of users reported managing 5+ recurring payments, and many struggled with tracking due dates and charges.
- Pain Points: 60% cited “difficulty managing multiple subscriptions” as a major frustration, with 50% also mentioning “hidden or unclear charges.”
- Preferences: 65% of respondents showed interest in automatic reminders and consolidated overviews for better subscription management.
Interviews
Method:
One-on-one interviews were conducted with users who had previously completed the survey. These in-depth interviews allowed for open-ended questions to uncover deeper insights into their motivations, emotions, and challenges regarding subscription management as well as their ideal features.
Key Insights:
- User Motivations: Users expressed feeling overwhelmed by the sheer volume of subscriptions and often forgetting about hidden fees or trial periods.
- Trust Issues: Some users expressed concerns about privacy, hesitant to trust third-party apps with sensitive financial information.
- Desirable Features: There was significant interest in predictive tools for identifying cost-saving opportunities (e.g., suggesting cheaper plans or downgrades).
Affinity Diagramming
Method:
The insights from both the survey and interviews were analyzed and organized into an affinity diagram during a collaborative workshop with stakeholders. We used sticky notes to group similar themes, which were then clustered to identify broader patterns in user needs and pain points.
Key Themes Identified:
- Subscription Management & Organization: Users want a centralized dashboard that clearly displays all active subscriptions and upcoming renewals.
- Cost Optimization: Many users showed interest in recommendations for cheaper alternatives or downgrades based on usage patterns.
- Privacy & Trust Concerns: Users are concerned about sharing sensitive financial data with third-party apps, highlighting the need for secure data practices.
- Pain Points & Frustrations: Users are overwhelmed by managing multiple subscriptions and are frustrated by hidden charges and unclear billing practices.
- Alerts & Automation: Users favored features that would automatically remind them of due dates or renewals, with a preference for actionable notifications.
Analysis
Duration: 1 week
Collaborated with: None, worked independently
We synthesized the insights gathered during the research stage to strategically plan how to address user needs effectively. This involved developing detailed user personas to capture the diverse experiences of our target audience. We mapped out high-level user flows and created a sitemap to visualize the product’s structure. Additionally, we considered the technologies needed for implementation and established a comprehensive project roadmap, complete with milestones, to ensure a clear path forward as we transitioned into the design phase.
User Personas
1. Brian Lee, the Tech-Savvy Entrepreneur
2. Sarah Martinez, the Family-Oriented Homemaker
“I need a tool that integrates with the apps I already use. I don’t want to manually track each subscription—I’d prefer a solution that does the heavy lifting for me.”
“With so many subscriptions for the kids’ apps and family services, I feel overwhelmed. I need an easy way to see everything in one place so I don’t miss any renewals.”
Personal Background:
- Age: 37
- Relationship Status: In a relationship
- Education: Master’s in Computer Science
- Location: San Francisco, California
Professional Background:
- Job: Freelance Web Developer
- Salary: $100,000 annually
User Environment:
- Brian manages subscriptions on his laptop during work and on his phone while traveling or at the gym, relying on tech to streamline his life.
Psychographics:
- Highly analytical and prefers systems that integrate into his workflow.
- Enjoys experimenting with new apps and tech solutions.
- Is constantly searching for tools that increase productivity and simplify life.
- Values privacy and security when using third-party apps for financial tracking.
End Goals:
- Streamline subscription management with automated alerts and smart recommendations.
- Optimize subscription services to prevent overspending or missed savings opportunities.
Personal Background:
- Age: 40
- Relationship Status: Married, with two children
- Education: High School Graduate
- Location: Suburban area in Michigan
Professional Background:
- Job: Part-time retail associate
- Salary: $40,000 annually
User Environment:
- Sarah uses her phone at home to manage household subscriptions, like streaming and meal kits, often during dinner prep or evening downtime.
Psychographics:
- Struggles with time management and organization.
- Frequently looks for ways to save money while keeping the household entertained.
- Values family-friendly solutions that are easy for everyone to use.
- Prefers visually simple apps with clear, actionable instructions.
End Goals:
- Keep track of subscriptions and their costs, ensuring the family gets value for money.
- Stay on top of renewal dates to avoid surprise charges and reduce unnecessary services.
3. Alessandra Rossi, the Budget-Conscious Professional
4. Ahmed Reza, the Organized Multitasker
“I often forget when my subscriptions renew and end up paying for things I barely use. I want a tool that can remind me and help me prioritize my spending better.”
“I juggle work and personal subscriptions across different platforms—I need a tool that brings everything together and keeps me within budget effortlessly.”
Personal Background:
- Age: 28
- Relationship Status: Single
- Education: Bachelor’s in Business Administration
- Location: Milan, Italy
Professional Background:
- Job: Digital Marketing Specialist at a fashion e-commerce brand
- Salary: €40,000 annually
User Environment:
- Alessandra manages her subscriptions on her phone during commutes or while relaxing at home, using financial apps for budgets and renewal notifications.
Psychographics:
- Frustrated by unexpected subscription charges and overspending.
- Seeks ways to optimize her finances without sacrificing her lifestyle.
- Enjoys trying out new apps but prefers simple, streamlined interfaces.
- Often struggles with keeping track of her multiple subscriptions.
End Goals:
- Easily track subscriptions and optimize her spending.
- Set automatic reminders and identify opportunities to save by downgrading or canceling unused subscriptions.
Personal Background:
- Age: 34
- Relationship Status: Married, no children
- Education: Master’s in Software Engineering
- Location: Berlin, Germany
Professional Background:
- Job: Senior Software Engineer
- Salary: €80,000/year
User Environment:
Ahmed uses his desktop for work-related subscriptions and his phone at home for personal services like streaming and food delivery.
Psychographics:
- Tech-savvy and loves exploring productivity-enhancing tools.
- Values apps that simplify complex tasks.
- Keen on managing personal and professional finances efficiently.
- Appreciates apps that offer multilingual options and regional adaptability.
End Goals:
- Consolidate and streamline subscription management for both personal and professional services.
- Set budget controls to avoid overspending.
- Get notified about upcoming payments and unused subscriptions.
Analysis
Duration: 1 week
Collaborated with: None, worked independently
We synthesized the insights gathered during the research stage to strategically plan how to address user needs effectively. This involved developing detailed user personas to capture the diverse experiences of our target audience. We mapped out high-level user flows and created a sitemap to visualize the product’s structure. Additionally, we considered the technologies needed for implementation and established a comprehensive project roadmap, complete with milestones, to ensure a clear path forward as we transitioned into the design phase.
User Personas
1. Brian Lee, the Tech-Savvy Entrepreneur
“I need a tool that integrates with the apps I already use. I don’t want to manually track each subscription—I’d prefer a solution that does the heavy lifting for me.”
Personal Background:
- Age: 37
- Relationship Status: In a relationship
- Education: Master’s in Computer Science
- Location: San Francisco, California
Professional Background:
- Job: Freelance Web Developer
- Salary: $100,000 annually
User Environment:
- Brian manages subscriptions on his laptop during work and on his phone while traveling or at the gym, relying on tech to streamline his life.
Psychographics:
- Highly analytical and prefers systems that integrate into his workflow.
- Enjoys experimenting with new apps and tech solutions.
- Is constantly searching for tools that increase productivity and simplify life.
- Values privacy and security when using third-party apps for financial tracking.
End Goals:
- Streamline subscription management with automated alerts and smart recommendations.
- Optimize subscription services to prevent overspending or missed savings opportunities.
2. Sarah Martinez, the Family-Oriented Homemaker
“With so many subscriptions for the kids’ apps and family services, I feel overwhelmed. I need an easy way to see everything in one place so I don’t miss any renewals.”
Personal Background:
- Age: 40
- Relationship Status: Married, with two children
- Education: High School Graduate
- Location: Suburban area in Michigan
Professional Background:
- Job: Part-time retail associate
- Salary: $40,000 annually
User Environment:
- Sarah uses her phone at home to manage household subscriptions, like streaming and meal kits, often during dinner prep or evening downtime.
Psychographics:
- Struggles with time management and organization.
- Frequently looks for ways to save money while keeping the household entertained.
- Values family-friendly solutions that are easy for everyone to use.
- Prefers visually simple apps with clear, actionable instructions.
End Goals:
- Keep track of subscriptions and their costs, ensuring the family gets value for money.
- Stay on top of renewal dates to avoid surprise charges and reduce unnecessary services.
3. Alessandra Rossi, the Budget-Conscious Professional
“I often forget when my subscriptions renew and end up paying for things I barely use. I want a tool that can remind me and help me prioritize my spending better.”
Personal Background:
- Age: 28
- Relationship Status: Single
- Education: Bachelor’s in Business Administration
- Location: Milan, Italy
Professional Background:
- Job: Digital Marketing Specialist at a fashion e-commerce brand
- Salary: €40,000 annually
User Environment:
- Alessandra manages her subscriptions on her phone during commutes or while relaxing at home, using financial apps for budgets and renewal notifications.
Psychographics:
- Frustrated by unexpected subscription charges and overspending.
- Seeks ways to optimize her finances without sacrificing her lifestyle.
- Enjoys trying out new apps but prefers simple, streamlined interfaces.
- Often struggles with keeping track of her multiple subscriptions.
End Goals:
- Easily track subscriptions and optimize her spending.
- Set automatic reminders and identify opportunities to save by downgrading or canceling unused subscriptions.
4. Ahmed Reza, the Organized Multitasker
“I juggle work and personal subscriptions across different platforms—I need a tool that brings everything together and keeps me within budget effortlessly.”
Personal Background:
- Age: 34
- Relationship Status: Married, no children
- Education: Master’s in Software Engineering
- Location: Berlin, Germany
Professional Background:
- Job: Senior Software Engineer
- Salary: €80,000/year
User Environment:
Ahmed uses his desktop for work-related subscriptions and his phone at home for personal services like streaming and food delivery.
Psychographics:
- Tech-savvy and loves exploring productivity-enhancing tools.
- Values apps that simplify complex tasks.
- Keen on managing personal and professional finances efficiently.
- Appreciates apps that offer multilingual options and regional adaptability.
End Goals:
- Consolidate and streamline subscription management for both personal and professional services.
- Set budget controls to avoid overspending.
- Get notified about upcoming payments and unused subscriptions.
User Flow
This outlines the key steps users take to manage their subscriptions, from logging in to optimizing their spending. It includes critical decision points that guide users through adding, managing, and receiving reminders for their subscriptions, ensuring an intuitive and streamlined experience.
App Architecture
The design framework that governs how different elements of an app interact, focusing on efficiency, maintainability, and adaptability as it scales.
Design
Duration: 3 weeks
Collaborated with: Product Manager and Developers
I worked closely with the product manager and developers to translate research insights into an intuitive and visually appealing user interface. Moving from wireframes to high-fidelity designs, we iterated on the user experience and interface, ensuring alignment with business objectives and technical feasibility for a smooth implementation.
Conceptual Blocking
Focuses on identifying and defining the key areas and sections of the interface to establish a clear and functional layout structure.
Basic Wireframes
Expands on the conceptual blocks by creating low-fidelity wireframes, introducing basic functional components and outlining the core features of the interface.
Refined Wireframes
Enhances the basic wireframes with additional detail, such as more specific content placement, user interface elements, and clearer navigation paths.
Mid-Fidelity Design
Introduces a basic color scheme and typography choices to provide a more refined version of the interface, giving an early sense of the visual direction.
High-Fidelity UI Design
Finalizes the design with precise colors, typography, iconography, and polished visual elements, resulting in a complete, ready-to-implement user interface.
The prototype works seamlessly on desktop browsers like Chrome, Safari, or Firefox. For smartphones, use the Figma app for the best experience, as features like the fixed bottom menu may not display properly in a browser.
App Icon
The SmartSubs logo and app icon are designed as a cohesive, minimalist visual element that clearly represents subscription management. With its bold, recognizable design and color scheme, the icon stands out across devices, reflecting the app’s mission to simplify and streamline subscription tracking. The clean design ensures versatility and reinforces the app’s goal of giving users clear control over their subscriptions.
Design System
The SmartSubs Design System is a comprehensive framework designed to ensure consistency, accessibility, and efficiency across the product. It consists of foundational principles like typography, color, and spacing, a library of reusable components for building interfaces, and design patterns to address common challenges, all working together to create a seamless user experience.
Foundation
The essential building blocks of the design system, encompassing typography, colors, buttons, and layout principles. These core elements establish a consistent visual language and provide the framework for building all components.
Components
From buttons to input fields, Components ensure the user interface remains cohesive and intuitive while enabling efficient design and development workflows.
Patterns
Scalable and reusable solutions are crafted to tackle common design challenges, ensuring workflows, interactions, and layouts remain consistent and intuitive.
Design Tokens
These vital components—colors, spacing, and fonts—ensure a beautiful, consistent experience from start to finish, enabling developers to implement designs with ease. I started by creating variables in Figma, which I then converted into tokens using Tokens Studio.
Brand Tokens
Specific colors and styles that represent the brand identity. As an example:
Token: { “color”: { “grayscale”: { “100”: { “value”: “#c4c4c4”, “type”: “color”
Variable: colorGrayscale100
Usage: Used for dividers, and inactive text fields to visually distinguish sections or inactive states without drawing too much attention.
Purpose: It maintains subtle separation and clarity while supporting a clean, minimalist interface on white backgrounds.
Alias Tokens
User-friendly names for design elements, often referring to brand tokens for color specifications. As an example:
Token: { “error”: { “300”: { “value”: “{color.red.300}”, “type”: “color”
Variable: colorError300
Usage: Used to indicate error states in UI components, such as error messages or alerts, drawing user attention to issues that need resolution.
Purpose: It communicates urgency and importance, helping users quickly identify and address errors within the application.
Mapped Tokens
Standardized color shades linked to specific design roles or components, derived from alias tokens. As an example:
Token: { “text”: { “heading 1”: { “value”: “{neutral.500}”, “type”: “color”
Variable: textHeading1
Usage: Used for the text of heading 1, ensuring that it stands out prominently against background elements to capture users’ attention.
Purpose: It establishes a visual hierarchy, enhancing readability and guiding users through the content effectively.
Responsive Tokens
User-friendly names for design elements, often referring to brand tokens for color specifications. As an example:
Token: { “font-size”: { “heading”: { “h2”: { “value”: “18px”, “type”: “dimension”
Variable: fontSizeHeadingH2
Usage: Used to create a visually distinct hierarchy in text, ensuring that secondary headings are easily identifiable within the content.
Purpose: It enhances readability and guides users through the information structure, helping them understand the relationship between different sections of the content.
Usability Test
Duration: 1 week
Collaborated with: None, worked independently
Overview
The usability test was conducted with 10 users to evaluate SmartSubs’ ease of use, interface clarity, and overall user experience. Participants were asked to complete key tasks, such as adding subscriptions, viewing spending, and using the app’s recommendation features, while being observed for any friction points.
Objectives
- To assess how easily users can navigate the app and complete basic tasks without confusion.
- To identify any usability issues or pain points related to the app’s core features, such as subscription management and spending insights.
Outcome
- 90% of users were able to complete the tasks successfully, with minimal issues, indicating that the app’s navigation was intuitive.
- 40% of users struggled with understanding subscription recommendations, highlighting the need for clearer instructions and flow improvements in that area.
Developer Handoff
Duration: 1 week
Collaborated with: Developers, Product Managers, and QA Engineers
I worked closely with the development team to ensure the design vision was accurately translated into the final product. I provided detailed design specifications, assets, and interaction guidelines, ensuring a smooth implementation and a high-quality user experience.
Design Files and Documentation
- Organized Figma Files: Ensure files are labeled and structured for easy navigation, with clear layers and frames to show both the UI and UX flows.
- Style Guide: Include Figma’s typography, color codes, and spacing rules, as well as UI states (e.g., hover, active) and interaction details.
- Design Tokens/Variables: Use Figma’s design tokens or variables for consistent UI elements across screens and platforms.
Design System
- UI Components: Maintain reusable components (buttons, cards, forms) in Figma’s component library for consistency across designs.
- Interaction Patterns: Include detailed guidelines for component behaviors, such as hover effects or modal transitions.
User Experience and Accessibility Documentation
- UX Flow Documentation: Provide clear written documentation in Figma explaining user flows, interactions, and the overall experience logic.
- Accessibility Notes: Mark accessibility details in Figma, such as color contrast and spacing requirements, ensuring that designs are accessible.
Interactive Prototypes
- Clickable Prototypes: Share interactive prototypes in Figma that demonstrate user flows and UX interactions.
Specifications and Annotations
- Pixel-Perfect Specs: Add measurements, spacing, and sizing directly within Figma for developers to inspect with the “Inspect” tool.
- Responsive Design: Define breakpoints and layouts directly in Figma for different screen sizes (mobile, tablet, desktop).
Handoff Tools and Support
- Figma Inspect: Developers can use Figma’s “Inspect” mode to access CSS, measurements, and assets for easy implementation.
- Exported Assets: Export optimized images (SVG, PNG) directly from Figma for web and mobile use.
- Storybook: Utilize Storybook to maintain a living style guide and ensure consistent design components across the project.
- Collaboration: Maintain continuous communication with developers to address any questions or clarifications during the handoff, ensuring a smooth implementation process.
A/B Testing
Collaborated with: Product Manager, Development Team, and Data Scientists to design and implement the A/B tests, ensuring seamless execution and thorough analysis of the results.
To optimize the SmartSubs user experience, we conducted two A/B tests, each focusing on different aspects of the app’s design—one testing light mode versus dark mode and the other evaluating the impact of simplified navigation versus feature-rich navigation.
A/B Test 1: Light Mode vs Dark Mode
Objective
The goal of this test was to compare user preferences and behaviors between the light mode (Version A) and dark mode (Version B) of the SmartSubs app. We aimed to assess which mode would lead to higher user engagement, better readability, and improved overall user satisfaction, as well as to determine whether users tend to engage more with one mode over the other in terms of task completion and interaction.
Testing Methodology
We randomly assigned 100 participants to one of the two versions of the app (Light Mode or Dark Mode). Each participant used the app for 15 minutes, during which we monitored metrics such as user engagement (time spent on the app), interaction rate with key features (e.g., subscription reminders, payments), and subjective user satisfaction, collected through a post-test survey.
Outcome
- Light Mode (Version A): Users in light mode showed a 15% higher interaction rate with subscription management features and reported a 10% higher satisfaction rate in terms of readability and ease of use.
- Dark Mode (Version B): Users in dark mode experienced fewer eye strain reports, with a 20% higher satisfaction rate when it came to comfort during prolonged use.
- Conclusion: While light mode led to slightly higher interaction rates, dark mode was favored for longer sessions due to reduced eye strain. Based on these results, we recommended implementing a user-driven preference setting, allowing users to choose between light and dark modes based on their comfort.
A/B Test 2: Simplified Navigation vs. Feature-Rich Navigation
Objective
The objective of this A/B test was to assess the impact of a simplified navigation structure (Version A) versus a more complex, feature-rich navigation (Version B) on user engagement, task completion speed, and satisfaction with the app’s usability.
Testing Methodology
We divided 150 participants into two groups: one using the simplified navigation (Version A) and the other using the feature-rich navigation (Version B). Over a 20-minute session, we tracked task completion times (e.g., managing subscriptions, reviewing spending reports), user errors, and overall task satisfaction through direct feedback and usability surveys.
Outcome
- Simplified Navigation (Version A): Users completed tasks 25% faster and with 18% fewer errors compared to the feature-rich version. They also reported a 30% higher satisfaction rate with the app’s ease of use and navigation flow.
- Feature-Rich Navigation (Version B): Although the feature-rich version led to more feature exploration, users took longer (15% more time) to complete tasks and reported a 12% higher frustration level due to information overload.
- Conclusion: The simplified navigation structure (Version A) resulted in faster task completion, higher user satisfaction, and fewer errors, suggesting it is a more efficient choice for the core user experience. Based on these findings, the simplified structure was prioritized, though certain advanced features were kept accessible through an easily discoverable menu for power users.
Implementation Plans
Collaborated with: Product Manager, Development Team, and Data Scientists to synthesize findings and strategize for the next phase.
Following the A/B test outcomes, the app will launch with light mode as the default and a simplified navigation structure, ensuring a user-friendly experience from the outset. As we prepare for the upcoming launch, the focus will be on refining onboarding flows, resolving any usability issues, and conducting final quality assurance tests to deliver a polished product. Post-launch, we plan to gather user feedback to guide iterative improvements.
