Plan Ahead

In physical architecture, one would never dare begin construction on a building without a fully fleshed-out set of drawings and plans that have been iterated on until client stakeholders, design and construction teams were as confident as they could be about the success of the build. Every anticipated detail, down to the light switch, would be designed on paper before a single shovel ever hit the ground.

Discovery is Everything

The process always began with discovery of a full set of requirements for the build. Let’s take a commercial building as an example. At the highest level, before beginning design, the design team had to understand things like:

• What’s the purpose of the building?
• How will the building be interacting with the site (i.e., soil composition, proximity to roads, entry points, existing infrastructure)?
• What are the kinds of main spaces people will be occupying?
• How will people need to move between spaces?
• What are the supporting spaces like kitchens, bathrooms, etc., and what is their optimal location?

Avoid Expensive Mistakes

If the General Contractor were to want to show up at the site on day one without blueprints and begin constructing a bathroom or a conference room without any idea of how the rest of the building were going to come together, we’d be hiring a new contractor.

Designing and building software ideally is no different. Though there is an initial upfront cost and effort in discovery and design, the results are hopefully by this time in this article clearly worth the price.

Blueprint your UX Design

The first step is to gather the requirements for the entire application at a high level and to truly understand all of the potential influences such as the tech stack that will be used. The types of users will be identified as well as where they will spend time in the app and how they will want to interact with the app. Then, we try to understand the kinds of tasks and flows that these users will be performing using the software, without implying any UI elements. This then informs the design of an ideal UX architecture. The UX architecture is in essence a blueprint/map of all the screens, and a flow diagram of how users will navigate between them.

Precision by Prototyping

Once the site blueprint is created, detailed wireframes and prototypes can quickly be produced and iterated on. UI/UX design has become supported by incredible tools like Figma that allow for rapid iterative design and prototyping.  This means that we can have an entire set of UI/UX drawings for a piece of software with incredibly detailed plans – down to the light switch – before building. We can even understand how users will move throughout the digital “space” through prototyping. We can get our prototypes to simulate user flows with such realism that it can be difficult to tell the difference between our prototypes and actual code.

The beauty of this process is that we can take a prototype of a full user flow to a room full of stakeholders that has taken only a couple of weeks to create and get feedback that can be incorporated almost real-time. By the time we hand the designs over to development to be built, we have a very good idea of how the product will look, feel, and flow with feedback from real users.

Build as you Design

Once the full design blueprint has been created via UX architecture and the first main flows designed, prototyped, and locked, development can begin. We don’t need to wait until the entire piece of software has been designed. Our design strategy is modular, meaning that the components that we design and use for the first main flows are ideally reused throughout the software. This allows for construction to occur in a modular fashion in building blocks, and development can reuse those blocks throughout the application. This benefit is threefold. First, it saves time and money on development. Second, it saves time and money on design as designers can similarly create components in Figma and reuse them. Finally, it creates a consistent and more intuitive user experience where users don’t need to learn a new set of tools or way of doing things for each work area that they are in.

How unosquare can Help

Our Design and Development teams specialize in iterative design processes that ensure your project is properly thought out, planned and designed before “a single shovel hits the ground”. Our modular design strategy helps you optimize costs, accelerate development and create a seamless, intuitive user experience. Whether you’re at the blueprint stage or much further along, our expert teams can jump in and get you where you need to go.

Ready to Bring Your Project to Life? Speak to our experts today to take your project from blueprint to reality.

Given this growth, it’s crucial to develop financial web applications correctly. Despite many successful implementations, there are still nine common pitfalls in financial web applications, ranging from poor user experience to security and scalability issues. This blog explores these pitfalls and offers strategies to avoid them.

Security Vulnerabilities

Security is paramount in financial applications. Unfortunately, even major institutions have faced breaches. For example, in May 2019, First American Financial Corp exposed 885 million credit card applications due to a business logic flaw on their website.  Security threats like phishing, ransomware, malware, password guessing, DDoS attacks, undiscovered data leaks, and insecure API configurations are common.

To avoid these security pitfalls:

While the security landscape is ever evolving and more complex to manage, there are some fundamental best practices to deploy to limit security vulnerabilities. A few of these are listed below:

1. Implement end-to-end encryption to protect data during transmission.
2. Conduct regular security audits and penetration testing to identify and mitigate vulnerabilities.
3. Use multi-factor authentication (MFA) to add an extra layer of security.
4. Provide employee training on security best practices to prevent internal errors that could lead to data leaks.

Poor User Experience (UX)

A poor user experience can lead to user frustration, abandonment, and reduced conversion rates. According to Google, 57% of users won’t recommend a business with a poorly designed mobile site.  Common UX issues include biometric login failures, app freezing, and inadequate reporting. For instance, some banking apps have issues with checking deposits and providing total balance visibility.

To improve UX:

1. Conduct user research and usability testing to understand user needs and pain points.
2. Read and respond to reviews to address user concerns promptly.
3. Ensure intuitive and consistent navigation to enhance ease of use.
4. Implement responsive design to ensure the app works well on all devices.
5. Regularly update the design based on user feedback to keep the app relevant and user-friendly.

Lack of Accessibility

Accessibility is a big issue. According to the American Bankers Association, 73% of Americans access their bank accounts online, BUT 27% of adults have disabilities that prevent them from doing so.  And, more than half of all banks fail to meet customer needs due to a lack of digital accessibility.

To enhance accessibility:

The best way to get started is to consider the needs of users and follow these basic principles and guidelines when designing your application:

1. Follow WCAG guidelines to make web content accessible to people with disabilities.
2. Ensure color contrast meets accessibility standards for readability.
3. Provide accessible login portals that do not rely solely on cognitive function tests.
4. Include semantic markup for better navigation by assistive technologies.
5. Provide alternative text for images to convey information through screen readers.
6. Ensure keyboard navigability for users who cannot use a mouse.
7. Test with accessibility tools and real users with disabilities to identify and fix issues early.

Inadequate Performance and Scalability

Performance issues like slow load times and downtime during peak usage can significantly impact user experience. A one-second delay in page load time can lead to a 7% reduction in conversions .

To improve performance and scalability:

1. Optimize server and client-side performance to ensure fast load times.
2. Utilize content delivery networks (CDNs) to reduce latency.
3. Implement scalable infrastructure using cloud services to handle variable loads.
4. Regularly monitor and stress test the application to identify and address performance bottlenecks.
5. Use tools like Pagespeed Insights and GTMetrix to measure your website performance

Complex or Lengthy Onboarding Processes

Complex onboarding processes can deter new users. Research by Deloitte revealed that a whopping 40% of consumers have abandoned a bank onboarding process. When asked the most common culprit, users cited overly time consuming paperwork and too many personal questions. By contracts, according to Invesp, companies who optimize and simplify their onboarding process can see a 15% increase in user engagement and retention.

To streamline onboarding:

Some basic guidelines to streamline onboarding are listed below. But don’t go this alone.  Our UI/UX designers at Unosquare can help you understand user drop-off and design an optimal onboarding experience. The guidelines are to:

1. Gain insights into customer onboarding behavior to identify friction points.
2. Simplify registration forms and processes by removing redundant steps.
3. Offer social login options to speed up the process.
4. Provide clear instructions and guided tutorials to assist users.
5. Allow users to save progress and return later to complete the process at their convenience.

Insufficient Customer Support

