B2C Counseling Tool Prototype
Creating UI / UX design and a Clickable Software Prototype was an essential step before engaging in software development to test the quality of user interfaces & user flows, and save money and time on development later
Process
This is our list of activities we perform during the UI / UX stage. It is an approach that covers a wider angle, allowing us to detect potential flaws and lay down improvements for the development stage
Part 1
Requirements
Part 2
UI / UX
Part 3
Software Design
Requirements
Requirements tend to evolve during design and development stages. Clickable Software Prototype is necessary for testing the software and decreasing the number of potential risks and changes. This leads to an improved quality of software’s implementation.
The stage contains these environments:
System & Functional
- Modules & Detailed Features Description
- Product Perspective
- Assumptions, Dependencies, and System Constraints
- Sequence, Data Flow, and State-Transition Diagrams
- Classes / Objects
Non-Functional
- Key Technical Indicators
- Technology Stack Consideration
- Security
- Performance
- Manageability / Maintainability
Compliance-Related
- GDPR
- CCPA / CRPA
- ISO / IEC 27001
- PCI DSS
UI / UX: Overview
We divided all the tasks into two types of activities: UX Design and UI Design with all stages from start to finish
User Experience
User Persona
User Personas are a valuable tool for understanding the needs and desires of potential customers. It allows gaining empathy for the users and creating a comfortable environment for all user roles. This project includes Client, Service Provider, and Business Admin user roles, and we created corresponding User Personas
Customer Jorney Map
We created a Customer Journey Map for different user roles to define each user's goals while using the product. It allowed us to predict the emotional experience and general satisfaction while using the platform and to improve the User Interface where necessary
Design System
Color Scheme
We use Web Content Accessibility Guidelines (WCAG) 2.0, 2.1, and relevant parts from Section 508 of the Rehabilitation Act to create the Color Scheme and UI Set
Typography
Visual Hierarchy and Content Priority are achieved primarily through the correct choice of Typography. For this project, we chose Major Third Type Scale scope.
Form Elements 1
We operate mainly with native UI component libraries. Thorough processing of elements helps process their states and ensure consistency across the platform
Form Elements 2
Form Elements 3
Icons
Buttons
Menu
Tabs / Pagination / Dropdowns / Alerts
Grids
Applying grids to widget and page design allows maintaining a similar layout structure and patterns throughout the product. This way, the platform gained consistency, responsiveness, and correct display on various device types and resolutions
Flexible Design Components
Component-based Design System is vital for maintaining element consistency across the software
User Flows
Focusing only on Success User Flows can cause issues with misunderstandings and unexpected results of user testing.
That’s why we cover:
Success User Flows
Alternative User Flows
Exeption User Flows
Edge Cases
Clickable Software Prototype
A valuable tool for UI and user flows testing. It allows identifying the weak points in the product and remove them before the software development stage
High-Fidelity Wireframes
Essential for refining User Interface components and evaluating them in a natural software environment to ensure consistency and structural integrity
Software Design
Steps like selecting Technology Stack and designing Product Architecture and Server Infrastructure can significantly increase the scalability and maintainability of the software product.
We covered:
Functional Decomposition
Product Architecture
Database Architecture
Modules Structure
Client-Server Architecture
Third-party Service APIs
Technology Stack Consideration
Key Technical Requirements
Entities & Attributes
Client Reviews
We were convinced by their previous projects. SEVEN delivered good quality software on time, which satisfied the client's requirements. They communicated smoothly and were always available for necessary meetings during the collaboration. Their availability throughout impressed the client.
Telecommunications Company
CTO
SEVEN made a huge work to provide a turn-key solution for this project. Their flexibility and friendly atmosphere were impressive in the workflow. Their versatility stood out in the partnership.
Communications Platform
Founder
Everything with them is fantastic and problem-free. After speaking with SEVEN, we knew they understood what we wanted and how to make it because they’d done it before. Overall, they’ve been outstandingly professional; the team anticipates needs and explains everything in an easy way to understand.
Mental Health Counseling Platform
Operations Manager