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
Seven / Case Studies / Online Learning Tool Software Prototype

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:

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
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.)
Slide
Slide
Slide
previous arrow
next arrow
Slide
Slide
Slide
previous arrow
next arrow
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
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
Typography is vital for offering the users correct visual hierarchy and prioritization for the content. Here we applied the Minor Third Type Scale scope
Slide
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
Slide
Form Elements 2
Slide
Icons
Slide
Buttons
Slide
Menu
Slide
Tabs / Labels / Sliders /Progress Bars
Slide
Pop-Ups and Alerts
Slide
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
next arrow
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
previous arrow
Slide
Slide
Slide
next arrow
previous arrow
Slide
Slide
Slide
next arrow
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 Wireframes
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
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

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

Client Reviews

previous arrow
Slide

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
Slide

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


Contact Us

Have questions? Let us know!

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