Page 1 of 60

Manifest
“Manifest your ideas.”

Software Design Document

Last Revised on:

April 20th, 2021

Document Identification: SDD Version 2.0

Manifest Software Design Document

 Page 2 of 60

Manifest__________________________________________________________ 1
Section I: Project Overview _____________________________________________ 3
Team Members ______________________________________________________ 3
Concept ____________________________________________________________ 5
Demo ______________________________________________________________ 7
Design Pillars _______________________________________________________ 7
Target Audience ____________________________________________________ 10
Project Scope ______________________________________________________ 10
Minimum Viable Product (MVP) ________________________________________ 11
Documentation Protocols______________________________________________ 11
Version Control_____________________________________________________ 12
Expectations and Intellectual Property _________________________________ 14
Clickup ____________________________________________________________ 14
Section II: Design_____________________________________________________ 17
Aesthetics _________________________________________________________ 17
Art and Design Assets _______________________________________________ 18
Colour ____________________________________________________________ 22
Font ______________________________________________________________ 23
Interface Design ____________________________________________________ 24
Section III: Development ______________________________________________ 33
Technology _________________________________________________________ 33
Development Environment and Tools_______________________________________ 35
Programming languages ________________________________________________ 37
Section IV: Market Research ___________________________________________ 38
User Research ______________________________________________________ 38
Personas __________________________________________________________ 43
Competition _______________________________________________________ 52
Social Media _______________________________________________________ 59
Playtest ___________________________________________________________ 59

Manifest Software Design Document

 Page 3 of 60

Section I: Project Overview

Team Members
Joshua Ducharme-Baribeau
Lead Producer – Project Oversight, Organization and Quality Assurance

Email: [email protected]

Portfolio: https://joshydb.wixsite.com/portfolio

Zachary Heil
Co-Producer, Programming Lead – Project Oversight and Technology

Email: [email protected]

Hashim Khan
Director & Design Lead – Design team oversight, organization, UI/UX design

Email: [email protected]

Portfolio: https://hashimk99.wixsite.com/portfolio

Ethan Bowbyes
Designer – UX/UI Design, Market Research

Email: [email protected]

Portfolio: https://ethanbowbyes.weebly.com

Annabelle Chan
Designer – UX/UI Design

Email: [email protected]

LinkedIn: https://www.linkedin.com/in/annabelle-chan-244323183/

Manifest Software Design Document

 Page 4 of 60

Fariha Khan
2D Concept Artist

My portfolio - https://www.senpai-khan.com/

My LinkedIn - https://www.linkedin.com/in/fariha-senpai-khan-a218321a3/

Eugene Payne
Designer – UX/UI Design, Sound Design

Email: [email protected]

Jem Generalao
Lead Front-end Programmer – Features and Styling

Email: [email protected]

LinkedIn: https://www.linkedin.com/in/jgeneralao/

Portfolio: https://www.jemgeneralao.com

Argha Ghosh Dastidar

Programmer – Data Handling and Technical programming
Email: [email protected]

Portfolio: https://digitalesca9e.github.io/arghas-space/#/

LinkedIn: https://www.linkedin.com/in/argha-ghosh-dastidar-549a69142/

Alexander Jogie
Front-end Programmer – Features and Styling

Email: [email protected]

LinkedIn: https://www.linkedin.com/in/alexander-jogie-6281a8187/

Manifest Software Design Document

 Page 5 of 60

Concept
Problem
The problems users must face when choosing a note app can be summarized as
follows: Utility, customizability, and privacy.

Utility is a problem that has been predominantly addressed within pre-existing

note apps thus far. The note apps currently on the market, like Apple’s “Notes”
app and “Google Keep”, offer a quick and easy solution to conveniently making
notes without a pen and paper. They take advantage of technology by allowing
users to add media to their notes, create lists, and set corresponding reminders on
them. These innovations are exciting; however, these apps are still somewhat
restrictive. The primary constraints revolve around how the apps allow users to
organize their ideas and the limited customization options. Apple’s “Notes” uses a
highly linear organization of notes while Google Keep offers slightly more
organizational flexibility, but its design impedes usability and discoverability.

Our research has demonstrated that customizability is the most crucial aspect of
a positive note app experience. It also showed that a lack of customizability ties
in with missing features, which is the most frustrating aspect of note apps. Users
want more from their note apps, but they should not need to sacrifice
customization options–like note arrangement and visual details–to get more out of
them.

Finally, with an ever-growing cyberspace, it is becoming challenging to identify

what information is private and how safe our data genuinely is. For users to freely
express themselves with a note app, they need to be confident that their
information is completely secure.

Solution
Users want features without being told how to use them “properly”. They want
the freedom of a blank page in their pocket. They also desire privacy to pour their
hearts out and express themselves without worrying about how their thoughts
might wind up online. The solution to this complex problem must be a versatile
and personable application focused on user growth.

Manifest Software Design Document

 Page 6 of 60

Pitch
“Manifest” is a web application designed to offer each of its users a
customizable approach to making notes and visualizing ideas and tasks on the
go. This web-hosted application is accessible from any browser and installable
with minimal storage requirements. Users can install it on their smartphone
when they do not have access to the office they deserve. Manifest allows users
to organize their notes in a non-linear format with resizable notes which can
be easily manipulated. The local storage method that Manifest has adapted
means that user data, such as user notes are stored on the user's device only.
Users can be confident that their personal data never reaches our server and
maintains optimal privacy.

Manifest is inspired by those who think differently. Whether it is for those

with neurodivergent minds, or those who simply need more room for
creativity, Manifest aims to give users the power of a pinboard and the
simplicity of a note app on their phone. We hope that by helping users express
themselves, organize ideas and manifest their dreams, we can improve
productivity and mental health one note at a time.

