1

TUNKU ABDUL RAHMAN UNIVERSITY COLLEGE

BACHELOR OF CREATIVE MULTIMEDIA
(HONOURS) IN MULTIMEDIA DESIGN

BHMD 3424: WEB TECHNOLOGY
Group Project:
WEB APPLICATION / WEB SYSTEM
PROPOSAL AND DESIGN








Group Members:
No.
Name Student ID Tutorial Group
Total Marks
(Over 50%)
1 Looi Cheah Sin 13WHR11465 RML3
2 Low Iu Yan 13WHR11460 RML3
3 Ng Wei Zhen 13WHR11462 RML3
4 Oh Yeet Chen 13WHR12033 RML4

Lecturer / Tutor:
Mr Yong Fen Yu

2

Marking Sheet for Proposal Writing

Criteria Marks
Content and Focus (30%): Member 1 Member 2 Member 3 Member 4
Individual section 10%
Group section 20%
Organization of Document (10%):

Style of Writing (20%):

Critical Evaluation / Conclusion (10%): Member 1 Member 2 Member 3 Member 4


Grammar and Spelling (20%):

References (10%):

Total Marks
(30% of the total grade for the group project)
Member 1 Member 2 Member 3 Member 4



Scale Used for Marking:
Impressive 4
Good 3
Average 2
Poor 1






3

Marking Sheet for Product Designed and Presentation

Criteria Marks
Interface Design (30%):
Member 1 Member 2 Member 3 Member 4

Functionality Proposed (20%):

Content of the Product (20%):

Teamwork (10%)

Presentation Skill (10%): Member 1 Member 2 Member 3 Member 4


Total Marks
(20% of the total grade for the group project)
Member 1 Member 2 Member 3 Member 4



Scale Used for Marking:
Impressive 4
Good 3
Average 2
Poor 1





4

Content
No. Title Page(s)
1. Section 1
Background
Introduction to the proposed web application or system
The objectives and goals of the proposed web application
or system
Target Audience
5 - 8
2. Section 2 (Individual)
Application / System Content
Application / System Structure
Data Structure
9 - 33
3. Section 3: Visual Design and Usability
34 - 40
4. Section 4: Conclusion (Individual)
41 - 44
5. Section 5: References
45



5

Section 1: Background, Introduction, Objectives and Goals, Target Audience
Background
A few years ago, if mentioned social design or social innovation, most of the people
would knew nothing about that and maybe some of them would thought about What a
fancy stuff again! Nowadays the situation has been a very big different, the user will be
able to search out thousands of the articles or information about social design on
Google less than half a second.
What is social design? Maybe it would be quite unfamiliar for the Malaysia designer,
but there were a lot of countries already involved in social design. Social design can be
defined as a design process that improving the human well-being and bring about the
social change. The designers role and responsibility in social design are making an
impact in the world.
In this technology era, many people began to rethink the nature of the design and what is
the main purpose of the design. Dissimilar traditional knowledge, design is no longer for
the upper class people, but can do for any person. The social design exists to solve plenty
of social problems, whether it is poverty, lack of water, waste treatment or any other
social issues. Social design brings a huge positive energy to the society, thousands of
innovative design thinking created to provide a better way and product to solve the social
problem.
In year 1972, Victor Papanek mentioned that an argument for the design of real-world.
The argument was about design for who is very important. Compared with the traditional
design professional, consideration in sociology products or services to meet the peoples

6

basic needs is important rather than fulfill the desire of the people. In social design, it
emphasis design should help those 90% public demand, not just those 10% who can
afford the design cost.
We believed that everyone on the planet can be a designer and live the world without
strangers. Therefore we would like to propose an idea was about Design Me apps, it
was a combination of photo editing app and communication app. Its function wills
slightly same with the existing video chat apps - Azar, a dating app named BeeTalk and
some popular chatting app such as WeChat, Line and WhatsApp.
Introduction to the proposed web application or system
A concept app that come with the function of photo editing and private chat get the
attention and positive feedback from the participants. We went through an online survey
in others subject and get some feedback that related to the Design Me app. (Refer to
Figure 1.0) The purpose of create the Design Me apps is giving a chance to everyone
having fun with their creativity, release stress and live the world without strangers.
The idea for create Design Me app was actually come from those photo editing apps
such as Instagram and Pinterest and also some of the online chat apps such as Azar,
BeeTalk, WeChat and Line. AZAR is an app that only available for the android user. It
could let the user random video chat with the strangers, when you dont like to chat with
the person, you can direct swipe to the next person. AZAR was very popular in the
Taiwan, it bring a lot of fun for the young generation. We hope that DESIGN ME bring
the same objective as well.

7