Poor customer support can significantly impact user satisfaction, with 56% of customers ceasing to use a financial service due to inadequate support.

To enhance customer support:

1. Offer multiple support channels such as chat, email, and phone.
2. Implement AI-powered chatbots for immediate assistance.
3. Provide a comprehensive FAQ and knowledge base to help users find answers quickly.
4. Regularly train support staff and monitor their performance to ensure high-quality service.

Non-compliance with Regulatory Standards

Compliance with regulations like GDPR and PCI DSS is essential to avoid legal issues and maintain trust. Non-compliance can result in significant fines and reputational damage.

To ensure compliance:

1. Stay updated with relevant regulations and implement necessary measures.
2. Conduct regular compliance audits to identify and rectify non-compliance issues.
3. Seek legal counsel for regulatory guidance to navigate complex legal landscapes.

Poor Integration with Third-Party Services

Integrating third-party services can enhance functionality but also presents challenges such as ensuring compatibility and maintaining data security.

To avoid integration pitfalls:

1. Choose reliable and reputable third-party providers to minimize risks.
2. Ensure secure and seamless API integrations to protect data and maintain functionality.
3. Regularly test and maintain integrations to ensure they continue to meet business needs.
4. Provide fallback options in case of third-party failures to ensure continuity.

Ineffective Data Management and Analytics

Effective data management is crucial for accuracy and insights. Poor data management can lead to inconsistencies and missed opportunities.

To improve data management:

1. Implement robust data management practices to ensure data integrity.
2. Ensure data accuracy and consistency across all systems.
3. Utilize advanced analytics tools to gain actionable insights.
4. Regularly review and update data policies to stay current with best practices.

Conclusion

In summary, developing a successful financial application involves avoiding common pitfalls related to security, user experience, accessibility, performance, onboarding, customer support, compliance, integration, and data management. By proactively addressing these issues, financial institutions can enhance user satisfaction, ensure security, and drive growth.

Building a FinTech application is a substantial investment, often requiring between 2,000 to 3,500 hours for development. Engaging with experienced professionals and continuously adapting to user feedback and technological advancements can help create a robust and user-friendly financial application.  With more than 2,500 projects under our belt and a focus on financial services and Fintech, we have the expertise you need to ensure you not only avoid common pitfalls, but that you actually thrive and grow. Contact us if you have a Fintech application you need to design or build.

Imagine a world where your UI/UX elements are harmonious, your developers sing in unison, and brand consistency reigns supreme. Welcome to the world of design systems, your secret weapon for conquering design chaos.

But what exactly is behind this mythology? Think of it as the single source of truth for your app’s design DNA, encompassing everything from the visual language (colors, fonts, spacing, buttons) to the foundational code powering those elements. It’s like a Lego set for designers and developers, providing the building blocks and instructions to craft cohesive user experiences across your entire application ecosystem.

Design systems aren’t just about pretty pixels. They include crucial design guidelines that dictate layout, interaction, and accessibility, ensuring your app is beautiful and usable for everyone. Additionally, they define your brand voice and tone, infusing every element with your unique personality and messaging.

Now, let’s clear some common hurdles:

• UI design vs. design system: Think of UI design as focusing on the individual screens and interactions within your app, while the design system provides the reusable components and rules that govern those elements. It’s the difference between crafting a single Lego car and having an entire instruction manual and parts library for building anything you can imagine.
• UI kit vs. design system: UI kits offer pre-designed components, while design systems go much more profound, encompassing code, guidelines, and brand voice. Imagine a UI kit as a paintbrush and some paint, while the design system is the entire art studio, complete with techniques, tools, and a guiding philosophy.

Benefits of Investing in a Design System

• Consistency: No more Frankensteinian interfaces! Users will enjoy a seamless, recognizable experience across all features and platforms.
• Efficiency: Stop reinventing the wheel! Reuse components and guidelines to save time and resources for both designers and developers.
• Scalability: Adding new features or products becomes a breeze with a design system in place, ensuring consistency and quality even as your app evolves.
• Collaboration: Designers, developers, and other teams sing in perfect harmony, aligned around a shared design language.
• Accessibility: Everyone gets to enjoy your app! Design systems promote accessibility best practices, ensuring inclusivity for all users.

Design Systems in Action: Unifying Experiences Across Diverse Products

Think of design systems as static libraries and living, breathing frameworks that power exceptional user experiences across ecosystems. Let’s delve into how Atlassian, Spotify, and Salesforce leverage their design systems to achieve this:

Atlassian

Imagine managing projects across Jira, Confluence, and Trello. Without a design system, these tools could feel like disjointed islands. Atlassian’s Design Language ensures a seamless transition between them, with consistent UI components, color palettes, and interaction patterns. The system reduces the cognitive burden for users and strengthens brand recognition across their diverse product suites.

Spotify

Spotify delivers a unified listening experience regardless of platform, from desktop apps to mobile devices and smart speakers. Their Polaris design system goes beyond visual consistency, defining interaction patterns for navigation, playback controls, and social features. Their system ensures users can intuitively navigate across devices, fostering a sense of familiarity and ease.

Salesforce

Salesforce caters to businesses of all sizes, offering various CRM and productivity tools. Their Lightning Design System acts as the connective tissue, unifying the look, feel, and behavior across their diverse product offerings. This consistency simplifies onboarding for new users and empowers admins to customize the user experience for their specific needs.

These are just a few snapshots of design systems in action. The impact goes beyond the surface, influencing:

• Development Efficiency: Reusable components and code snippets accelerate development, freeing up resources for innovation.
• Content Consistency: Brand guidelines and voice & tone documentation ensure consistent messaging across all touchpoints.
• Accessibility: Design systems prioritize accessibility best practices, making apps usable for everyone.

By implementing a design system, you’re not just creating a style guide but building a foundation for a cohesive, scalable, and delightful user experience across your entire digital landscape.

How Unosquare Can Help…

At Unosquare, we understand the challenges of maintaining consistency and innovation across diverse products. Our experienced designers and developers are passionate about crafting tailored design systems that ensure visual harmony and empower your teams, streamline development, and elevate the user experience.

Here’s how we can partner with your business:

• Design System Strategy & Implementation: We guide you through the entire process, from initial vision to ongoing maintenance, ensuring your system aligns with your business goals and user needs.
• Contemporary UI/UX Design: Our team breathes life into your design system, crafting engaging, user-friendly interfaces that reflect your brand identity and resonate with your audience.
• Development Integration: We seamlessly integrate your design system into your development workflow, empowering your teams to build faster and more efficiently.
• Innovation & Scalability: We stay at the forefront of design trends, ensuring your system evolves alongside your business and technology landscape.

But it’s not just about the tools but the partnership. We believe in close collaboration, working alongside your team to understand your unique challenges and goals. We’ll provide ongoing support and guidance, ensuring your design system becomes a living, breathing asset that drives your business forward.

Ready to harmonize your application ecosystem and unlock the power of a design system? Contact Unosquare’s Design and Development Center of Excellence today. Let’s create a design language that speaks volumes about your brand and resonates deeply with your users.

Embracing AI and Personalization

AI-powered interfaces took center stage in 2023, revolutionizing user experiences. These interfaces learn user preferences through machine learning algorithms, enabling them to offer highly customized experiences. From personalized content recommendations to anticipating user needs, AI has become the silent but intuitive companion in the digital realm.

