B2C Counseling Tool Software 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
Seven / Case Studies / B2C Counseling Tool Software Prototype

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
Stage 1
Research
  • Introduction to the Project
  • Competitors Analysis
  • Domain Research
  • Business field, needs, goals
Stage 2
Personification
  • User Persona
  • Empathy Map
  • CJM (Customer Journey Map)
  • UX Tips
Stage 3
Prototype
  • User Flows Creation
  • Usability Testing
  • Clickable Flow Prototypes
  • High Fidelity Wireframes
Stage 4
Implementation
  • Design Сoncept
  • Design System
  • Accessibility Testing
  • Module Mockups
  • Clickable Software Prototype
  • Usability Testing

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
Slide
Slide
Slide
previous arrow
next arrow
Slide
Slide
Slide
previous arrow
next arrow
Customer Journey 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
previous arrow
CS-Online Clinic Software Prototype-Customer Jorney Map-04
CS-Online Clinic Software Prototype-Customer Jorney Map-04
CS-Online Clinic Software Prototype-Customer Jorney Map-04
next arrow

Design System

previous arrow
Slide
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
Slide
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.
Slide
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
Slide
Form Elements 2
Slide
Form Elements 3
Slide
Icons
Slide
Buttons
Slide
Menu
Slide
Tabs / Pagination / Dropdowns / Alerts
Slide
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
next arrow
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
Slide
Slide
Slide
Slide
Slide
Slide
Slide
Slide
Slide
Slide
previous arrow
next arrow
Slide
Slide
Slide
Slide
Slide
Slide
Slide
Slide
Slide
Slide
previous arrow
next arrow

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

previous arrow
Slide

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
Slide

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
Slide

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
next arrow


Build Your Own Solution

Want to get your own custom solution? Leverage our proven expertise, customizable cores, and other deliverables to create something extraordinary. Share the details with us, and let's bring your vision to life!

Thank You!
We have received your message and going to contact you as soon as possible
Send Another Request

Error!
Message not sent, please try again
Try Again