Design Me app creates to solve the problems like help the users release their stress.
Having fun and stimulate the users imagination on someone photos to release their stress.
Either it is jokes or nice design. Nowadays there are a lot of smartphone users, but most
of them are actually not familiar with the design. For example like our parents know we
are studying design course, but we believe most of them do not know what we actually
do. This app will be giving a chance for them to playing the design as well.
Besides that, this app is actually can link the human together. For example the user can
leave a message to others user and add them as friend in the app. This app will more
focus on help users release stress, closer the connection between strangers and increase
the creativity of the social.
The objectives and goals of the proposed web application or system
To know the important of creativity and design exist on the planet
To increase the creativity of the planet
To solve the problem of Asian less interact with strangers
To solve the problem of human live with plenty of stress
To understand the people needs in their life for the purpose of release stress
Target Audience
Design Me app will be design for all age. Because we believe that design and creativity
will not separate as you and I. In this technology era, some aunty uncles who already
become the grandparents also own their smartphones. Mostly, they will using their
smartphone for the purpose of playing games, watching drama, communicate and access
to social networking. Nevertheless, we believe most of the elderly will not using photo

8

editing apps. Thus they will not know about what is design and they will not understand
why youth keep taking photo and upload to social networking as well. So that, the first
target audience will be elderly. Sometimes the parents do not know what their children
did will cause a huge gap and communication hinder with their children. For example
like some design students parents will know their children are studying design course,
but we believe that most of them do not know what their child actually learn and what
design represent.
The second target audience will be teenagers, especially for Asian. Why Asian? From the
research, we know that Asian always not initiative to be familiar or know strangers.
Asian is defined that they are uses the less open communication style compare with the
open styles of western. But go through the communication app, they will be more brave
compare to face to face communication. Besides that, chat through the apps will makes
them feel more comfortable and relax. This is because that Asian will feel unsafe and
anxiety when had the interaction with the strangers. The culture and environment makes
them not dare to communicate with the strangers. Through the Design me apps which
are adding the function of chat room, it can help to build the trust among the community.






9

Section 2: Application / System Content, Application / System Structure, Data
Structure, Application / System Design Sketches (Individual)
LOOI CHEAH SIN
Application / System Content
The purpose of creating design me apps is wanted to let the users to develop their
creativity on editing the photo and improve the social interaction among the community.
Inside of the design me app, users can upload their photo to their personal pages to let
others people ranking their photo and edit their photo. It is no need to get the
authorization, the users can swipe the photo and choose to edit it like others photo editing
apps. The design me apps makes meeting someone through photo is as simple as a
single swipe .People can swipe to the left to view the photo and edit with added the
effects on it. There a lot of free decorations were supported in the edit tools. There are
over 500 cute stamps, frames, filters and funny stickers, funny background with different
seasons and events is provided in the apps. The decoration tools such as lettering, pen,
eraser, and more also had included in the design me apps. With this app, users can edit
images however their like. It allow the users to easily place a selection of hats, wig, dogs
ear and others funny item to the faces of the people who upload the photo. After the users
finish to edit the photo, they can share it to the uploader only and the photo cannot be
saved as to prevent the photo be stolen. When the uploader view the funny photo, they
will laugh, and then there will start a conversation with each other .It can improve the
relationship among the community through this funny way.

10

The design me apps also had the unique function which is it users only had one chance
to help the uploader edit the photo. Users cannot preview back the previous photo; so
when the users use the design me apps, they will slowly swipe the photo and choose
the photo they wanted to edit.
In addition to that, the Design me is using the PHP and Ajax system which is support
the fun conversation function. The design me apps can let the editor chat with the
uploader by using the Ajax system start by leaving a message. The purpose of added the
chat box function is to let the users meet the new friends .Users can leave a message to
the uploader and start to chat with each other if the uploader willing to start a
conversation with editor by approving their friend request . Users can choose to
communicate by speaking or text. It is something like Wechat communication apps
which is able to send the multimedia messaging such as voice message, text, image and
others. Others than it, the design me apps is using the peer monitoring system which is
to protect the users safety. If the uploader feel like there have any offensive or
misbehaviours on others edit their photo, they can report the content. So, this will makes
the user enjoy the fun of design me apps without wondering their photo be pirates.
Besides, design me also providing different type of language as wanted to make it
friendly to uses and it also wanted to attract the different country of users to play it.
Application / System Structure
First, users click to open the design me icon in their devices, it will jump to the
interface of loading pages. After finish loading the pages, it will ask the user to sign up or
connect their Facebook account to finding out their friends list. In the register pages, the
basic information of the users is needed such as the gender, country, age and others. It

11