Moreover, voice user interfaces (UI) and chatbots reached new levels of sophistication. These technologies allowed for natural, human-like interactions, making it easier for users to communicate with digital systems. The result was a more seamless and personalized experience, enhancing user engagement and satisfaction.

Immersive Design Trends

Virtual Reality (VR) and Augmented Reality (AR) integration found practical applications in 2023, elevating product previews and creating immersive virtual experiences. From trying on clothes virtually to exploring a new home before purchase, VR and AR transformed how we interacted with products and services.

The addition of 3D elements and animations added depth and interactivity to interfaces. Buttons came to life, responding to users’ interactions with fluid animations. This immersive design trend captivated users, making interfaces more engaging and enjoyable.

Prioritizing Accessibility

Inclusivity became a driving force in UI/UX design. Inclusive design principles gained momentum, ensuring that digital interfaces were usable by everyone, regardless of their abilities. This shift made technology more accessible and welcoming for all users.

Voice control and alternative input methods played a significant role in catering to diverse user needs. Voice commands, gestures, and other innovative input methods made it possible for individuals with disabilities to navigate and interact with digital interfaces effortlessly.

Data Visualization Evolved

Complex information found a new ally in 2023 – creative data storytelling. UI/UX designers harnessed interactive charts, dynamic infographics, and intuitive data visualizations to transform intricate data into clear, engaging narratives. Users could explore data effortlessly, gaining insights and understanding without being overwhelmed.

Location-based UX became a game-changer, providing users with personalized recommendations and services based on real-time context. Whether discovering nearby restaurants or receiving tailored content, location-based UX made every interaction more relevant and convenient.

Evolving Visual Trends

While minimalism continued to hold its sway, bold color palettes and vibrant illustrations made a triumphant return in 2023. Designers embraced the power of color to convey emotions and enhance the user experience. These vibrant visuals breathed life into interfaces, making them more exciting and memorable.

Furthermore, the rise of buttonless interfaces using gestures and voice commands redefined the concept of user flow. Navigating digital environments became more intuitive and fluid, mimicking the natural movements and interactions of the physical world.

2023 was a transformative year for UI/UX design, marked by the seamless integration of AI, immersive experiences, inclusive design principles, innovative data visualization, and captivating visual trends. 

As we move forward, these trends will continue to shape how we interact with digital interfaces, bringing us closer to a future where the lines between the physical and digital worlds are almost indistinguishable. These advancements beg the question of what is already happening in 2024. 

The Future of UI/UX Design in 2024: A Look into Emerging Trends

User Interface and User Experience design is poised for yet another transformative year. The dynamic landscape of technology continues to evolve, and this year promises to bring about significant changes that will shape how we interact with digital interfaces. Let’s explore the key trends to redefine UI/UX design in 2024.

Deepening AI Integration

AI is not merely a tool; it’s becoming an integral part of our digital experiences. In 2024, AI’s role will deepen further, with content creation and real-time customization taking center stage. Interfaces will harness the power of AI to tailor content, layouts, and interactions based on individual preferences, making every user’s journey unique.

One of the most exciting developments is the rise of proactive assistance through AI. These systems will become adept at predicting user needs and suggesting actions, making interactions more intuitive and efficient. AI will become our digital companions, seamlessly integrating with our daily routines.

Blurring Physical and Digital Worlds

Augmented Reality (AR) and Virtual Reality (VR) headsets have been on the horizon for years, but 2024 is expected to be the year they truly enter the mainstream. These technologies are becoming more user-friendly, accessible, and affordable. As a result, we can anticipate a surge in mixed reality experiences that seamlessly blend the physical and digital realms.

Imagine shopping in a virtual store, meeting in a shared digital workspace, or exploring new destinations through immersive VR tourism. The line between the physical and digital worlds will blur, offering users unprecedented engagement and interactivity.

Hyper-Personalization

In 2024, UI/UX design will enter a new era of hyper-personalization. Thanks to advanced AI algorithms and user data analysis, interfaces will adapt to individual preferences and contexts in real-time. Every click, gesture, and interaction will shape the interface to cater to your unique needs.

Furthermore, emotion recognition and biometrics will play a more significant role in personalizing the user experience. Interfaces may gauge your emotions and physical state to adjust content and interactions accordingly. The result will be interfaces that meet your needs and resonate with your feelings.

Focus on Well-being

2024 looks like the year when UI/UX design prioritizes user well-being. As our digital lives become increasingly intertwined with our physical existence, designers will be responsible for promoting healthy digital habits. Attending to beneficial digital interactions could mean incorporating features that track and limit screen time, encouraging breaks, and reducing distractions.

Additionally, there will be a growing focus on mindfulness and mental health. User interfaces and interactions may incorporate elements that help users stay mindful, reduce stress, and maintain a healthy relationship with technology. It’s a shift towards more empathetic and holistic digital experiences.

Ethical Considerations

As AI and personalization tools become more powerful, ethical considerations will emerge. Data privacy and user manipulation will be critical concerns. Designers must balance personalization and user autonomy, ensuring users have control over their data and interactions.

Transparency will become paramount, with interfaces providing clear explanations of how data is used and allowing users to opt out of personalized experiences. Ethical design principles will guide UI/UX professionals in creating responsible and trustworthy digital environments.

Takeaways

2024 promises to be a year of profound change in the UI/UX design world. AI will deepen its influence, blurring the lines between the physical and digital worlds. Hyper-personalization will become the norm, focusing on user preferences and emotions. Well-being and ethical considerations will drive design decisions, making digital experiences more enjoyable and more responsible and considerate of users’ needs and values. As we step into this exciting future, the possibilities for UI/UX design are boundless, and the user experience is set to become more immersive, personalized, and ethical than ever before.

Check us out!

Join us on this exciting journey as we continue to shape the future of digital experiences, one pixel at a time. Unosquare is a global company in the US, Canada, Great Britain, and Latin America. Our reach spans continents, and our impact on the software industry continues to grow. We invite you to explore our website and blog to delve deeper into the dynamic realm of UI/UX design.

Visit our site today to discover the endless possibilities that await in the world of design and development. 

Your next groundbreaking idea might be a click away.

Timeless UI/UX Standards

It’s essential to recognize that some fundamental principles remain steadfast. These timeless UI/UX standards have proven their worth in 2023 and are unlikely to undergo significant transformations in 2024. Let’s delve into these enduring principles that continue to guide the creation of exceptional digital experiences.

Usability Fundamentals

Intuitive Navigation

One of the cornerstones of a great user experience is transparent and predictable navigation. Users should effortlessly find their way around interfaces thanks to familiar elements like menus, buttons, and search bars. The goal is to ensure that users feel safe in the digital labyrinth.

Accessibility

Inclusivity is non-negotiable. Following accessibility guidelines, which include considerations like proper color contrast, screen reader compatibility, and keyboard navigation, is paramount. It ensures that digital interfaces are accessible to users with diverse abilities, making technology more inclusive.

Consistency

Maintaining a consistent design language across an interface is crucial. Consistency in design elements and patterns fosters familiarity, reducing cognitive load for users. Users can focus on their goals without distractions when elements behave as expected.

Visual Hierarchy

Effective communication relies on visual hierarchy. Size, color, and spacing guide users’ attention to essential elements and information. This hierarchy helps users understand the interface’s structure and prioritize their interactions.

Clear Error Handling

Mistakes happen; when they do, the user should not be left in the dark. Informative error messages and easy recovery options are essential components of an excellent UX. Transparent error handling ensures users can resolve issues quickly and continue their journey seamlessly.

