FMP – Inline

Gilang Luthfi Aji Muzaki

Interactive Media Practice
University of Westminster

Project Introduction

The year 2020 caused the world to change because of Coronavirus Disease in 2019. To minimalised the spread of Covid-19 pandemic, the World Health Organization and government in the various country around the world introduce a new regulation called Social or Physical Distancing. Social or physical distancing is a practice to maintain a physical distance between individuals about 2 meters apart from each other.

From the issue above create one new problem. This causes a long queue for an essential activity like grocery shopping, bank service, chemist, restaurants, cafe, and many more. To support the new normal life with social or physical distancing matter, new digital technology or online service is needed for retailers and customers.

What is Inline?

Inline is an online queuing application.

The purpose of this application is to support retailers and customers for their activity in queuing by using digital technology.


Waterfall methodology is used in week 1 – 2, this method supports mainly for research. Finding the idea, research about the user, and planning for the development.

1. Week 3 – 4, the first sprint is designing the application wireframe and prototype.
2. Week 5 – 6, the second sprint is developing the application.
3. Weel 7 – 8, the last sprint is finalisation and testing the application.


<span>Photo by <a href="">Adrien Delforge</a> on <a href="">Unsplash</a></span>

The idea for this application was originate from my own experience when queuing in this current pandemic situation.

Searching a solution to reduce and simplify the queuing system with maintaining the social or physical distancing.


Research by doing secondary research from the internet. Searching about social or physical distancing works for retails and use of digital technology post-pandemic.

Not only by secondary research to find the solution, but also a survey for users is conduct. This survey is the finding for user current experience about queuing at this current situation.

Survey Result


Before entering the development stage, a plan is need to know what is needed. these are the plan for creating this project :

  1. Search for Flutter tutorials and resources.
  2. Search for Google firebase tutorials and resources.
  3. Selecting the colour palette.
  4. Gathering design resources.
  5. Analyse application structure.
  6. Create applications functionalities.
  7. Create an application data model.
  8. Design a wireframe.
  9. Design a logo and icon.
  10. Create an application design system.
  11. Develop the application.
  12. Test the application

Application Analysis

The first stage of development is analysing the structure of the application.

  • What is the use case of the application?
  • What are the main functions of the application?
  • What data does it require?
  • How will the data structure look?

Inline Functionality and Non-Functionality Requirements

1.SRS-INLINE-F-001Create a user account.
2.SRS-INLINE-F-002User login.
3.SRS-INLINE-F-003User logout.
4.SRS-INLINE-F-004User change password.
5.SRS-INLINE-F-005Update user profile.
6.SRS-INLINE-F-006Create a queue.
7.SRS-INLINE-F-007Update queue.
8.SRS-INLINE-F-008Delete queue.
9.SRS-INLINE-F-009Join the queue.
10.SRS-INLINE-F-010Leave queue.
12.SRS-INLINE-F-011Complete queue.
12.SRS-INLINE-F-012Show queue details.
13.SRS-INLINE-F-013Show the user for waiting quota value inside the queue.
14.SRS-INLINE-F-014Show the estimate waiting time.
15.SRS-INLINE-F-015Show user line number in the queue.
16.SRS-INLINE-F-016Recent queue list.
17.SRS-INLINE-F-017Top queue list.
18.SRS-INLINE-F-018Favourite queue list.
19.SRS-INLINE-F-019Add the user favourite queue.
20.SRS-INLINE-F-020Current active queue.
21.SRS-INLINE-F-021Completed queue history.
22.SRS-INLINE-F-022Search queue API.
23.SRS-INLINE-F-023User push notification.
24.SRS-INLINE-F-024Database connection with Firebase.
1.SRS-INLINE-NF-001Using Flutter as a development framework tool for hybrid mobile application.
2.SRS-INLINE-NF-002Using Dart as the main programming language.
3.SRS-INLINE-NF-003Using Google Firebase provider as a real-time database and storage service
4.SRS-INLINE-NF-004Android package kit (APK) as the output build, that can run in mobile with Android operating system.
5.SRS-INLINE-NF-005Using Algolia as a search API provider for mobile application.

Analysis Diagram Components

Application Architecture
Queuing System Design Class Diagram

Use Case Diagram
Graphic Use Interface Design Class Diagram
Entity Relationship Diagram
Data Flow Diagram Lvl 0
Data Flow Diagram Lvl 1


Entering the design stage of development. this stage is where the application user interface is designed.

Inline Information Architecture

Inline High Fidelity Wireframes

Inline Logo Concepts

Inline Design System


User Interface Prototype

Development Tools

Main Framework
Cloud Database
Search API
Code Editor

Development Progress


User Testing

Inline Black Box Testing

Application Demo


  • The highlight of this application is the queuing system.
  • Users can queue using their smartphone devices.
  • User can see the queue information, how many people are in the queue and an estimate waiting time.
  • For retail owners, they can create a queue for their business.

Future Development

  • Online Payment / Contactless
  • Mini Game
  • Google Map Integration
  • Queue Auto Completion

Thank you