We finalized UI / UX works and created a Clickable Software Prototype for pre-development usability testing to explore and improve the software and save time and money on development
Process
Our approach involves a broader look at the software design and development process. We include steps like Requirement Gathering, Software Design, and more to ensure minimal complications during development. Here’s a breakdown of our activities during this stage:
Part 1
Requirements
Part 2
UI / UX
Part 3
Software Design
Requirements
Overspending on Improvements, Reworks, Changes, and Refactoring is almost inevitable without spending enough time on collecting the requirements properly. Later on, this will heavily influence the overall technical implementation of the software.
The requirements are divided into:
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
SCORM / xAPI / IMS LTI / AICC
GDPR, CCPA / CPRA, 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
Creating User Personas for different user types helps understand that person's hidden motivation and needs when using the software. We created User Personas for Student, Teacher, and Administrator for this project
Slide
Slide
Slide
Slide
Slide
Slide
Customer Jorney Map
CJM helps to gain a deeper look into what the user may feel, expect, and need when using the software. Understanding the user's experience allows adjusting the User Interface before development and avoiding major oversights, thus saving time and money in the future
CS-Online School Software Prototype-Customer Jorney Map-04
CS-Online School Software Prototype-Customer Jorney Map-04
CS-Online School Software Prototype-Customer Jorney Map-04
Design System
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
To achieve correct visual hierarchy and content prioritization, we selected Major Second Type Scale scope
Slide
Form Elements 1
Native UI component libraries allow ensuring consistency and uniqueness across the software while spending optimal amount of time and money
Slide
Form Elements 2
Slide
Icons
Slide
Buttons
Slide
Menu
Slide
Tabs / Labels / Sliders /Progress Bars
Slide
Pop-Ups and Alerts
Slide
Charts and Infographics
Slide
Illustrations
Slide
Grids
Consistency and responsiveness on multiple platforms and displays are achieved by using layout rules and patterns for a particular page structure. This result is nearly impossible to get without using a grid-based widget design
Flexible Design Components
Consistency of components within the software and adaptability allow small or significant changes within the Design System in a short time. It enables more time for experiments and improvements across the software
User Flows
Early Delivery stage is the time when a lot of reworks and UI improvements happen. Focusing efforts on just Success User Flows may cause many problems during user testing when users discover the software’s imperfections and find unfinished elements.
To avoid that, we work on:
Success User Flows
Alternative User Flows
Exeption User Flows
Edge Cases
User Flow Examples
Here are a few examples of how we process User Flows
Slide
Slide
Slide
Slide
Clickable Software Prototype
Clickable Software Prototype is vital for testing the UI / UX aspect of the software before the launch of development, fixing potential issues, and saving time in the future
High-Fidelity Wireframes
High-Fidelity Wireframes are essential for ensuring component consistency within the software through creating and visualizing both individual components and sets
Slide
Slide
Slide
Slide
Slide
Slide
Slide
Slide
Slide
Slide
Slide
Slide
Slide
Slide
Slide
Slide
Slide
Slide
Slide
Slide
Software Design
Planning Technology Stack, Server Infrastructure, Product Architecture, and more are all crucial parts of creating software that can be sufficiently scaled and maintained in the future with minimal revisions.
This stage covers:
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
Slide
The app is intuitive and efficient, and it will help the client streamline their work. SEVEN is communicative, professional, and responsive to feedback. Moreover, they've adapted their team composition to fit the client's budget. Their passion for their work results in valuable ideas that stand out.
Online School
Technical Director
Slide
SEVEN produces on-target deliverables according to complex requirements. The product they developed is visually appealing and well-organized. SEVEN demonstrated that they have a large infrastructure. They have a lot of people on their team who are professional and know their jobs very well.
Health Supplement Provider
Former COO
Slide
I could go to them at any point, and they were always responsive and available to help us.I think SEVEN offers a very good value for money. They delivered a quality solution, it was very well executed, and it worked as requested. Project management is a great strength for them.