User-Centered Design

Focus on User Needs

The core of user-centered design is understanding and addressing user needs and goals. Extensive user research should underpin the design process, ensuring that the interface is a solution to real problems users face.

Simplicity

Complexity is the enemy of usability. Simplicity in design leads to clean and uncluttered interfaces that avoid overwhelming users with unnecessary elements or distractions. A streamlined experience makes it easier for users to achieve their objectives.

Responsiveness

Digital products span various devices and screen sizes. Ensuring the interface adapts seamlessly to different platforms is a must if you intend to provide a consistent user experience. Responsiveness guarantees that users can engage with your interface anywhere, on any device.

Performance and Efficiency

Speed matters. Users expect interfaces to be fast and responsive. Minimizing loading times and delays enhances user satisfaction and keeps them engaged with the content rather than waiting for it to load.

Learnability

Giving users something easy to work with in an interface, especially for first-time visitors, is essential. A learnable interface reduces the learning curve, encouraging users to explore and interact confidently.

Takeaways

These timeless UI/UX standards provide a sturdy foundation for creating exceptional digital experiences. While technology and trends may evolve, these principles remain the bedrock of successful UI/UX design. It’s worth noting that even timeless standards can adapt to new technologies and user expectations. For instance, as voice interfaces and gesture controls gain prominence, intuitive navigation may take on new forms. The key is to stay user-centered and agile, allowing these standards to evolve harmoniously with the ever-changing technology landscape and user needs.

So, you want to be a designer…

When embarking on a journey to become a designer, it’s crucial to balance mastering the timeless fundamentals and staying abreast of AI and newer design trends. Both aspects are integral to a successful design career, and each serves a distinct purpose in your professional development. Let’s explore the significance of starting with the fundamentals and then delving into AI and emerging design trends.

Starting with the Fundamentals:

The Strong Foundation

Begin your design journey by mastering the timeless fundamentals. These principles form the bedrock of practical design and are essential for creating user-friendly and aesthetically pleasing interfaces. Familiarize yourself with intuitive navigation, accessibility, visual hierarchy, consistency, and clear error handling.

Building User-Centric Skills

Understanding user needs and solving their problems is at the heart of design. Prioritize user-centered design, emphasizing research and empathy. Learning to create interfaces that cater to real user needs is a skill that will remain invaluable throughout your career.

Cultivating Design Thinking

Design thinking is a problem-solving approach that designers use to tackle complex challenges. It encourages creativity, empathy, and iterative problem-solving. Developing your design thinking skills will equip you to approach design challenges with a fresh perspective.

Learning the Art of Simplicity

Simplicity in design is a timeless principle. Mastering simplifying complex ideas and interfaces will set you apart as a designer. A clean and uncluttered design can be compelling and engaging.

Nurturing Versatility

Building a solid foundation in the fundamentals allows you to be versatile in your design work. Whether you’re creating a website, mobile app, or physical product, these principles can be applied across various design disciplines.

Exploring AI and Emerging Design Trends

Staying Relevant

While fundamentals are the backbone of design, staying updated with AI and emerging trends ensures your skills remain relevant in a rapidly evolving field. AI-powered design tools and immersive experiences are becoming increasingly prevalent, making it essential to adapt.

Embracing Innovation

AI can enhance your design capabilities, from automating repetitive tasks to personalizing user experiences. Learning to incorporate AI into your workflow can amplify your efficiency and creativity.

Expanding Your Toolkit

Familiarizing yourself with the latest design trends, such as AR/VR integration and hyper-personalization, opens up new creative avenues. These trends can inspire fresh ideas and allow you to explore innovative approaches to design.

Meeting Client Expectations

Clients and employers often seek designers who can harness AI and incorporate modern trends into their projects. Being well-versed in these areas can make you a more attractive candidate for design roles.

Your journey to becoming a designer should begin with a solid foundation in the timeless fundamentals of UI/UX design. These principles are the cornerstone of practical design and will serve you well throughout your career. However, it’s equally crucial to stay curious and adaptable, embracing AI and emerging design trends to remain at the forefront of the industry. By balancing these two aspects, you’ll be well-prepared to navigate the ever-evolving design world and create innovative, user-centric experiences.

Unosquare is your UI/UX Partner

For those interested in top-tier UI/UX services, Unosquare is ready to support you. As industry pioneers since 2009, we’ve cultivated unparalleled expertise and delivered exceptional results. Our dedicated team, comprised of over 1000 seasoned professionals, has successfully crafted over 2500 distinctive digital solutions.

Look no further if you’re searching for cutting-edge UI/UX services that redefine user experiences. We invite you to explore our website and delve into our blog to discover the depth of our expertise and the innovation we bring to the UI/UX design world. With a global presence spanning the US, Canada, Great Britain, and Latin America, we can meet your needs worldwide. 

Trust us to be your partner in creating remarkable digital experiences that leave a lasting impact. Visit our site today and embark on a journey that will elevate your UI/UX projects to new heights. Together, your vision our expertise will shape the future of design.

Are you creating or iterating on a software as a service (SaaS) product? Launching a minimum viable product (MVP) is critical for proof of concept design and development. An MVP helps validate your SaaS idea rapidly, allowing you to understand the market without extensive upfront investment. This guide provides essential tips for creating a SaaS MVP quickly and effectively, ensuring you get your digital product to market quickly and efficiently.

Understanding the SaaS MVP Concept

MVP, or Minimum Viable Product, is a development strategy focused on introducing a new product with enough features to satisfy early adopters. The main goal is to collect user feedback for future product development. In the SaaS world, it’s vital to concentrate on core functionalities that define your product, ensuring a clear and compelling value proposition from the outset.

Perceptions of MVP Creation and Utilization

The perception of a Minimum Viable Product (MVP) varies significantly among stakeholders, primarily divided between those prioritizing speed and those focusing on scalability. For stakeholders favoring speed, an MVP is a rapid-fire solution to test market viability, often under tight deadlines and with a lean approach to feature inclusion. This perspective values getting a functional product into users’ hands as quickly as possible, prioritizing immediate user feedback and market adaptation. 

Conversely, stakeholders emphasizing scalability view the MVP as the foundational layer of a more extensive, robust system. They advocate for an MVP designed with future growth in mind, ensuring that early decisions don’t impede later expansions. The key to balancing these perspectives lies in clear communication and aligning stakeholder expectations from the outset. 

Best practices include establishing a shared vision for the product’s future, deciding on a scalable technology stack even in the MVP phase, and ensuring that the MVP, though minimal, is built on a solid, expandable architecture. This approach mitigates the risk of short-term decisions hampering long-term scalability, allowing for a swift yet sustainable path to market success.

Rapid MVP Development Strategies

When the objective is rapid development of a SaaS MVP, a strategic blend of Lean development principles, effective use of prototyping tools, and leveraging no-code/low-code platforms can significantly expedite the process. Begin with the Lean development approach, focusing on the core functionality that delivers the most value to your users. This method, emphasizing speed and efficiency, helps identify and prioritize the essential features, thereby reducing development time. Next, incorporate prototyping tools like Sketch or Adobe XD. These tools enable you to quickly visualize and iterate on your MVP’s design and user experience, allowing for rapid adjustments based on initial feedback or insights. 