also will ask the users to choose the language they prefer to uses in this app. After the
user finish to fill up their information, it will turn to the quick tutorial page which is
teaching the new user how to get started on using this app in the faster way. User can
click the skip button in the bottom of the tutorial pages for straight jump to the page of
swipe photo. In that page, it will show the swipe button in the center of the pages.
Before start to view the photo, it will have the option button to let user click to choose on
the gender or country of people they are interest. After that, if the users wanted to view
next of the photo, he/she only need to uses their finger swipe to the left and choose which
of the photo they wanted to edit. Double tap on the devices screen to like the photo, and
then users can click on the edit button to jump into the edit pages. Besides that, it will
pop out a small notice which is remind the user they just have one chance to edit each of
the photo .In the edit pages, user can add the funny items and effects however their like
such as stickers, draw, filter and others. It is easily edit the photo with the touch and
pinch-to-zoom the interface. After the users finish editing the photo, they just need to
click the share button and leave a message to the uploader after help the uploader edit
their photo. The notifications icon will light out when the uploader giving feedback to the
editor. Besides that, the user also can choose to upload their photo to their profile page by
click on the My profile icon at the side bar of the swipe pages. It can let others people
edit their photo after they upload their photo.
In addition to that, when at the swipe page, user can send the friend request to the
uploader by click the add friends icon the top of the page and start to wait the reply of
the uploader .User can check out their friends list in the page of conversation room. A
person who is accepted the friend request will auto appeared in the friends list so that user

12

can start chat with each other. In the chat box page, to speaks, users only need to press the
push to talk button on the bottom of the chat box. The flow chart of the design me
application structure will been shown in Figure 1.0.





















Figure 1.0 Looi cheah sin Application Structure of Flow Chart



Open Design me apps
c
Loading pages
Sign up / connect with Facebook
Jump to quickly tutorial of the apps
Click Start to swipe button
Conversation room button
Swipe to left to view photo
Option button
Add the effects/funny items
Click share & leave a message
Bottom side got Skip button
Text / voice message
Click edit button
Like / Comment
Click add friends icon
Choose the gender
Choose the age
Choose the country
Start to swipe photo
Notifications
Feedback of Uploader
Finding friends list
Upload photo button
Capture photo/ choose
the photo in album
Upload
My Profile page

13

Data Structure
Google cloud platform
The data storage used by Design me mobile app is the Google cloud platform .Google
cloud storage is the tools that enable build, test deploy applications and store the data.
Besides that, cloud storage also provides a range of storage services allow the users to
access the data store with Cloud SQL. It can host the backend for any of the mobile
app. It had been provide a simple API that allows design me apps to manage the photo
data programmatically. Google cloud platform had been developing their own API called
XML API to allow the user parsing their response on the apps to the cloud storage.
Design me apps need the cloud storage to store the photo and self-information of each
of the user. Due to the Google cloud API system can collect the data of each of the user
uploaded, so Design me apps can access the cloud storage system to run the data.
MYSQL to run the message conversation system
Through the research, it is found that Mysql is one of the databases that can use in the
design me apps to support the message conversation system. Developers can create a
database through Mysql which is about the conversations contains all messages of the
users in design me apps. In research, Facebook messenger also is run Mysql to record
the data of the user message content. Besides that,it will display the message of the
screen and save the message including the name of the sender in our MySQL database so
we can monitor and retrieve whatever conversation that our user has in our system.It is an
efficient method help to manage the data of the conversation message system in the
Design me apps.


14

Peer-monitoring system
Nowsadays, there are a lot of mobile application are using the peer monitoring system to
protect the security and privacy of the users as there had an insurmountable security
problems when using an apps. The peer monitoring system is used by the Design me
app and it will have a security check to control the security of the app system. The
purpose to have a check is to ensure that the security of the design me app is not being
threatened.













15

LOW IU YAN
Application / System Content
In this new era, technology is very important for us and it can make our life more
convenience. There are a lot of communication applications existing in the market. For
example of V-Chat, Azar, Facebook Messenger and so on. However, how can an app
help on in our daily life and also face some problems? We are planning to create an app
with combination of communication app and photo editing app. The main subjective of
creating this app is to increase the creativity at the same time also improve the social skill
of Asian people by swiping away or a single continue on editing. Besides that, we also
hope that this app can help to user to exposed themselves and increase the cognitive of
design from the people who are not in design field.
The name of this app is Design Me. This application including some of the functions
which is taking pictures and selecting picture function. After taking the pictures can let
the users to upload their pictures and give others who like to want to edit the photos to
download it. For example, once you found some pictures that you wish to edit, simply
add the photo and start only a single edit. Besides that, this app also can include the photo
editing functions. Everyone has the chance to add in a design on the picture. However, if
they do not want to edit that photo, they can just swipe it away and choose other photos.
By adding this function, users can edit and design the photos as they like at the same time
they can relax themselves and exert their creativity.
In Design Me app, there will have a setting of a photo can only let 10 users to add in
only one design and they are not allow to see back until it finish editing by 10 of the user.
After that, the owner will get to get back a new. After that, 10 of the photo designer can

16