Open our deployed app here: https://zackjheil.github.io/Manifest_Repo/#/

Access the app’s files through the GitHub Repository here:

https://github.com/zackjheil/Manifest_Repo/tree/main

Manifest Software Design Document

 Page 7 of 60

Demo
Manifest Concept Demo (https://youtu.be/17IXlubXY-k)

Demo by Ethan Bowbyes and Hashim Khan. Music by Eugene Payne.

Design Pillars
Versatility

https://paul4innovating.files.wordpress.com/2014/04/knowledge-and-learning-4.png

We chose versatility as one of our pillars for our app, because we want it to be
able to fulfill multiple areas of organization and idea projection. Thus, we aim to
have multiple ways for the user to record their information, such as detailed note
taking, checklist/reminder options, audio recording, and image options. We also
give the users the option to tag an emotion on notes. These features make our app
able to fulfil multiple organizational needs. In our survey (see “Market Research”
section below), 16.1% of people said that they would not have used a mobile
organization app, because they have not found an intuitive app to do their tasks.
By striving for versatility, we can cater to more individuals’ needs, and provide an
app that does more.

Manifest Software Design Document

 Page 8 of 60

Personal

https://cdn3.vectorstock.com/i/1000x1000/47/62/colourful-brain-vector-8594762.jpg

We want Manifest to feel personal. Users should be able to create and arrange
their notes in a way which appeals to their understanding of organization. To do
that, users can pin certain notes, add tags to them and even change their sizes. In
our survey results, many people mentioned that one of the reasons that they do
not use note apps is because they lack customization options. Manifest will
encourage users to change the colours of their notes, categorize them and order
them as they please. If versatility helps cater to more users, personability
ensures users are cared for as individuals.

Manifest Software Design Document

 Page 9 of 60

Growth

https://miro.medium.com/max/3448/1*YZohpO3RZ-Xofr_-xDgWfg.png

The goal of Manifest is to give users the opportunity to better themselves by

removing the limitations of traditional note taking applications. The features that
the app offers should be designed in a way that promotes growth within the user.
One user may use Manifest to keep track of their mental health by logging
emotions and journaling thoughts. Another user might be using the app to increase
their efficiency and time management by using the lists and reminders features in
the app. The goal of Manifest is to allow its users to improve themselves. Giving
the user the power to control what the app looks like to make it as efficient as
possible for them. With versatility and personability, growth is just a matter of
the user applying the tools to their intentions.

Manifest Software Design Document

 Page 10 of 60

Target Audience
Although our application is useful for most age demographics, our target
audience is youth, which consists of users aged 15 to 35. Users in the youth
demographic will be where our predominant application usage comes from and for
whom our application will be designed. A considerable number of users in the
youth demographic are students, who will greatly benefit from our application
and frequently use memo applications already. In sum, Manifest will be a
desirable app for emerging professionals, creative people and individuals who
seek to increase their productivity and well-being. In the “Market Research”
section, we will go into more depth about our user personas and what is important
to them regarding desired features and frustrations.

Project Scope
Throughout both the pre-production and development phases, the scope has
evolved at crucial points of the project’s development. Initial development was
planned to be a purely mobile/Android experience. Due to technology stack
difficulties in November of 2020, the application began being developed as a
Progressive Web App (PWA). PWA’s are a new emerging form of application
designed to be modular, responsive, and lightweight. The app is being developed
and tested for Chromium based browsers in a mobile aspect ratio but is still
viewable on desktop browsers.

Originally, the application’s focus was to be used as a way for users to rapidly
make versatile notes that accommodate users who want to organize their notes
freely. Since then, the scope has morphed to focus more on the user experience
and how Manifest could help improve their wellbeing with features that prompt
the users to journal and log their emotions.

Approaching the alpha version of the application, the project scope has been
narrowed significantly. The application’s purpose as a note app was colliding
poorly with its purpose as a mental health app. The new scope maintains a focus
on user experience, but the benefits to user wellness are driven by users’ own
increased organization and expression with Manifest. In this new scope,
Manifest is a humble tool for users to take control of their own thoughts and
ideas as they strive for self-improvement.

By the end of April 2021, we hope to achieve a minimum viable product (MVP) as
detailed in the following section.

Manifest Software Design Document

 Page 11 of 60

Minimum Viable Product (MVP)

A minimum viable product has been set to anchor the scope to an approachable
target. The technology stack we will be using is complex and most members of the
team have limited experience using ReactJS. The MVP will be achieved by the beta
release of the product. Currently, the MVP must include the following essential
features:

 Web-hosted app
o The app will be hosted on GitHub.
o It should be installable on user devices.
 Create and edit text notes
o Save these notes on the user’s storage device.
o Access these notes again to edit them.
o View the notes after the session has ended (when the app is closed or
refreshed)
 Discoverable interface and intricate organization
o Nested organization: My_Boards>Board_1>Note_1
 Customizable experience
o Ability to customize notes with colours.
o Ability to tag notes with our custom emoticons.
o Use block-based content boxes to add text and other elements to
notes.

Documentation Protocols
Research
 All team members are encouraged to conduct any research that they need to
complete tasks that they have taken up or been assigned.
o Research can include watching videos, reading forums, completing
tutorials and exercises, and asking questions!
 Members are encouraged to share resources they have viewed that may be
pertinent to the project with the group via Discord.
 Any resources used to complete development or design (forums, code,
tutorials, code libraries, assets, etc.) must be noted, and cited
appropriately. “Free-use” resources which do not require attribution
should also be noted as a courtesy, and for future reference.
o URLs are not sufficient to cite sources, as they are prone to
reallocation and breaking, and do not properly credit authors.

Manifest Software Design Document

 Page 12 of 60

Documentation
Iteration and Deletion Policy

This project is rooted in the idea of iterative design and transparency. Put simply,
team members should not delete any work (code, assets or otherwise) which they
have completed. For example:

 Designers working on wireframes

o No frames are deleted. Instead, a separate iteration is made.
o This allows designers to compare their work and return to previous
iterations that may be more suitable for the current needs.
 Coding
o Code which is developed should be pushed to GitHub often for version
control and troubleshooting options.

See the Version Control section for details on data and asset storage.

Version Control
GitHub
Our revision control software of choice for our programmer’s code was one that
was made easily and without much argument or question. We decided that using
GitHub’s repository system would be the easiest, most reliable system to use.

The main thing we were looking for in our revision control software was that it
allowed easy rollback of changes if code was pushed that broke something. We
were also looking for something that was lightweight to use, and given GitHub’s
ability to run via a terminal, web terminal, or desktop app it was a logical choice
given the variety of system specifications of our programmer’s workstations.

We also settled on the requirement that every push made would have to include a
short summary as to what was being pushed to the repository. GitHub
automatically adds a time and date stamps when pushes occur, so that was not a
requirement we needed to implement.

The repository can be accessed at https://github.com/zackjheil/Manifest_Repo.

Accessing GitHub:

 All team members have been invited and accepted to collaborate in the
repository. (https://github.com/zackjheil/Manifest_Repo)
 It is possible to access GitHub through command lines; however, we
recommend downloading the desktop app for ease of use.

Manifest Software Design Document

 Page 13 of 60

Typical workflow:

1. Open the GitHub desktop app.

2. Fetch and Pull the Manifest repository.
3. Work on the code/assets within your local repository.
4. When your changes are complete, Fetch and Pull the Manifest repository.
Stash your changes if prompted.
5. Commit work. Include a few words to distinguish the changes made as
the title for the push and a brief description of the changes made.
6. Push and commit the changes.
7. Push and commit often.
8. If you are unsure of something, ask a team leader about it!

For questions about GitHub, talk to Zach (Producer and Lead Developer).

OneDrive
A OneDrive folder has been created and shared with all members. Documentation
will be stored here, along with all other art and design assets. Figma projects can
be accessed with links within this document and in the OneDrive folder. The
protocols below will offer framework for a productive workflow, sheltered from
data loss.

Uploading to One Drive

 Upload all assets which are to be reviewed or are improved from a previous
version. If a file (like an image) is converted to a different file type, keep
both file types. They can be named identically.
 All assets being uploaded to the One Drive folder should be placed in the
“deposit” folder.
 The files being uploaded should not have any spaces or special characters
in their name. “UseCapitalLetters” to distinguish words in the file names.
 The naming conventions may be revised, but for now, name items in the
following way:
o “Name/title of the Asset (AccurateTitle)” + “Optional component to
specify further” + “Version/iteration number (V#a)”
o Examples: “ManifestLogoV5A.png,” “ManifestLogoV5A.svg,”
“ManifestLogoV6.SVG,” etc.
 Do not delete or replace any files. Instead, increase the version
number/letter. If the wrong file is uploaded, you may replace it.

Manifest Software Design Document

 Page 14 of 60

 Files in the deposit folder will be sorted by a member of the team

periodically.
 You are encouraged to keep a personal copy of any assets you create for
your portfolio!

For questions about OneDrive, talk to Josh (Lead Producer).

Expectations and Intellectual Property

 All group members will treat each other with respect.
 All members are encouraged to communicate often and ask for help or
direction if they are unsure of anything.
 All communications will be respectful and will abide by the Brock University
Code of Conduct.
 All work and assets you create are your own intellectual property. However,
any components/parts/portions of the project which were done
collaboratively or contain work from another person must be attributed
correctly and may not be claimed as your own.
 Members are encouraged to “fork” the Manifest repository to show a copy
on their own GitHub repositories. You may continue to work on the
application past the beta after forking it. You may repurpose your own
assets from the project as you see fit.

Clickup
Clickup is project management software which is free to use (with limitations)
and will be used to ensure the project is clearly planned. The free version of
Clickup is abundant with features which make task assignment and completion
easy for the entire team. The desktop client can be installed
(https://clickup.com/apps) for free and is recommended for frequent use and ease
of access.

Clickup will be used to carry out the following things:

 Create a production timeline (see “Production Timeline” below);

 Keep track of due dates and milestones;
 Create tasks and subtasks that need to be complete;
 Mark tasks as “Ready for Review,” “Revisions Necessary,” and “Completed.”

Manifest Software Design Document

 Page 15 of 60

Production Timeline
The production timeline has been detailed in Clickup via Zach Heil’s Workspace
(https://app.clickup.com/8512420/v/s/10769221). Viewing the timeline in Clickup
provides the best and most detailed experience, however screenshots will be
provided below. Please note that this section will become outdated naturally,
and future references to the timeline may be unavailable.

Manifest Software Design Document

 Page 16 of 60

Manifest Software Design Document

 Page 17 of 60

Section II: Design

Aesthetics

square_ref circle_ref soft_edge_ref

For the general aesthetic of the application, we wanted to capture something that
included both a professional and comforting presence. When it comes to
professional aesthetic, sharp edges and strong structure come to mind. It can be
as simple as a square, shown above in the image - square_ref. In contrast, when it
comes to representing a comforting presence, soft and welcoming shapes, such
as circles, are prominent (circle_ref). Therefore, we concluded that to capture
both appearances we need to merge both ideas, represented with the shapes
above, to find a balance of structure and comfort, as seen in soft_edge_ref.

Manifest Software Design Document

 Page 18 of 60

Art and Design Assets

Manifest Logos

Logo Ideas

When it came to logo design, it was difficult to pinpoint how exactly we would
capture the essence of Manifest–an application which embraces divergence–in
one image. To start, we worked from early versions of the design pillars and
created multiple concepts to see which one related to the app and held sentimental
value. Four iterations were particularly striking (as shown above in the image -
“Logo Ideas”). The design team agreed that the hands added a gentle touch, and
the brain held the technical aspect of the application. Together they created an
equal balance between comfort and structure.

Manifest Logo Sketch and Final Logo Design

After further iterations, we followed through by creating more concepts referring

to the selected logos. We branched off to a few more ideas that involved replacing
the brain with other objects such as a lightbulb and cloud. However, we ultimately
came back to the brain design and changed the illustration instead, making it look

Manifest Software Design Document

 Page 19 of 60

more realistic at its profile angle, while achieving a more welcoming design. you
can see the current logo iteration above in the image comparison displaying
finishing touches (“Manifest Logo Sketch and Final Logo Design”). The final logo
features a circle around the brain which adds a calming presence with the
addition of the gradient pastel background. Finally, we later added a gradient
effect to the hand as well to add depth.

Emotion Icons

Emoticons Initial Concepts

When it came to designing the emotions for the application, we had to ensure that
they portrayed feelings clearly and accurately. After trial and error and multiple
concept iterations, the first draft produced the image above (“Emoticons Initial
Concepts”).

Emoticon Image Expressions

We had initially started with the emoticons conveying happy, sad, mad, tired,
frustrated, confused, stressed and anxious. More concepts were made following
the first attempt, adding more variations. From all those variations the one that
stood out the most was the concept that did not involve facial features, but
symbols that depicted the emotion, e.g.- happy was expressed through the image
of a heart, while sad was expressed through the image of a broken heart. This is
shown above in the image – “Emoticons Image Expressions”.

Manifest Software Design Document

 Page 20 of 60

Emotions Concept 3

Due to the nature of the application and the vagueness of the two concepts, it was
proposed that we merge the two concepts to create multiple newer drafts that
held more information through its art style. We came to an agreement on keeping
this style and iterating more (as shown above in the image - Emoticons Concept
3).

Emoticons Concept 4

Upon selecting the two, we merged them to create more concepts, changing the
eyes, mouth, facial structure, etc. We realized that we need to compensate for
the lack of happier emotions, which was why we added 3 more emotions that fell
under the category. We added Excited, Butterflies and Calm/Relaxed. (as shown
above in the image - “Emoticons Concept 4”)

Finalized Emoticons

Manifest Software Design Document

 Page 21 of 60

Finally, after further discussion with the design team, we made a couple cuts and
stuck with our top 10 emoticons. Colour was then added, and we were able to
create bright, appealing, and detailed emoticons. The symbols are all stylized
using deep colours to contrast the flat yellow of the faces, creating a nice blend (as
shown in the above image – “Finalized Emoticons”).

Tools Icons

Early Tool Icon Iterations

The final set of icons that had to be designed for our application was the tool
icons which can be found throughout our application. These icons are extremely
important because the user must be able to understand the function based on
cultural affordances. The first and then current iterations of tools icons can be
seen above (“Early Tool Icon Iterations”).

Manifest Software Design Document

 Page 22 of 60

Finalized Tool Icons

After careful consideration and feedback from the playtest, we had a complete
redesign of the tool icons. These can be seen as more straightforward and
simplified for the user. We also added a monochromatic purple colour scheme to
these icons to compliment the background of the application, ensuring contrast
and visibility. These icons can be seen above, labelled “Finalized Tool Icons”.

Colour
With our colours, we want the user to feel a sense of calmness and creativity
while using the application. With that in mind, we noted blue, purple, and pink,
as our primary colour scheme and decided on pastel colours as our accent
colours throughout. As seen below when looking at Image 3 & 4, the background
colours are much darker, and the accent colours are significantly brighter. This
was done intentionally to create a visual contrast of elements on the page. Our
goal is to give the user as most colour customizability as possible, so the images
below act as an example of how the user might want to organize their colours.

Finalized Colour Palette – Image 1

Finalized Colour Palette (Accent Colours) – Image 2

Manifest Software Design Document

 Page 23 of 60

(Finalized Coloured Prototype – Image 3 & 4)

Font
The fonts that we chose to use in our app reflect our three design pillars and
visually express how we want the user to feel. Through the addition of fonts, it
assists our app with making the user feel calm and relaxed. We have chosen to use
two sans-serif fonts. The one used for the Manifest title and all other bodies of
text is “Assistant” and the font used for the headers throughout the app is
“Oswald”. Moreover, both fonts align with our desired aesthetic and feeling
portrayed with our application. We chose fonts that are easy to read with
accessibility in mind. Most text is white and contrasts against the darker
background. The fonts below can be seen in the image below (Fonts – Image 1 &
2).

Manifest Software Design Document

 Page 24 of 60

(Fonts – Image 1 & 2)

Interface Design
Goals for interface design
Throughout the design process, we referred to the three design pillars
(Versatility, Personal and Growth) to help set guidelines for what the interface
would look like. One of the main features that all three pillars asked for was
customizability.

Making a UI that is as customizable as possible brings additional challenges to the

table: The design needs to be intuitive enough for users to explore and customize
without a tutorial.

Manifest Software Design Document

 Page 25 of 60

The app also needs to be designed in such a way that no matter how the user may
customize it, the app remains fully functional. Efficiency and ease of access are
also important design traits for a notes app.

Interface Design Process

Initial wireframes were created using Figma, a collaborative design platform, to
visualize and experiment with different designs. Figma allows multiple people to
work on a wireframe at the same time, allowing the team to easily discuss and
portray designs in real-time despite an online work environment.

Wireframe Design process:

1. Brainstorm the features required as a team.

2. Anticipate the workflow of a user using many features.
3. Create a rough conceptual model of the app’s various pages/states.
a. Distribute features to pages according to the anticipated workflow
and conceptual model.
4. Assign designers to different sections of the app.
5. Each designer:
a. Adds details to their assigned section and pages.
b. When new ideas or significant changes occur to the design, the
designer creates a new branch of that page/section to preserve
previous ideas and continue the iteration process.
6. Designers re-convene to choose the best iterations and give feedback.
7. The user workflow is re-assessed, and the conceptual model is refined.
8. Steps 4 through 7 are repeated as many times as necessary.

Prototype
In preparation to attending the playtest, we created a fully working prototype.
The prototype lets the user navigate and interact with the app through page
linkage in Figma. This process makes most buttons clickable and allows for a
better understanding of how the app functions. The prototype can be accessed
using the following link (there is also a video walkthrough available in our “demo”
section):
https://www.figma.com/proto/b9AbpWMTu8cT2s82UR2YrB/Prototype?node-
id=1777%3A2642&viewport=1405%2C744%2C0.3615286946296692&scaling=min
-zoom&page-id=1777%3A2641

Manifest Software Design Document

 Page 26 of 60

Interface Design Analysis

Below we seek to analyze our final prototype and justify our design choices.
Everything was designed with purpose and careful consideration. Our current
design is the result of countless iterations and hard work on behalf of the team’s
designers.

Boards Page
The “My Boards” page is what the user sees when the application is opened. The
concept of the boards is to allow the user to categorize their notes onto different
boards to allow for better organization. A board is comparable to a folder.

Manifest Software Design Document

 Page 27 of 60

Notes Page (Quick Add Pop-Up)

The “Notes Page (Quick Add Pop-Up)” page shows the main “notes” page that the
user would see when clicking on a specific board. The button in the middle of the
header entitled “School” is the name of the board that the user is on. When that
button is clicked, it leads the user to the main boards page.

Manifest Software Design Document

 Page 28 of 60

Edit Note Page (Tag Pop-Up)

The “Edit Note Page (Tag Pop-Up)” page is what the user sees when they click on a
note or are editing a note. The main feature that this page shows is that users are
not limited to text when it comes to making notes.

Manifest Software Design Document

 Page 29 of 60

Menu Bar
The “Menu Bar” page is what the user will see when the menu icon is clicked on
any page allowing the user to navigate efficiently.

Manifest Software Design Document

 Page 30 of 60

Reminders Page
The “Reminder Page” is accessed from the main reminders page when the user
clicks on a specific list. This feature lets the user keep track of their to-do lists and
other needs. If the user does not add a time to be reminded of something, it will
act as a regular list and users can still check things off by clicking the circle on the
left side as seen above.

Manifest Software Design Document

 Page 31 of 60

Reminder Detail Page

The “Reminders Detail Page” displays the options that the user will be met with if
they click on the “i” beside a specific reminder seen on the “Reminders Page”.

Manifest Software Design Document

 Page 32 of 60

Add List Page

The “Add List Page” is accessed through the “Notes Page (Quick Add Pop-Up)”
page. This page is solely for lists without reminders attached to them found within
a specific board.

Manifest Software Design Document

 Page 33 of 60

Section III: Development

Technology
This app was developed as a Progressive Web App using JavaScript, CSS, and
JavaScript XML. As the goal was to be accessible by multiple platforms, this was
the optimal route and it helped in circumventing some of the problems of
developing on platform specific development environments.

Progressive Web Application (PWA)

Progressive Web Applications (PWA) are applications that can be accessed
through both desktops and mobile devices. These applications have always fallen
short in performance compared to apps created through platform specific
development environments, however, they can be accessed by almost any device.
Apps created on platform specific development environments seem limited to their
platforms but can make full use of the platform they are created for.

PWA’s seek to combine the best of both worlds by providing high performance and
diverse accessibility. PWA’s are created using traditional web development coding
languages like HTML, JavaScript, and CSS. The performance of these apps is
boosted by using modern Application Programming Interfaces (API’s) (Richard
and Lepage, 2020). (https://web.dev/what-are-pwas/)

PWA’s are scalable to screen and can be installed on most devices with modern
web browsers. Once installed, they behave like traditional apps. They make full
use of the device’s facilities as well as support offline functionality. They also
create a shortcut on the device (like normal apps!) through which the application
can be started. As web applications, they are run and processed by the device’s
web browser. (Richard and Lepage, 2020). (https://web.dev/what-are-pwas/)

Manifest Software Design Document

 Page 34 of 60

Technical details of PWA’s:

 They are offered over a secure network (HTTPS):

o This indicates that the website a user is being directed to is secure.
 It has Service Workers:
o This is to identify how a browser handles its request so that the app
may be functional.
 It has a manifest:
o This contains the visibility of your app and its interface on your
device. It contains the various visuals of your app and their
appearance (MDN Web Docs, 2020).
(https://developer.mozilla.org/en-
US/docs/Web/Progressive_web_apps)

Advantages of PWA over Platform Apps

 Single code base:

o PWA’s run on a single code base, which means that the code of the
app needs to be written in a single programming language which can
then be distributed to any platform.
 Accessible from any device
o As the software uses web browsers to operate, the app is accessible
on any device that runs a web browser.
 Instant launch and update
o Any updates done to the main code automatically updates the version
on the user’s computer if they are connected to the internet as it
redirects to the webpage of the app.

GitHub Hosting
In addition to version control, GitHub will also be used to host the application,
from which users can install the web app on their devices. GitHub will not be
storing any user data.

One of the most important features of react is its expandability by using packages
that can be installed to add functionality. One of these packages in particular is
what is being used to deploy the app to GitHub Pages GitHub pages. By adding in a
string of code into a package file; that is the file that tells the browser how to
build the app, our team is able to continue development on the app while still
having the app live and available to users.

React being a pre-existing code base comes with instructions that show the end
developer how to deploy their app to a myriad of different hosting services, the

Manifest Software Design Document

 Page 35 of 60

one our team chose to use being GitHub pages. More information about all the
behind the scenes codes, commands, and modularity about React can be found
here: https://create-react-app.dev/docs/deployment/#github-pages

Development Environment and Tools

NodeJS
NodeJS is a set of libraries on which ReactJS (and our PWA) will run.

 Navigate to https://nodejs.org/en/download/
 Download the LTS version for the appropriate OS. We will be using version
“node-v14.15.1-x64.msi” for Windows and version “node-v14.15.1.pkg” for
macOS.
 Run the installer and follow the steps. The modules should be installed in
the computer’s “Documents” directory.

ReactJS
The team will be working with ReactJS to create the application. ReactJS is an
open-sourced, front-end library that is maintained by Facebook. ReactJS allows
users to view the application in real time while working on the code. An especially
useful feature that the programmers will be using is the Responsive Design Mode
on their preferred browsers. While working with React to write the code for the
application, the programmers will be able to view the application in a mobile
browser environment.

Furthermore, due to its declarative code structure, users will not have to write
the code from scratch. Using declarative code structure in ReactJS, the team will
be creating components that will make up the application, stitching them together
to create the finished application.

Manifest Software Design Document

 Page 36 of 60

ReactJS can be installed after installing NodeJS:

 Open command prompt in Windows (or Terminal for Mac)

 Navigate to the Documents folder with “cd documents.”
 Type:
o “npm install create-react-app –g”
 Allow the installation to complete.
o “create-react-app [NAME-OF-THE-APP]”
 After submitting the command, the react app will be installed.
 Type:
o “cd [NAME-OF-THE-APP]” to navigate to the app’s folder.
o “npm start” to start the app.
 A browser window will open, and the app will run. Members can edit the
code with a code editor to change the app. The app will update as code is
saved.

Bootstrap
Bootstrap is an open-sourced library that can be installed into ReactJS to help
users create certain components. Bootstrap offers various components such as
Navbars, Cards, Images, and more. The team will be using react-bootstrap as they
see fit in their assigned pages.

React-Bootstrap is installed with Command Prompt after a React app has been
installed.

 With command prompt, navigate to the manifest-app folder.

 Type:
o “npm install react-bootstrap bootstrap”
 After submitting the command, bootstrap libraries will be downloaded and
installed to the project folder, giving members access to bootstrap’s
functions.
 More libraries and node modules can be installed in this way, providing
access to countless functions.

Visual Studio Code

Although any code editor can be used to edit the application’s files, we recommend
that team members use Visual Studio Code. By default, Visual Studio Code is
proficient in HTML, CSS, and JavaScript without installing or locating any
additional libraries. It also recognizes external libraries’ (like Bootstrap)
functions, properties and colour codes text for legibility.

Manifest Software Design Document

 Page 37 of 60

Visual Studio Code also offers different extensions, such as Microsoft Live Share.
This extension allows users to share their code with other users and edit code that
is being shared with them. Team members will be able to effectively help each
other out with errors that they may face if both (or multiple) participants have an
internet connection and the extension installed.

Programming languages
The programming languages we will be using for this project are HTML,
JavaScript, JSX, and CSS.

HTML is a language that uses tags to create objects, and JavaScript allows the
user to manipulate those objects. For example, when you call the tags for <Body>
and </Body> to create a base for a web page. Since the application is based on
HTML, users can view it on virtually any web browser.

JavaScript can then be implemented to create text fields, import images, and
create other objects and functions such as buttons and menus.

CSS will be used as the basis to design the aesthetic of the application. CSS will
allow the users to interact with HTML mostly to format all objects within the
application.

With ReactJS as the main tool for developing the web application, JavaScript XML
is used create reusable “components,” which can be placed across the
application. JavaScript XML is a language created for React to combine
JavaScript and HTML. The difference with how JavaScript operates in React and
how it is traditionally used is that normally JavaScript would be located inside an
HTML file. With JSX, the user puts the HTML file inside the JavaScript file. CSS in
this case can be used in various methods within ReactJS. Two main ones are using
inline styling (objects) to write CSS in an HTML file or apply classes to tags.

The benefits to using the ReactJS library is that it allows the user to manipulate
virtual document object models (DOM) which is a structure of files in HTML and
XML. Virtual DOM is the same thing as real DOM, however, it does not have the
power to change what is on the screen itself, instead it manipulates certain files
with HTML. By manipulating Virtual DOM, it makes it much faster to render
HTML files thus making for a more user-friendly experience.

Manifest Software Design Document

 Page 38 of 60

Section IV: Market Research

User Research
To further understand our users and to develop user personas, we created a
survey that was distributed to collect raw data. We used this data to direct our
design and account for user priorities and frustrations to make an application that
is successful, resourceful, and innovative. Based on our survey results, we
proceeded to make several user personas that represent our users. We then
analyzed our personas and identified a primary and secondary persona to focus on
while designing our application.

Survey
On our survey, we received 90 responses, however 9 people were not interested in
memo/journal apps or said that they do not need them. Therefore, we received 81
meaningful survey responses that we have gone through and extrapolated data
from.

Respondent Demographics
NB: Surveys were deployed in a way that reached a demographic which was
predominantly students from Brock University. Therefore, the majority of our
respondents were students as seen below:

Manifest Software Design Document

 Page 39 of 60

Accordingly, we see that majority of respondents are aged in the 19-24

demographic:

The students that responded were studying in a variety of different fields

including Interactive Arts & Science, Game Design, Business, Health Sciences,
Psychology, English, Concurrent Education, etc.

Respondent Habits
65.6% of respondents use a journal or write memos. Of that group, 54.2% of
them use an application that lets them do this. We asked the remaining 45.4% of
users why they do not use a journal/memo app:

 Most people said that they prefer to use pen and paper (85.2%)
 A small number of people said that they have not found an intuitive app yet
(22.2%)
 Others say that they do not trust journal/memo apps (22.2%)

Very few users said that they do not feel the need to use them or that they do not
fit the user’s desired layout.

Manifest Software Design Document

 Page 40 of 60

For the respondents who use an application to journal or take notes, we asked
them which application(s) they use most.

We can deduce that iOS is a popular system among respondents that take notes
with an application. A negligeable number of respondents used other applications
such as Samsung Notes, Word, Google Docs, MacBook Notes.

The following lists the most frequent tasks accomplished when using memo
applications according to the respondents:

 Writing down thoughts and ideas (81.3%)

 Making to-do lists (81.3%)
 Expressing emotions (43.8%)
 Journaling (18.8%)

Moreover, more than 77% of respondents who use memo applications use them
more than once per week:

Manifest Software Design Document

 Page 41 of 60

Respondent Needs
The remainder of the questions were asked to surveyors who both use and do not use a
journal/memo application currently. Respondents were asked to rate their experience
with journal/memo applications. The chart below shows that most users have an average
or below average experience with journal/memo apps.

We then asked what the respondents seek to achieve while using a journal/memo
application. Common responses included:
 Making to-do lists (85.2%)
 Organizing their thoughts (70.4%)
 Setting reminders (69.1%)
 Brainstorming ideas (64.2%)
 Journaling their thoughts (46.9%)

Manifest Software Design Document

 Page 42 of 60

Next, we asked respondents which features were most important to them.

Common responses included:
 Customizability/personalization (79%)
 Ease of use (76.5%)
 Efficiency (60.5%)
 Privacy (54.3%)
 Reminders (45.7%)
 and Calendar syncing (44.4%)

Finally, we asked surveyors what are some things that frustrate them about
journal/memo applications. There were five top answers for this question
including:
 Not enough customization (46.9%)
 Not user friendly (34.6%)
 Missing features (46.9%)
 Not enough versatility (40.7%)
 and needing an account or internet connection (45.7%)

Manifest Software Design Document

 Page 43 of 60

Key Takeaways
 People who use memo apps for a wider variety of tasks tend to prefer pen
and paper.
 People use pen and paper because of there are no constraints. They have full
freedom to customize.
 Most users expressed concerns about the privacy issues that could
potentially come with such apps.
 Most respondents use memo apps for more organizational tasks such as
making to-do lists.
 Customization is the most valuable feature of a memo app according to
respondents.
 A substantial portion of the respondents use iOS, and including this
demographic is an important section of the potential market.

Personas
By going through our individual surveys and extracting information about specific
potential users, we were able to develop several user personas. We then grouped
similar personas to identify our primary and secondary personas based on our
potential users and their use cases for the application.

Manifest Software Design Document

 Page 44 of 60

Primary Personas

Manifest Software Design Document

 Page 45 of 60

Manifest Software Design Document

 Page 46 of 60

Manifest Software Design Document

 Page 47 of 60

After analyzing survey data, we concluded that our primary persona is an

individual that is in their youth (aged 18-35) that likes to journal frequently, and
values being organized. They have tried various journal/memo apps before but did
not seem to like any of them due to the lack of customizability and features. This
person now uses Apple Notes because of the lack of good options available. Their
overall experience with journal/memo apps is about ⅗ (60% out of 100%),
meaning there is a lot of room for improvement. This person is likely a student,

Manifest Software Design Document

 Page 48 of 60

however, this app is going to be designed for the general population. This type of
person is going to be using the application the most and will benefit most from our
interface we are creating based on their goals, needs and frustrations. Our
primary persona is someone who appreciates customizability/personalization.
They also value ease of use, efficiency, and privacy.

In order to capture the primary persona, we concluded that our app needs to cater
to their needs and wants. We noticed that the primary persona values
customizability, so it is important to be able to give them as many options as
possible without overloading the application with too many features. Our goal is to
give the user the ability to set up and edit elements within the app, however it
suits them best. The app should also have features that allow the user to quickly
perform tasks like making to-do lists, setting reminders, noting ideas, etc. The UI
should also be clean and simple and there should be a conscious effort to make
sure it allows the user to perform tasks quickly because they value ease of use and
efficiency as mentioned earlier.

Manifest Software Design Document

 Page 49 of 60

Secondary Personas

Manifest Software Design Document

 Page 50 of 60

Manifest Software Design Document

 Page 51 of 60

The secondary persona is a person who is looking for an app that they can use to
improve their mental wellbeing. This user is looking to journalize their thoughts
and emotions in a way where they can easily go back to them and access them
quickly. They value the ability to customize and categorize their thoughts. Logging
emotions and the reason behind their occurrences is something that this user
wants to do. They can use it to attempt to keep track of their mental well-being.
The same customization and ease of use features we are designing for our primary
personas are also valuable to secondary users.

Manifest Software Design Document

 Page 52 of 60

Competition
Main competitors: Apple’s “Notes”. “Google Keep”. Pen and Paper.

Apple’s “Notes”:

VS
Apple Note’s big strength lies behind the established brand name. Apple is
evidently very established, and most people (especially university students) have
iPhones. The app itself is simple. It has a clean interface, and it allows users to
make notes super quickly. Not many users use the extra features, but the app gives
users a little extra control by allowing them to add images, make folders, etc. Most
of their users, however, use the app only because it the default note taking app on
their Apple device.

Manifest Software Design Document

 Page 53 of 60

While Apple Notes lets the user group their notes into the folders, the UI is very
bland and the user has no control over the colour of the folder, lacking
customizability. With Manifest, the equivalent to Apples’ folders is our boards
which are bold, colourful, and customizable. Manifest’s UI is much more
appealing, and our page placement allows for less white space.

Manifest Software Design Document

 Page 54 of 60

This is how Apple displays your notes once you are in a folder. The user has the
option to make their list view into a grid view, however no other sort of
customizability is available such as note size and colours. The UI in Manifest gives
the user flexibility on how they want to style and organize their notes.

Manifest Software Design Document

 Page 55 of 60

Google Keep:

VS
Google Keep is much more intuitive than Apple “Notes”. This app is mostly used by
the users that we would be targeting. The app has a clean and inviting UI. One of
their main selling points is that it autosaves and can be accessed from any device.
Something you write on your phone will also pop up on your tablet, computer, etc.
Google Keep is also more than just a note taking app. It has features like to-do
lists, reminders and sharing. All in all, the app is intuitive with multiple features
and a very clean UI.

Manifest Software Design Document

 Page 56 of 60

Google Keep is our biggest competition when it comes to the notes view. While you
can move notes around and add colour to them, the user cannot resize their notes,
images, lists, etc. This is the biggest differentiation, giving Manifest the upper
edge on user freedom.

Manifest Software Design Document

 Page 57 of 60

When a note is opened in either of the apps, this is the view that the user will get.
While Google Keep allows you to add multiple elements on the page, like Manifest,
there are setbacks to the customizability. Images are automatically added to the
top of the note and are immovable. Moreover, if you have text on a page and only
want a certain part of the page to be a checklist, it will make everything into a
checklist. With the UI in Manifest, this is solved by giving each element their
respective section and giving the user the ability to move their elements up and
down the page.

Manifest Software Design Document

 Page 58 of 60

Another aspect of Google keep that makes it a major competition is their

reminders integration. You can create a reminder on specific notes, lists, etc., but
there is a major setback. All the elements that appear in the “Reminders” section
are curated from the “Notes” section. With Manifest, users can also add reminders
to specific elements, but the reminders section also acts independently. Users can
add lists and reminders in the “Reminders” section that does not affect anything in
their notes section.

Pen and Paper:

Lots of people still use pen and paper because of the freedom that it gives users.
There are really no boundaries with pen and paper. A lot of people who use pen
and paper might potentially be hesitant to make the switch to a digital alternative
because of their reliance on it and not wanting to change.

Manifest Software Design Document

 Page 59 of 60

Differentiation
How do we differentiate ourselves from competition?

Most of the strengths that each of our competitors have, are going to be features
in our application as well. Simplicity, clean UI, customizability, multiple features,
freedom, etc. All of these are going to be in our application. By making a web app,
we are not restricting users to either Android or Apple. The fact that it is a web
app also allows users to save their data across devices just like Google Keep. Our
app will share some core features with Google Keep but what will separate us
from them is the customizability that “Manifest” will have. The ability of Manifest
to replicate the freedom and customizability that pen and paper brings, while also
having various features that an intuitive app like Google Keep can have, is really
what will separate Manifest from its competition.

Social Media
While social media is not a top priority right now, in the new year, it could be neat
to roll out our app on social media to get experience on that end of the release.
Social media would predominantly be used to introduce key features and tease the
release date. While making a highly designed and functional application is of top
priority, getting your application out there and known is half the battle. This
requires marketing and an online presence, which can be achieved through social
media.

Playtest
On Friday March 19, 2021, some members of the Manifest team attended a playtest
that involved five separate groups analyzing our finalized prototype. This
opportunity helped our team grow and pinpoint areas that we need to focus on
and refine. Getting an unbiased outside opinion helped us see things differently
through the eyes of experienced designers and potential future consumers.

Some of the key takeaways are as follows:

● The background specifically with the icons and lines within the “edit note”
page is too busy and needs a rework. The lines direct the users' eyes in a
specific direction that may not be important.

Manifest Software Design Document

 Page 60 of 60

● In final presentation and the updated Software Design Document, clearly

identify how Manifest is different from other apps on the market and push
accessibility (including fonts for dyslexic, color contrasts, etc.).
● Many testers had questions about customizability, specifically about
changing colors and moving things around, so we need to make it clearer to
the user that this is an option, and it must be obvious in how this can be
achieved.
● We need to ensure that the menu button is accessible wherever the user is
within the app. The tester had difficulty flipping between reminders and
notes quickly, the back button replaces the menu in some cases. Therefore,
if you're in sub notes, you must go back before you can find the menu again,
which is not acceptable.
● A Tester expressed how the “edit note” page is too busy and that we should
consider making the bottom logos hidable by potentially putting them into a
hamburger menu button to free up page clutter.
● There were several questions about bridging the gap between reminders
and notes which we had already intended on doing, but it needs to be
clearer to the user that this is an option. We need to potentially rework an
icon for reminders and prototype the interaction between users and adding
a reminder to a specific note.
● For the updated Software Design Document, the tester would want to see
the standard apps that we are competing with and how they are bad and
dull, then show what ours looks like and how it is better and competes. This
can be done with screenshots. Tester also recommended backing up how
color patterns and note organization is better than others by using studies
to back up what we are claiming to solidify the app.
● There was concern about not being able to add folders in boards to make
sure that our main boards page does not get too cluttered.

Though this is valuable feedback, our group will be actively working towards
making a more accessible application and addressing all the issues that were
brought to our attention by the testers to polish off our app.

Manifest Software Design Document