The advantage here is the ability to fine-tune the user interface and experience before heavy coding begins, saving time and resources. Finally, harness the power of no-code/low-code platforms. These platforms are invaluable for rapid MVP development, especially for teams with limited coding resources. They allow for the quick assembly of functional prototypes and even fully operational versions of your product without extensive custom coding. 

Integrating Lean principles, prototyping tools, and no-code/low-code solutions creates a streamlined pathway for rapid MVP development, ensuring that your product reaches the market swiftly and effectively while maintaining a high standard of quality and user-centric focus. 

Approaches and tools to implement an MVP:

Lean Development

Lean methodology is about efficiency, focusing on delivering value to customers faster. It involves:

• Prioritizing features that address the primary needs of your audience.
• Reducing complexities to minimize development time.

Prototyping Tools

Prototyping is a quick way to visualize your MVP. Tools like Sketch or Adobe XD can help create interactive models of your product, enabling you to refine ideas before actual development begins.

No-Code/Low-Code Platforms

No-code or low-code platforms offer a quick path to MVP creation for those without extensive coding skills. Platforms like Bubble, Zapier, or OutSystems enable rapid development through user-friendly interfaces, significantly reducing the time from concept to launch.

Essential Tools for Fast SaaS MVP Creation

Project Management Tools

Effective project management is crucial. Tools like Trello, Asana, or Jira help streamline your development process, enhance team collaboration, and efficiently track progress.

Collaboration Platforms

Communication is critical, especially for remote or distributed teams. Platforms like Slack or Microsoft Teams facilitate seamless collaboration and keep everyone on the same page.

Testing and Iteration

Testing and iterating an MVP amidst expectations of rapid design, development, and implementation poses distinct challenges. One of the primary hurdles is balancing the need for speed with the thoroughness of testing. When stakeholders push for a swift launch, there’s often limited time to conduct extensive user testing, leading to unresolved MVP issues. This situation risks compromising the user experience and potentially missing critical feedback. Moreover, the rapid pace can pressure development teams to prioritize immediate solutions over sustainable ones, potentially leading to technical debt and scalability issues. 

Another challenge is the iteration cycle under tight deadlines. Rapid development cycles can make it difficult to gather, analyze, and implement user feedback comprehensively, often leading to surface-level adjustments rather than meaningful improvements. Establish a transparent and efficient testing protocol, prioritize features based on impact and feasibility, and maintain open communication with stakeholders about the realities and trade-offs of rapid MVP development. This approach helps ensure the MVP is developed quickly and maintains a quality standard that aligns with long-term success goals. 

Two essential considerations to implement for your SaaS MVP:

User Feedback Loops

Quickly gathering and implementing user feedback is essential for refining your MVP. Strategies include beta testing groups or early access programs to collect valuable insights.

Analytics Tools

Tools like Google Analytics or Mixpanel offer insights into user behavior, helping make data-driven decisions for your MVP’s evolution.

FAQ Section

How do I decide which features to include in my SaaS MVP?

Focus on your product’s core value proposition. Identify the essential features that solve the primary problem for your users. Make sure to complete the MVP with enough features. Prioritize those that directly contribute to the user experience and validate your product idea in the market.

Can I create an MVP without coding skills?

Absolutely. Utilizing no-code/low-code platforms is a practical approach for non-technical founders. These platforms offer intuitive interfaces and pre-built elements that allow you to develop functional prototypes or complete products without deep coding expertise.

What is the role of user feedback in MVP development?

User feedback is an absolute requirement in the MVP development process. It provides insights into what users truly need and value in your product. Implementing this feedback in iterative cycles ensures that your MVP evolves in a direction more likely to meet market demands and user expectations.

How long does it typically take to build a SaaS MVP?

As we discussed earlier, the timeframe for building a SaaS MVP varies based on the product’s complexity, the tools used, and the team’s expertise. However, using lean development principles and no-code/low-code platforms can significantly shorten the development time. Typically, it can range from a few weeks to a few months.

Conclusion

Creating a SaaS MVP can be simple. You can launch your MVP swiftly by focusing on core features, leveraging the right tools, and efficiently incorporating feedback. Remember, the goal is to learn from the market as quickly as possible and iterate. Use these strategies to ensure a successful and speedy launch of your SaaS MVP.

Commercial software, mainly when offered as SaaS (Software as a Service), demands expertly proven design and development patterns. These are essential for maximizing adoption, minimizing support costs, and guaranteeing optimal performance. Unosquare stands at the forefront as a leading designer of SaaS applications. Moreover, Unosquare specializes in providing scalable, high-performance back-end development, ensuring the optimal delivery of these services.

Understanding Software Product Design

Software product design is a multi-faceted discipline that forms a core part of the development lifecycle. It transcends aesthetics, delving into user experience (UX) and functionality. At its heart, software product design is about solving problems and creating intuitive, user-friendly interfaces that enhance user interaction with the software.

Critical Components of Software Product Design

User Research and Persona Development

Understanding your end-users is crucial in product design. Effective user research methods like surveys, interviews, and usability testing help create detailed user personas. These personas guide designers in making informed decisions that align with user expectations and needs. 

However, as software design evolves, consumer and user behaviors will continue to become increasingly complex, and marketers and designers are adapting their strategies to stay ahead. Here are some trends in persona development intended to increase the agility and depth of understanding of design strategies that are effective and resonate deeply with consumers:

• Data-Driven Personas: Traditional personas, often based on assumptions or limited data sets, are replaced by ones rooted in comprehensive data analytics. Design team are leveraging big data, AI, and machine learning to gather and analyze vast amounts of information, including browsing habits, purchase history, and social media interactions. 
• Dynamic Personas: Personas can evolve. These dynamic personas adapt to new information by continuously collecting and analyzing data, ensuring user design strategies remain relevant and practical. These dynamic personas adjust to by continuously collecting and analyzing data, ensuring that applied design principles remain appropriate and effective.
• Micro-segmentation: This specificity in segmenting users involves creating niche personas targeting distinct audience groups. This research is more granular and allows for increased user personalization.
• Integration of Psychographics: Designers and marketers can step beyond demographics and apply more information about users’ lifestyles, values, attitudes, and belief systems to understand use cases better and inform more personalized design structures. 

Wireframing and Prototyping

Wireframes and prototypes are instrumental in visualizing and testing ideas before full development begins. They serve as a blueprint for the final product. Tools like Sketch and Adobe XD facilitate the creation of these visual guides, allowing for early detection and rectification of potential issues.

User Interface (UI) Design

UI design focuses on the visual elements users interact with. It’s about creating an interface that is aesthetically pleasing but also intuitive and responsive. The goal is to enhance user interaction through well-thought-out design choices.

User Experience (UX) Design

A positive UX is key to customer satisfaction. It involves designing a seamless journey for the user, from the first interaction to the final goal. Strategies in UX design include:

• Creating a logical flow.
• Reducing cognitive load.
• Ensuring that the software is accessible to all users.

Software Development Processes in Product Design

Agile Methodology

The agile approach to software product design emphasizes flexibility, responsiveness to change, and adherence to contemporary design principles. It advocates iterative development, where design and development are continuous and evolutionary, allowing for rapid adaptability to user needs and market changes.

DevOps Integration

DevOps plays a crucial role in bridging the gap between development and operations. It enhances collaboration and streamlines the software delivery process, ensuring a practical translation of design into a functional product. Working with DevOps in product design promotes a culture of continuous communication and cooperation, bridging the gap between designers and developers. This collaborative environment ensures that design decisions are aligned with technical capabilities and constraints, leading to a more cohesive and feasible design. 