chat with to each other. There will also have the function of photo designing ranking.
Moreover, the user also can keep the photo in your own album. If they want to view back,
they can use click in the photos history. However, from a survey conducted earlier, if
there is really existing of this app, result showed that some of the users will feel insecure
to chat, alternate with those people they do not know and do not want others to get their
photos. So I have the idea of creating a function which can let the user to create their own
chat room by adding in those people the users belief in. For example, if users think that
they want to chat with the photos owner, users can send the friend requests to him/her
and they can chat privately. After that, they can start to share their photos and edit it.















17

Application / System Structure


















Figure 2.0 Design Me Application System Structure

Refer to Figure 2.0 Design Me Application System Structure, showed the first page is
start with the welcome page together with the logo once you click in this application.
Then come into the Login page or Sign Up page. First time users need to sign up before
they start using this app and the others users who have sign up can just login or set up the
setting of keep them sign in. After that, there will have an introduction for the new users

Welcome Page (Logo)
Login Page/ Sign Up Page

Swipe Away
Chat Room
Share & Upload
Comment
Upload
Ranking
Edit
Photo
History
My Profile
Introduction
Skip
Home Page

Swipe Me
Capture Photo/
Choose Photo
Swipe / Edit
Basic
Info
Friends Lists
Setting

18

and they can also choose to swipe and skip it. After the introduction page, is following by
Home Page which consists of three buttons which are Swipe Me Button, My Profile
button and Chat Room button. In Swipe Me page, there is a Capture Photo/ Choose
Photo button which lets the users to take photos or choose photos and upload to the let
other to design it. Besides that, there is a Swipe/ Edit button which let the users to swipe
away or choose the photos they want to edit. After the users edit the photo will directly
upload it and the users can comment and rank the photos.
In my profile page, there are 3 subpages which are Photo History Page, Friends List Page
and Basic Info Page. In the Photo History Page is the page which the storage of the
photos which had been edited by others and also the users himself. In the Friends Lists
Page, there will have all of the information of the users friends and the users also can
add friends. In the Basic Info Page, there is the page will consist of all the basic data of
the user and also can change any setting of the apps from there.
Lastly, the Chat Room Page is the page which let the users to add in their friends to chat
and have a private editing photo around the users friends.
Data Structure
Data Storage
The data run by Design Me application to store some of the data in this application is
OpenStack/Swift. Nikolaus Rath (2008) stated that, Swift is an open-source server
application which also the cloud storage of OpenStack. By using this OpenStack Store
which is a strongly consistent storage file system, it enables Design Me application to
store, delete and also retrieve the data. In this Design Me application, there is a profile

19

page which consists of photos storage, friends list and also user data. At the same time,
the more benefits of using OpenStack/ Swift, is because of it allow Design Me
Application to store many of the users data. Since this data can let the application to store
many of the data, Design Me Application can let the user to store their photos after
design by others, store users own information and also store the friends information. In
addition, the users will not scare that their data will be losing until they want to delete the
data. Moreover, the swift also will help the app to store the data of app's messages. All
the messages data also will be set as the privacy as the swift is protecting the privacy of
the application.
Chat Box
Moreover, an article post by Pingdom (2010) states that Facebook Chat is using Erlang to
support the chatting system. This Design Me also has the function of let the users to
open their own chat box and chat to each other. So that, Design Me Application also
can use the Erlang together with PHP for the front-end to supporting this chat box in this
application. In addition by adding in the Thrift system also can allow the use of different
languages and to make the Design Me Application can use different type of
programming language on development.
Comment System
Design Me Application also can include SQL to support the comment system and the
ranking function. After the users of Design Me Application comment and rank on a
photo, this SQL System will run and start to calculate the data had been made by the

20

users. After that, the result of the photo ranking will be showed, and then the users can
have some conversation about the result.

NG WEI ZHEN
Application / System Content
Design Me, from the name already can know it is an app about design stuff. What is
Design Me? Design Me is a combination of photo editing apps and chatting apps.
From some survey analysis (Refer.), I found out most of the Malaysia designer agree
that our society is lack of creativity and design industry was not so supportive in
Malaysia. Thus, I have an idea to create an app that relate to the design industry. Main
function for the Design Me will be edit photo. From my research in others subject,
most of the people agree that photo editing can consider as design and it can improve
their design skill as well. (Refer.) Thus, in the Design Me app, it will provides some
basic and useful editing tools to the user such as digital filters, beauty function, lighting,
stickers and other basic adjustment tools. The user can help strangers and also their own
to edit the photo by using those provided editing tools.
In addition, the most interesting feature in Design Me is let the user help the strangers
to design their photo. The user can upload an original photo to the server first and then
who are playing the apps at the same time can help the person edit and design the photo.
The user can make the photo be beautiful or terrible just depends on them. If the users
dont like to help the person design the photo, they can swipe the photo away and choose
another one. The swipe function will be slightly same with an app named BeeTalk

21

