Online School Software Prototype
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
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
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
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
To achieve correct visual hierarchy and content prioritization, we selected Major Second Type Scale scope
Form Elements 1
Native UI component libraries allow ensuring consistency and uniqueness across the software while spending optimal amount of time and money
Form Elements 2
Icons
Buttons
Menu
Tabs / Labels / Sliders /Progress Bars
Pop-Ups and Alerts
Charts and Infographics
Illustrations
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
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
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
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
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
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.
Medical Care App
CEO