The continuous feedback loops in DevOps enable designers to receive immediate and ongoing feedback from internal team members and external users. This feedback is invaluable for making informed design decisions and ensuring the product meets user expectations.

Assembling Your Software Product Design Team

Roles and Responsibilities

A comprehensive product design team includes product managers, UX/UI designers, and developers. Each member plays a specific part; their collaborative effort is essential for the product’s success.

Skill Sets and Team Composition

Diverse skill sets are vital for a well-rounded product design team. Each skill, from creative design thinking to technical expertise, contributes to the team’s ability to deliver a product that meets business objectives and user needs.

The team requires a blend of creative, technical, and managerial skills. Each role contributes unique expertise and perspective to developing a technically sound, user-centric software product that is market-ready. A well-integrated team has the following functions working to provide usable software product design:

Product Manager

The product manager is the strategic leader of the team. They are responsible for setting the product vision, defining the roadmap, and aligning the team’s efforts with business goals. Their role involves market research, customer understanding, and prioritization of features. They bridge the customer’s needs and the team’s execution, ensuring the product delivers value.

User Experience (UX) Designer

UX Designers focus on the overall feel of the product. They are responsible for creating a seamless and intuitive user experience, which involves conducting user research, designing user flows, and creating wireframes and prototypes. Their expertise ensures the product is aesthetically pleasing, functional, and easy to navigate.

User Interface (UI) Designer

UI designers are concerned with a product’s visual aspects. They design interface elements like buttons, icons, and layouts, ensuring the product is visually appealing and aligns with brand standards. They also work closely with UX designers to ensure the aesthetics enhance the product’s usability.

Interaction Designer

Interaction designers specialize in crafting the product’s interactive elements. They focus on how users interact with the software, including gesture, touch, and click interactions. Their role is crucial in making the product engaging and intuitive.

Information Architect

The Information Architect organizes content and data in a way that is logical and easy to navigate. They structure the information hierarchy, making it accessible and understandable. This role is essential for products with significant content or complex data sets.

Front-end Developer

Front-end developers implement the design into code. They are responsible for building the product’s user interface using programming languages like HTML, CSS, and JavaScript. Their role is crucial in bringing the designs to life and ensuring they work across different devices and browsers.

Back-end Developer

Back-end developers work on server-side development. They manage the database, server logic, and application integration. Their work is critical for the product’s functionality, especially for handling large-scale data processing and security.

Quality Assurance (QA) Specialist

QA specialists are responsible for testing the product for bugs and issues. They ensure that the product is reliable and functional and meets quality standards. Their role involves automated and manual testing, essential to the product’s success post-launch.

Graphic Designer

Graphic designers create visual content for the product, including images, illustrations, and branding materials. They enhance the visual appeal and contribute to the product’s brand identity.

Content Strategist

Content Strategists develop and manage the textual content. They ensure the content’s language, tone, and style align with the product’s goals and user expectations. Their work is essential for clear communication within the product.

FAQ Section

What is the difference between product design and product development?

Product design and development are interconnected yet distinct. While product design focuses on the user interface and experience, product development involves the actual coding and building of the software.

Do I need a dedicated product design team for my software project?

Having a dedicated team can enhance the focus on user-centric design. However, integrating design within the development team is also viable, depending on the project’s size and scope.

How does user feedback influence the design process?

User feedback is integral to the iterative nature of design. It provides insights for refining and improving the product, ensuring it truly resonates with the end-users.

What tools are commonly used in software product design?

Popular tools include Sketch for wireframing, Adobe XD for prototyping, and Figma for UI and UX design. These tools facilitate various aspects of the design process.

How can I integrate product design into an existing software development process?

Incorporating design into an ongoing development cycle involves aligning design stages with development sprints and ensuring constant communication between designers and developers.

Conclusion

Software product design is a dynamic and essential component of software development. By understanding its various facets and effectively integrating them into development processes, teams can create software products or SaaS solutions that look great and provide exceptional user experiences.

Today’s users demand more from their software than ever before. Delivering on those expectations starts with a standout user experience. For over 30 years, the talent at Unosquare has helped companies in highly regulated industries create and modernize their applications and create beautiful, elegant UX.

Our approach is backed by established methodologies and experienced teams. Contact us if you are grappling with a complex digital solution and need help, and keep an eye on our blog for more helpful information about Digital Product Design and Development.

The SDLC has since become an essential framework for software developers, adding needed predictability that allows stakeholders to anticipate and allocate resources accurately. The SDLC breaks down a project into smaller, more manageable chunks, which makes it easier for developers to focus on individual tasks and maintain a clear sense of progress.

Another reason the SDLC is so important in today’s software development landscape is its emphasis on continuous improvement. By incorporating feedback loops and iterative refinement, the SDLC allows developers to learn from their successes and failures, ultimately improving the quality of their work. Furthermore, the SDLC has been influential in promoting collaboration and communication between team members. It clearly defines roles and responsibilities, which facilitates a better understanding of individual contributions and fosters a sense of shared ownership of the project.

The SDLC has also proven to be an indispensable tool for risk management. Through its structured approach, it helps developers identify and mitigate potential issues early in the project, preventing costly mistakes and reducing the likelihood of project failure. This proactive approach to risk management is particularly valuable in today’s fast-paced and competitive software industry, where delivering a reliable and secure product can make or break a company’s reputation.

Phases of the SDLC

1. Planning

In the initial phase, the project’s scope, objectives, and goals are defined. The project team, stakeholders, and potential users collaborate to identify the software’s requirements and establish a clear vision for the application. This stage also involves determining the project’s feasibility, outlining potential risks, and allocating necessary resources.

2. Analysis

Next, the project team delves deeper into the software’s requirements, working closely with stakeholders and end-users to refine the expected functionality, performance expectations, and constraints. This phase is vital for ensuring that the software addresses the needs of its intended audience.

3. Design

The software’s architecture, user interface, and other design elements are then crafted. The project team transforms the requirements gathered in the previous phases into a detailed blueprint that will guide the developers.

4. Development

Following the design phase, actual coding of the software begins (i.e. writing, compiling, and integrating the source code). The developers adhere to the design blueprint to create a functional application, translating the design specifications into executable code.

5. Testing

Once the software is developed, it undergoes rigorous testing to identify and correct any defects or discrepancies. The testing phase evaluates the software’s functionality, performance, security, and compatibility with different systems, ensuring that it meets the established requirements and is free from errors.

6. Deployment

After successful testing, the software is deployed to its intended environment and made available to end-users. This phase involves activities such as installation, configuration, and fine-tuning to ensure optimal performance. It may also include user training, documentation, and the establishment of support channels.

7. Maintenance

Once deployed, an ongoing process commences that includes monitoring the software’s performance, addressing user feedback, fixing bugs, and making enhancements to improve the application’s functionality, security, and usability. The maintenance phase also involves adapting the software to evolving market demands, technology advancements, or changes in regulatory requirements.

Common SDLC Models

There are numerous SDLC models and each has its strengths and weaknesses. The choice of which model to adopt depends on factors such as project size, complexity, and industry requirements.

Waterfall

This popular model is a linear, sequential approach where the development process flows steadily through a series of stages, from requirements analysis to deployment. It is suited to projects with well-defined and stable requirements. Its simplicity and predictability make it easy to manage and understand, which is why it is widely used in industries with a lower tolerance for change, such as construction or manufacturing.