which was officially launched on November 2013. BeeTalk was a combination between a
dating app named Paktor and a famous Chinese chatting app WeChat. BeeTalk is
another dating app which very popular recently. One of the features in the BeeTalk is the
user can browse the profile of other user and swipe to right to Like and swipe to left for
Dislike. This function was very similar with one of the function for Design Me app.
By using Design Me app, the user can make friend with the other users. In the moment,
Design Me will not let the user access their contacts and social networking friend lists
by using Design Me. This is to avoid they keep contact the person in their environment
only. The aim of the Design Me app is to increase the interaction between the strangers,
so that it will be more focus on let the user to be friend with strangers rather than their
friends in real world. So that, the user only can adds the other members in Design Me
as their friend. But for the future, if necessary Design Me will consider to allow the
user connect to their social networking such as Facebook, Twitter, Instagram and
Google+.
Moreover, Design Me can consider as a dating app as well. The reason is Design Me
may let the user to know new friend by using the app. However, due to the security issues,
the app only allow for the user who over 18 years of age from download and using the
app. It is because for those who under 18 years old, their mental is not mature enough and
maybe will be take advantages by some unprincipled fellow or bad man. Therefore,
Design Me will look important in the security and privacy problem. There were some
privacy settings such as the user can set their photo as open to public or only for
friends to prevent some bad man to stole their photos for other use.

22

Another interesting feature is the user can help others design their photo for only 1 time
and then the photo will pass to the next user to continue design. There were a limitation
for around 5-8 users can design on the photo. Because too many design stuff on the photo
maybe will make the photo look like extreme messy and ugly. Although Design Me
would like to bring fun effects to the user, but the app also wish to hold some quality
works. Not the photo design in ugly only can make fun, but all those beautiful and nice
photos also will bright up the users sight and mood. People always get attract and love
with beautiful things or pictures.
Design Me exist to solve the problem of lack of creativity in our society and increase
the communication among society.
Application / System Structure
Same as most of the photo editing app, Design Me app will has s few slide about the
introduction and how to use the Design Me app. The user can swipe left to Next the
instruction. The introduction slide only will appear for the first log in to the app. This will
make the user clear about how to use the app. After that, it will automatically turn into a
sign up page to let user to fill up their basic information, email, password and nickname.
The user can choose sign up as a member to enjoy the service or they can select skip
and see around first.
Main also known as Home will show some newest and best designed photo. For the
user who did not sign up as a member, I call it Guest. Guest only can view the photo
show on the Home and they cannot enjoy the service of help others edit the photo. The
user should sign up or login as a Design Me member and then only can enjoy the

23

service about photo editing functions, help others design the photo and add friends. As a
member, the user can go to the Explore page starting their design journey. The user can
swipe to left or right to choose their favorite photo and start to help the person design the
photo.
After they done for helping other users design the photo, they can select Done and
leave a message to the person. The user also can send a friend request to the person. The
user can chat with their friend in the chat room that provided in the Design Me app as
well. Inside the Friends page, the user can chat with their Design Me friend in the
personal chat room and they also can create a group chat when they have mutual friends.
Besides that, the user can view the status update of their friend in the Moments and do
some friend and profile setting in the Friends page.
The user can access to the Function page and use the provided photo editing tools to
edit their photo or capture a photo and then share to the strangers. User can edit their own
photo by using the provided editing tools and also available for save in their camera roll.
Lastly is about setting functions, the user can access to More there to do some problem
report, rating, language changing, notification setting and privacy setting at there. Refer
to the Figure 3.0 to see the clearly flow about Design Me app.

24


Figure 3.0 Flow of the Design Me app



25

Data Structure
OpenStack
OpenStack is a cloud platform for project management. It also is a provider of software
for public and private cloud construction and management of open source projects.
OpenStack is an IaaS (Infrastructure as a Service) component, so that anyone can create
and offer their cloud computing services. In addition, OpenStack is also used to establish
a "private cloud" inside the firewall, to provide institutions or enterprises shared
resources within the various departments.
Design Me app can use OpenStack to storage the users information, users chatting
history, photos and others relevant message inside the app. The first step that Design Me
should do for storage the users data is to set the right hardware and network environment.
Once finish the hardware and network set up, the next step is to determine all OpenStack
components should deployment at where. For safety issues, the most critical is to ensure
that every part is installed on a secure host and only need to attach it on the network, thus
can start operate the cloud. Only two parts need to be exposed to the outside world, it is
API server / Web console (if enabled) and network managers. If these servers demands
are increasing, Design Me can even use a third-party network interface to isolate traffic
generated by backend management of user connections.
Design Me app contains a lot of functions that have to use the cloud system to store the
data. Firstly, the users profile information must be collect by Design Me due to
prevent the unprincipled fellow misuse the Design Me app. For example, when user A
found out that user B is keep harass him/her, user A can report user B and the

26

