Online Learning Tool Software Prototype
Our team completed the UI / UX milestones and created a Clickable Software Prototype. We used it to explore and improve the application during usability testing to save time and money on software development
Process
Here’s a list of activities that we perform during UI / UX and Software Prototyping stage to detect and avoid flaws before software development. Our approach is based on a wide viewing angle and covers aspects from Requirements to Software Design. Clickable Software Prototype page contains an in-depth look at the benefits of this approach
Part 1
Requirements
Part 2
UI / UX
Part 3
Software Design
Requirements
The quality of software’s technical implementation heavily depends on a correct collection of requirements. This preparation helps to avoid further overspending on Improvements, Reworks, Changes, and Refactoring when the Early Delivery stage is complete.
This stage covers the following requirements:
Functional & System
- 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
- PCI DSS
- GDPR, CCPA / CPRA, ISO / IEC 27001
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 allow us to understand the target audience more and see what desires one may have and what needs one seeks to resolve. Different user roles require separate User Personas, and we've covered Tutors (Teachers, Lecturers, Business Instructors, etc.) and Students (Learners from Schools, Universities, Businesses, etc.)
Customer Jorney Map
CJM is a tool that uncovers the user's hidden worries and needs while using the software. By learning what those are, we can understand the users more and adjust the User Interface accordingly
Design System
Color Scheme
The UI Set of the product and the Color Scheme are prepared within Web Content Accessibility Guidelines (WCAG) 2.0, 2.1 and some of relevant items from Section 508 of the Rehabilitation Act
Typography
Typography is vital for offering the users correct visual hierarchy and prioritization for the content. Here we applied the Minor Third Type Scale scope
Form Elements 1
We use native UI component libraries like Angular Material. Based on those libraries, we process the states of the elements to ensure consistency and clarity for the developers in the future
Form Elements 2
Icons
Buttons
Menu
Tabs / Labels / Sliders /Progress Bars
Pop-Ups and Alerts
Grids
Grid-based widget design enables the usage of patterns and layout rules across the software depending on the page structure. The result is consistency and responsiveness, ensuring correct visual representation of the software on various screen resolutions
Flexible Design Components
A Design System that consists of flexible components makes the design process more fluid while ensuring consistency is retained in every part of the software
User Flows
When the Early Delivery stage ends, there are often many cases of changes, improvements, and reworks. Success User Flows assume that users know how to navigate and use the software, which is rarely the case in reality. Not paying attention to alternative scenarios results in users getting confused and discovering the unfinished parts of the software.
This is why we cover:
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
Usability testing scenarios are best performed before the start of software development through a Clickable Software Prototype. Therefore, Customer saves time and money on further software development by improving user flows and business logic at the UI / UX stage
High-fidelity Mockups
High-Fidelity Wireframes allow to develop and evaluate all UI components individually and when combined. It is highly beneficial for processing the UI and making sure that the components maintain consistency throughout the software
Software Design
The ability to scale and maintain the software depends on correctly mapping out and planning the software architecture, server infrastructure, and adjacent components. Failure to do so results in costly reworks in the future.
Therefore, during the Software Design stage, we work on:
Functional Decomposition
Product Architecture
Database Architecture
Modules Structure
Client-Server Architecture
Third-party Service APIs
Technology Stack Consideration
Key Technical Requirements
Entities & Attributes
Got more questions?
Client Reviews
SEVEN has delivered a phenomenal beta-stage product that’s received stellar feedback from industry leaders. The team is flexible yet realistic; they aren’t afraid to reign in their client to ensure a timely, high-quality execution. Their expectation management and documentation are both exceptional.
Smart Notes Technology
Founder
Their work has been extremely solid. They’ve developed something that’s unique, intuitive, and aesthetically pleasing. They facilitate the exploration of my whims, but only when it’s feasible or sensible.
Smart Notes Technology
Founder
Case Studies
We apply a similar approach to all projects, adjusting it to the specific needs and requirements of the product
Online Clinic
The next generation of care for practitioners.
E-Form Builder
HIPAA compliant online form builder for US healthcare institutions.
Immunity Testing App
B2C Web Application for post innate immunity test results and recommendations.
Online School
Centralized curriculum management and delivery across all subjects for Schools and Universities.
B2C Counseling Tool
Online platform for selling / buying services and PPM audio / video communication.
Treatment Tool
B2C SaaS-based Web Application for treatment & medication planning.