V-Shaped (Validation and Verification)

An extension of the Waterfall model — characterized by its V-shaped structure that highlights the relationship between development and testing phases — each development stage in this model has a corresponding testing phase that runs parallel to it. This approach ensures that testing and validation are incorporated early and throughout the development process, allowing for early detection and resolution of issues. The V-Shaped model adds a stronger emphasis on quality assurance and regulatory compliance to a Waterfall model. 

Agile 

A newer and increasingly popular model, Agile is an iterative and incremental approach that emphasizes collaboration, customer feedback, and rapid adaptation to change. Agile methodologies, such as Scrum and Extreme Programming (XP), divide the development process into short, time-boxed iterations called sprints. Agile promotes frequent communication, adaptability, and continuous improvement, which is why this model is often used when requirements are expected to evolve during the project.

Spiral

Combining elements of both the Waterfall and Agile models, the Spiral model utilizes an iterative approach with an emphasis on risk analysis at each stage. It is often chosen for large-scale, complex projects where potential risks are high and require careful assessment.

Stay connected to the Unosquare blog for more helpful guides to modern software development, and get in touch today if you need added support for your next project from our experienced and talented development professionals.

Recently, a client had the need to enable users to register/login without an email on a platform built upon the .NET stack using ASP.NET Identity. The scenario is easy to understand: Most of your target users won’t have an email account but they will have a phone number available.

The requirement then is also simple:

We need to enable users to sign up and login using their phone number. That way, users that don’t have an email account can make use of their phone numbers to access securely the platform.

2. The Problem

One of the first things I tried was to play with the configuration of ASP.NET Identity. I found some threads like:

• – https://stackoverflow.com/questions/44480653/register-and-login-by-phone-number-in-asp-net-core-identity
• – https://social.msdn.microsoft.com/Forums/en-US/c0691f47-e3e9-4f73-b8a2-c083d8d304cb/identity-login-with-mobile-phone-number
• – https://techbrij.com/asp-net-core-identity-login-email-username

None of them were really matching the requirements I need. Basically, most of them are pointing you in the direction of using two factor authentication as a mechanism to accomplish phone register/login. But the requirements from the client are that we need to not disrupt the email register/login features, we just need to enhance those features so that a user with no email address can simply use his phone number as a replacement for an email account.

And after some time trying to find an existing solution with no good results, I decided to start reviewing the possibility of extending ASP.NET Identity to add some new capabilities that could address the client needs.

3. Analyzing the impact of the changes

As already stated on the title of this post, we’re already taking advantage of the benefits of ASP.NET Core Identity.

So how can we accomplish this? Should we hack some methods? Let me try to summarize the main use cases that will be affected by this change:

User sign up

– User provides an email/phone number and password
– A confirmation link is sent to the email/phone number
– User needs to click on the link to complete the sign-up process

User login

1. – User provides an email/phone number and password

4. Overall solution

We will refer to the users using their phone to access the platform as “Phone users” and we will divide the solution in steps:

1. Create a specialization class of Microsoft.AspNetCore.Identity.UserManager
2. Prepare our new class to Generate Confirmation Tokens for Phone Users
3. Prepare our new class to Confirm the identity of Phone Users

4.1    Create a specialization class from Microsoft.AspNetCore.Identity.UserManager

namespace WebApp1.Identity

{

    public class ApplicationIdentityUserManager : UserManager<IdentityUser>

    {

        public ApplicationIdentityUserManager(IUserStore<IdentityUser> store,

        IOptions<IdentityOptions> optionsAccesor, IPasswordHasher<IdentityUser> passwordHasher,

        IEnumerable<IUserValidator<IdentityUser>> userValidators,

        IEnumerable>IPasswordValidator<IdentityUser>> passwordValidators, ILookupNormalizer

        keyNormalizer, IdentityErrorDescriber errors, IServiceProvider services,

        ILogger<UserManager<IdentityUser>> logger) : base(store, optionsAccesor, passwordHasher,

        userValidators, passwordValidators, keyNormalizer, errors, services, logger)

        {   

        }

    }

}

Remember we don’t want to simply do some hacks, we want to extend ASP.NET Identity features so that it allows us to have Phone Users as first class citizens.

Now, we want to use our new UserManager implementation everywhere, that’s why we will add it on the ConfigureServices method.

public void ConfigureServices(IserviceCollection services)

{

    services.AddDbContext<ApplicationDbContext>(options =>

    options.UserSqlite(

            Configuration.GetConnectionString("DefaultConnection")

    ));

    services.AddDatabaseDeveloperPageExceptionFilter();

    services.AddDefaultIdentity<IdentityUser>(options =>

    options.SignIn.RequireConfirmedAccount = true)

        .AddUserManager<ApplicationIdentityUserManager>()

        .AddEntityFrameworkStores<ApplicationDbContext>();

    services.AddRazorPages();

}

ASP.NET Identity is flexible enough to let you change the default User Manager with a custom one. In this case, we’re specifying which class will be used as the User Manager using: .AddUserManager<ApplicationIdentityUserManager>()

4.2    Prepare our new class to Generate Confirmation Tokens for Phone Users

We will add the following code to our custom UserManager class:

public const string ConfirmPhoneTokenPurpose = "PhoneConfirmation";

public Task<string> GeneratePhoneConfirmationTokenAsync(IdentityUser user)

{

    ThrowlfDisposed();

    return GenerateUserTokenAsync(user, Options.Tokens.ChangePhoneNumberTokenProvider,

    ConfirmPhoneTokenPurpose);

}

Now, let’s pause to explain what we’re doing here. ASP.NET Identity already includes logic to generate email confirmation tokens (GenerateEmailConfirmationTokenAsync). That method returns a very long code that needs to be sent to the user somehow so that the user can confirm his identity.

In the case of Phone Users, we will reuse some existing logic to take care of confirming their account. The method responsible of generating confirmation tokens is GenerateUserTokenAsync which receives 3 parameters, the User entity, the token provider and the purpose of the token.

In our case, what we’re doing is that we will be reusing the token provider used to generate tokens when a user is changing his phone number. Why? Because that token provider will generate a short confirm token instead of the long one for emails.

Internally, the User Manager class is storing the tokens as well as the purpose of those tokens. So, what we’re doing here is that we are adding the ability to our User Manager class to generate phone confirmation tokens and those will exist for the purpose of “PhoneConfirmation”. We will use that token later.

What about the ThrowIfDisposed()? If you look at the implementation of the original UserManager class, that’s normally used on most of the methods of the class, so we’re simply following the pattern and logic here.

We will also create a method that takes care of generating the right confirmation code depending on the Username:

public async Task<string> GeneratePhoneConfirmationTokenAsync(IdentityUser user)

{

    if (user.UserName.Contains("@"))

    {

        return await GenerateEmailConfirmationTokenAsync(user);

    }

    return await GeneratePhoneConfirmationTokenAsync(user);

}

4.3    Prepare our new class to Confirm the identity of Phone Users

One of the features ASP.NET Identity provides is the ability to configure if you need users to confirm their identity, which works great. The only issue there is that we don’t have a way to tell ASP.NET Identity that a user can have a confirmed account whenever his Phone Number has been confirmed.

That’s why we need to include that scenario.

public async Task>IdentityResult> ConfirmPhoneAsync(ApplicationUser user, string token)