management of Design Me will take action to against user B. Once we storage the
basic information of the user, we can be faster and effective in searching out the user.
NoSQL
NoSQL (NoSQL = Not Only SQL), is a new database revolutionary movement. Opposed
to the overwhelming use of relational databases, NoSQL supporters more promote the
use of non-relational data store. There are many significant differences between SQL and
NoSQL, the most important is the NoSQL do not use SQL as a query language. May not
need to store their data in the form of fixed pattern, and often avoid using the JOIN
operation of SQL. Generally have the features of horizontal scalability. Horizontal
scalability refers to the ability to connect multiple hardware and software features, so that
multiple servers can be viewed as a logical entity. NoSQL has two features to
implementations: the use of the hard disk, or to a random access memory for storing
carrier.
MySQL is a kind of traditional relational databases, it has good performance, high stable,
well-historical tests, easy to use, powerful, and also accumulated a lot of success stories.
But later, with the rise in visit to the forum or website, almost the majority of sites are
using the MySQL architecture began to face the database performance problems. It is
because MySQL database is often stored in a number of large text fields, resulting in a
database table was very big, when doing database recovery will be very slow and not
easy to quickly recover the database. Therefore, Design Me should using the NoSQL
rather than MySQL.

27

With the rapid development of web2.0, non-relational, distributed data storage has been
rapid development. NoSQL is one of the non-relational data store. Thus, Design Me
can use NoSQL for collecting the documents, column stores, map databases, xml
databases. NoSQL databases have very high read and write performance, especially in the
large amount of data also same outstanding. This is because of its non-relational and
simple structure of the database. Design Me using the NoSQL can store custom data
formats at any time. Design Me can use the NoSQL to collect the chatting history of
the users. The chatting history will be a very large amount of the data for the app. So that,
the non-relational database and easily to extend bring a lot of benefits to the Design Me
data storage.
NoSQL databases appear to cover the weakness of relational data (such as MySQL) in
some aspects. In addition, in some ways it can help Design Me save greatly of
development costs and maintenance costs.








28

OH YEET CHEN
Application / System Content
The Design Me application is our first attempt to have a better connecting people via
social design such as editing other users photos, and building new and meaningful
relationships between the society. The Design Me just have to swipe away as you roam
from Malaysia to Asia countries, keep swiping and it will place the users in different
cities around the Asian countries, editing photo with other Design Me netizens. The
Design Me can let users expose themself to different cultures, creativity and languages
instead of sitting at home doing nothing. Latest updates include abilities to add friends
and send free text messages to friends or other users. The user can add friends and
manage their friend list. Any of the users can left a comment or feedback through the
edited pictures, and they can manage their friend list simply by swiping from the left in
the home screen. It is available more than 1 language such as Mandarine, Japanese,
Korean, and so on. The users can now communicate to friends from around the globe in
their native tongue. Learn greetings and phrases in different languages and impress their
new friends using Design MeSay hi system. The Design Me also provide contact list
management, the users can add all the cool people to their friend list. Now they can build,
and manage their contact lists from all the different Design Me folks they have
communication with. This just can achieve the objective about increase the interaction
between strangers.



29

Application / System Structure






















Figure 4.0 Design Me Application System Structure
Refer to Figure 4.0, when the download the Design Me app, the user can login or sign
up for their accounts. After login, it will go to the main scene which is home scene. It
contain a personal post on photos and global feed for other users in Asia to post photos.
The users can swipe until the photos that they wan with detailed and they can use their
creativity to edit and design for the users photos. Every users will received their edited
photos and comments. The users can become friend for their friend list from strangers
through the way of social designing for each other.

Login
Sign up

Home
Photos
Asian Feed
Personal
Account
Add Photo
Detailed
& Creativity

Users
Photos

Users
comments

Received
edited
Friend
list


30

Data Structure
This Design Me is by using the MongoDB database, is an open-source document
database, and the leading NoSQL database. Data in MongoDB has a flexible schema.
Unlike SQL databases, where you must determine and declare a tables schema before
inserting data, MongoDBs collections do not enforce document structure. This flexibility
facilitates the mapping of documents to an entity or an object. The key challenge in data
modeling is balancing the needs of the application, the performance characteristics of the
database engine, and the data retrieval patterns. When designing data models, always
consider the application usage of the data (i.e. queries, updates, and processing of the data)
as well as the inherent structure of the data itself. When the user A of Design Me will
send the data to MongoDB database and it will collect, save the data and store at the app
database. The other users from app can achieve the data from the app database to view
the user A pictures such as selfie and so on. When the other users finish edit and
comments the photos that they swipe, they will retrieve back the data to app database.
Each of the photo in the app are limited to 10 users for edits. The user account database
will stop it to achieve or retrieve the database because it hits the limit. In the same time,
the data still will store in MongoDB database, so that the people still can view the gallery
that edited or original. In addition, the user can delete their data through the user account
database.




31

Finalized Application / System Content, Application / System Structure, and Data
Structure
Application/System Content
In the Design Me app, it included total 3 main functions which is photo editing and
chatting function. The user can choose edit their own photo by using the tools have been
provided and do not upload to the server let others help him design. The user can save
those edited photo into their phone camera roll or gallery. Besides that, the user can add
friends in the Design Me and chatting with them by using the chat room service. The
user can using the chat room service just like normal use those existing communication
app like WeChat and Facebook Messenger, it was extremely easy and suitable for the
user.
In addition, we were adding an interesting part in the app for the user to explore in the
app which is swipe the peoples photo away. The user can choose to swipe peoples
photo away, give him a like or edit the photo. There was one of the filter function will be
designed on the top left when swiping the photo. The filter function also can be known as
one kind of search function. The user can select the specific gender and country by using
the filter function. The app will automatically help the user arrange all the photo and only
show the photo that follow the users request.
Lastly, for solve the security issues, the app only opens for those who are over 18 years
of age to use and register. Furthermore, inside the app also will provide one functions
named Report in setting page. The user can go through the Report to report
unprincipled fellow. This was designed to avoid unpleasant incidents happen.

32

Application / System Structure

Figure 5.0 Design Me System Structure Final Version




33

Data Structure
We will using the NoSQL for collecting the data due to it is using non-relational data
store. NoSQL better than MySQL due to MySQL database have a lot of technical
problem. For example, MySQL often stored in a number of large text fields and cause its
database table become very big. Thus when doing database recovery, it will be very slow
and not easy to recover the database rapidly. NoSQL databases appear to cover the
weakness of relational data (such as MySQL) in some aspects. Therefore, for manage an
effective app, we choosing NoSQL rather than using MySQL, even MySQL still very
popular and stable nowadays.
Google cloud storage is another database that can use by Design Me app for store the
plenty of photos. It is a tool that enable build, test deploy applications and store the data.
Design me apps need the cloud storage to store the photo and self-information of each
of the user. Due to the Google cloud API system can collect the data of each of the user
uploaded, so Design me apps can access the cloud storage system to run the data.







34

Section 3: Visual Design and Usability
Logo Design of Design Me App

Figure 6.0 The logo of the Design Me app.
Refer to the logo of "Design Me" app, a very characteristic man will be the main object
for our logo. We designed the man in very creative way such as help him to cut a
womans hairstyle, wear a trendy sunglasses and has a mole. This make him looks like a
trendy person but also with the funny characteristic. The beard will make him look like
angry, but when it combines with the mole, then it will give the audience feel funny.
With a different color sunglasses will bring out the trendy feel, because recent year 3D
stuff are very popular since the movie Avatar showed on the cinema in year 2009. Thus,
we believe the man also represent Design Me app, an app that bring happiness to the
audience.
Look and Feel of Applications Design
Overall the color using in Design Me app is yellow, grey and white. The light color
using for the app is due to let the user feel warm, free and relaxing when using the app.

35

The user will feel that bright, fresh and clear at the first sight for "Design Me" app. It is
because we using the yellow color to be our main color for the app. Yellow represent
bright, rich, characteristic and king in Chinese culture. Since we focus on helping Asian
increase their interaction with the strangers, so that we believe them will get attracted by
the yellow color.
All of the pages inside the app were designed look like existing photo editing app. It will
let the audience know it was a photo editing app when view the Top and Explore
page. Moreover, the user can using the chatting room function in the Friends page, the
layout will keep in extremely simple like Facebook messenger app. This was designed to
avoid the user feel uncomfortable and complicated when enjoy the function.
All the fonts color and background color are in a well combination. We using the grey
color background and yellow words to make the bottom bar look contrast and clear. This
can help the user see clearly and select the correct icon. For the explanation for Swipe
function, we also use dark grey background and white color fonts and icon to let the user
feel clean and easy to read.




36

Sketches of Design Me App

Figure 7.0 Login & Top Ranking Photo Page


Figure 8.0 Explore Page & Profile Page

37


Figure 9.0 Design Functions & Start Swiping Photo Page

Figure 10.0 Swiping Photo & Editing Page

38


Figure 11.0 After Done Editing & Friends Chatting Page

Figure 12.0 Setting Page

39

Final Digital Visual Design of Design Me App

Figure 13.0 The visual design of the Design Me app

Figure 14.0 The visual design of the Design Me app

40


Figure 15.0 The visual design of the Design Me app

Figure 16.0 The visual design of the Design Me app

41