{

    ThrowIfDisposed();

    ThrowIfUserIsNull(user);

    if (!await VerifyUserTokenAsync(user,

    Options.Token.ChangePhoneNumberTokenProvider, ConfirmPhoneTokenPurpose, token))

    {

        return IdentityResult.Failed(IdentityErrorDescriber.InvalidToken());

    }

    var store = GetPhoneNumberStore();

    await store.SetPhoneNumberConfirmedAsync(user, true, CancellationToken);

    return await UpdateUserAsync(user);

}

With this method we’re simply doing the same check the framework already does for emails, but we’re working with tokens created for “PhoneConfirmation”. This is a good summary of what we’re doing here:

• Check that the user has a matching token for “Phone Confirmation”
• If it is valid, then let’s update the PhoneNumberConfirmed field to true (Indicating that we have confirmed the user Phone Number)

That’s basically the whole purpose of this method. We’re adding a way to confirm the identity of Phone Users. But we’re still missing something, ASP.NET Identity doesn’t consider PhoneNumberConfirmation field when determining if a user has a confirmed account.

ASP.NET Identity also provides a way to customize the way we determined if a user has already confirmed his account. We will implement the IUserConfirmation interface to handle this:

using Microsoft.AspNetCore.Identity;

using System.Threading.Tasks;

namespace WebApp1.Identity

{

    public class ApplicationUserConfirmation : IUserConfirmation<IdentityUser>

    {

        public async Task<bool> IsConfirmedAsync(UserManager<IdentityUser> manager,

        IdentityUser user)

        {

            if (user.UserName.Contains("@"))

            {

                return await manager.IsEmailConfirmedAsync(user);

            }

            else

            {

                return await manager.IsPhoneNumberConfirmedAsync(user);

            }

        }

    }

}

The interface is meant to implement a single method: IsConfirmedAsync. So, we are adding an additional check to the original implementation. We want Phone Users to be treated as first-class citizens here. So whenever there’s a Phone User with a Confirmed Phone Number, that user has a confirmed account. It is as valid as an account confirmed by email.

Let’s not forget to hook our ApplicationUserConfirmation class into the ASP.NET Identity logic: .AddUserConfirmation<ApplicationUserConfirmation>().

5. What’s missing? Bonus

With all this you’re ready to just plug-in your new ApplicationUserManager and ApplicationUserConfirmation classes to your project. So, let me give you a bonus.

If you’re using ASP.NET Identity (and you created the project without any specific front-end) you probably realized that Identity already provides logic to handle several pages on your project. Pages like: Login, Register, ChangePassword, etc. But you don’t see those on the project. I don’t know why they decided to hide those details by default since most of any real implementations will require to customize those views. So, how can you have access to those?

You need to Scaffold some items.

1.     Right click on your project and navigate to the following option:

2.     On the next dialog select “Identity” and then click Add

3.     Then you will be presented to a list of possible views to override:

4.     For this article, we will be focusing on the following: a.     AccountRegister b.     AccountConfirmEmail

5.     After clicking “Add”, you may need to wait a few seconds for the items to be generated. When the process is done, you should see something like this:

5.1    Generating confirmation codes for email or phone number

Now, let’s look at one of those Page Models. If you open Register.cshtml.cs you will see the following:

public async Task<ActionResult> OnPostAsync(string returnUrl = null)

{

    returnUrl ??= UrI.Content("~/");

    ExternalLogins = (await _signInManager.GetExternalAuthenticationSchemesAsync()).Tolist();

    if (ModelState.lsValid)

    {

        var user = new IdentityUser { UserName = Input.Emall, Email = Input.Email };

        var result = await _userManager.CreateAsync(user, Input.Password); 

        if (result.Succeeded)

        {

            _logger.LogInformation("User created a new account with password.");

            var code = await _userManager.GenerateEmailConfirmationTokenAsync(user);

            code = WebEncoders.Base64UrlEncode(Encoding.UTF8.GetBytes(code)); 

            var callbackUrl = Url.Page(

                "/Account/ConfirmEmail",

                pageHandler: null,

                values: new { area = "Identity", userld = user.Id, code = code,

                returnUrl = returnUrl },

                protocol: Request.Scheme);

            await _emailSender.SendEmailAsync(Input.Email, "Confirm your email", $"Please confirm your account by <a 

            href='{HtmlEncoder.Default.Encode(callbackUrl)}'>clicking here</a>.");

            if (userManager.Options.SignIn.RequireConfirmedAccount)

            {

                return RedirectToPage("RegisterConfirmation", new { email = Input.Email, returnUrl = returnUrl });

            }

            else

            {

                await _signInManager.SignInAsync(user, isPersistent: false); 

                return localRedirect(returnUrl);

            }

        }

        foreach (var error in result.Errors)

        {

            ModelState.AddModelError(string.Empty, error.Description);

        }

    }

    // If we got this far, something failed, redisplay form 

    return Page();

}

We will plug our functionality by using our brand new UserManager class whenever is needed. Pay attention to the following line:

var code = await _userManager.GenerateEmailConfirmationTokenAsync(user);

That line is responsible for creating the right code to be sent inside an email to the user being registered. We will change that so that it uses our method: GenerateConfirmationTokenAsync. Remember that method we created will check the user.Username to determine if the user is using his email as Username or his phone number.

var code = await _userManager.GenerateConfirmationTokenAsync(user);

You’re now generating confirmation tokens based on User’s username. And you will be able to confirm that identity by using the method: ConfirmIdentityAsync.

5.2    Confirm Identity of user either by email or by phone number

If you open the ConfirmEmail.cshtml you will see the following:

public async Task<IActionResult> OnGetAsync(string userId, string code)

{

    if (userId == null || code == null)

    {

        return RedirectToPage("/Index");

    }

    var user = await _userManager.FindByAsync(userId);

    if (user == null)

    {

        return NotFound($"Unable to load user with ID '{userId}'.");

    }

    code =  Encoding.UTF8.GetString(WebEncoders.Base64UrlDecode(code));

    var result = await _userManager.ConfirmEmailAsync(user, code);

    StatusMessage = result.Succeeded ? "Thank you for confirming your email." : 

        "Error confirming your email.";

    return Page();

}

Again, instead of using:

var result = await _userManager.ConfirmEmailAsync(user, code);

We should use:

var result = await _userManager.ConfirmIdentityAsync(user, code);

And behind the scenes, our User Manager class will take care of confirming the identity depending on the username type. After a Phone User has come through the process of confirming his identity, he will be able to sign in properly since he has a confirmed account. And since we register our new ApplicationUserConfirmation, then ASP.NET Identity will consider an account confirmed whenever the user confirmed his identity by email or by phone number. We have Phone Users as first-class citizens now.

Don’t forget the other details

The purpose of this article was to present you a straight-forward way to implement Phone Users as first-class citizens, but I haven’t covered some important details that might be up to you, for instance:

• – Frontend modifications to support Phone login/register
• – Modifications to models so that Username can be a Phone Number or Email
• – Implementation of SMS sender
• – Multifactor authentication with phone but no email

Need help with your upcoming software project?

At Unosquare, we train our developers, Scrum Masters, QA Experts, and business analysts on the Agile Philosophy of software development. The principles of adaptability and collaboration are the keys to success for the kind of rapid software development produced with our distributed teams.

By focusing on communication, feedback, and flexibility, our Agile teams produce working results, frequently focus on the highest-priority features, and make continuous, meaningful progress on software projects. To learn more about what Unosquare can do for your organization, check out our blog