Section 4: Conclusion (Individual)
LOOI CHEAH SIN
Design me app is believed that it can work and launch in the market as it had the
storage and data system that can makes the apps launch. It also believed that it can help
the Asian to initiative communicate with the strangers. It can improve the social
interaction among the society. Our app also wills makes the society becomes more
creativity. Im very appreciate this time experience for creating this concept app,
although we only doing a prototype for the app. But it was a valuable experience and
progress for us to work together.
The difficult that I faced when doing this assignment is we were not familiar in data
structure, we need used a lot of time for researching the relevant information. We also
shared our knowledge together with the group members and doing a lot of discussion. In
the end only come out our final ideas for creating the apps. In addition, I handle the part
of doing motion for the prototype. I need used a lot of time to explore the motion and
arrangement of the design. When I using After Effects for doing the prototype, I also
facing the problems of not responding. This was training my patient as well. Overall we
are enjoying and satisfied what we are doing.
LOW IU YAN
By creating this Design Me Application, I believe that can increasing the creativity and
the communication skills of Asian people. It is because, from using this app, the users can
learn and see other users design and rank the photos. Moreover, by playing this app, the
users may have the chance to have some interacted with the strangers at the same this,

42

users communication skills also can be increase. Besides that, Design Me Application
also has the private chat room for the users, so that the users will feel more safety to
upload their photos to let other users to edit it. Moreover, by using this application, many
of the users may have the idea and knowledge about what is design and everyone also can
be the designer.
In the other hand, I had faced some problem when doing the data structure research that
can be used in Design Me application. I do not know whether the data structures I
found are correct or not because this is the first time for me to this kind of research. In
addition, I also handle the part of creating and doing all of the icons that had in this
Design Me application. I had do some research and reference on seeing the design of
other application icons. Moreover, I also help to do some of the design layout of this
Design Me application. In a conclusion, I was so happy and satisfy that we had done
our project in time and I believe that this Design Me application can achieve the object
of doing this application.
NG WEI ZHEN
What is the technology? It is not a part of human body, it is a scientific, comes from
manufacturing and with a useful purpose. Technology was something happened with
human physical or mental action, some thought, tool and it may be a tangible or concepts.
The people's point of view, do not attach importance to material products but attention to
improving human life that it brings, it is a must in the interest of the public.
Almost everything relate to the technology in our daily life. Technology is keep changing
human life and brings a lot of benefits to the human. Thus, we study in what kind of the

43

web technology can increase the creativity of our society. we would like to bring
Malaysia society into an innovative society, because we believe that everyone in the
planet can be the designer and the beautiful things will bring us into a happy mood. From
some survey results, it showed that a photo editing app can increase the design sense and
skill of the user. Thus, an idea about Design Me app was come out.
The difficult that I facing for doing this assignment was I did not familiar with anything
about web technology. I learned website design and some basic coding before, but I
really never touch deeply about the web technology part. It really was a huge challenge
for me to conduct the research. When doing the research, I did not know where should I
start and what should I find. Thus, I discuss with my group member and finding the
solutions together. We always keep discussing by using Facebook and face to face
discuss to make sure our progress of assignment was working smoothly. At last, we were
trying our best to understand those data structures explanations and complete the
prototype as our wished. For conducting this assignment, I have getting more knowledge
about the web technology. This will brings me an advantage for the future.
OH YEET CHEN
The Design Me app can give people to explore in creativity and design through editing
other users photos. Besides, this app also can help those people who not dare to interact
with strangers and lack of motivation to communicate with the people in the first sight.
The photo editing apps come out with a chatting function that can improve the creativity
and interaction among the society at the same time. People can use the chatting function
to ask about the review and suggestion of editing the photo and it may comes out some

44

creative ideas on edit the photos. In addition, this Design Me is also a chat apps to
communicate with the people they dont know and the users also feel more comfortable
compare with face-to-face communication with strangers. Lastly, the Design Me app
can make the world become more creativity and it will closer the relationship between
people and strangers.














45


Section 5: References
MongoDB, Inc 2013, Data Models viewed 24 July 2014,
<http://docs.mongodb.org/manual/data-modeling/>
Nikolaus Rath 2008, Storage Backends viewed 25 July 2014,
<http://www.rath.org/s3ql-docs/backends.html>
Pingdom 2010, Exploring the software behind Facebook, the worlds largest site,
viewed 25 July 2014, http://royal.pingdom.com/2010/06/18/the-software-behind-
facebook/
Sixthlife, inc 2011, 10+ Live Chat System PHP Scripts, viewed on 2 August 2014
<http://sixthlife.net/blogs/10-live-chat-system-php-scripts/#.U-cuoDZmim6>
Srinivas Tamada 2013, Facebook Style Messaging System Database Design., viewed
on 30 July 2014, <http://www.9lessons.info/2013/05/message-conversation-database-
design.html>
Stack exchange inc 2014, Best way to store chat messages in a database?, viewed on 2
August 2014
<http://webcache.googleusercontent.com/search?q=cache:http://stackoverflow.com/quest
ions/7063051/best-way-to-store-chat-messages-in-a-database>
Victor Papanek 1972, Design for the real world; human ecology and social change, New
York: Pantheon Books. pp 60.