1. LET’S LIVE 3D DESIGN (LL3D)
Muhammad Nur Thaqif
Md Rajab
Johor
thaqif_rajab@yahoo.com
Aminah Mustaffa
Labuan
Aminahmin94@gmail.com
Tg. Shamimi Dahlia Tg.
Shaiful Anuar
Terengganu
Sharmin1006@gamil.com
Harnasyrin Afiqah Hakimi
Negeri Sembilan
Ayinrain94@gmail.com
INTRODUCTION
Senorsenoritas is a group formed by four which are Aminah
Binti Mustaffa, Tengku Shamimi Dahlia Binti Tengku
Shaiful Anuar, Muhammad Nur Thaqif Bin Md. Rajab and
Harnasyrin Afiqah Binti Hakimi. We are second year
Computer Science students majoring in Bioinformatics. For
Human Computer Interaction (HCI) project, we are
required to develop an application based on our own design
and implementation. In this project, our roles are as follow :
 Thaqif – Project Manager
 Shamimi – Project Manager Assistant
 Aminah – Data Administrator
 Harnasyrin – Application Designer
PROBLEM STATEMENT
Try to imagine when we want to design something, like
clothes or a cartoon character, or even something larger
such as designing a house. Firstly, we need to sketch the
design into a piece of paper and after that we will construct
the real thing. So, this is where the problem comes, what if
we doesn’t like what we have built? As a result, we need to
start all over again and trash out the older design.
Therefore, this kind of traditional method of designing and
bring the design into reality costs us a lot of time and
money if something ever goes wrong in the method.
TARGET USERS
Our target users are everyone that are creative and able to
create something out of their own creativity. However, this
application are likely to be used by designers out there, no
matter which field they came from, such as fashion or
architecture or even the freelancers.
PERSONAS
Inah Allia Solehah is 12 years old child. She likes to spend
her time with sketching. When done with sketching, she
likes to apply the sketch to a drawing software. However,
she is tired of the complicated software and it is hard to
understand how to use it.
Tanner Patrick is final year of graphic student. He loves to
play games online. He hopes that one day he can develop
his own game with a high quality graphic interface. At this
time, he really needs of a software that can help him in
designing the game, especially in designing the characters.
He wants the characters to be in three-dimension state so
that they look more real and alive.
Muhammad Sabarudin bin Yusuf is 25 years old working as
an architect. He just started his career in a big company. He
is currently searching software that have 3D features so that
he can present his proposal more realistic to his client.
23 years old Sabariah Binti Muhammad Nur Thaqif is an
Art teacher in high school. She wants to produce a colorful
drawing sample that could help her with her teaching in
class. However, she still could not find any software that
can satisfy her expectations on the coloring method.
TASK SCENARIOS
Inah is a 12 years old kid who likes to sketch and draw
comic. Then, she found a new software to help her drawing
her comic. However, the manual is difficult to understand
and the interface is too crowded . She hope that she can find
a software that has simple interface with understanding
manual and thus, would satisfy her expectations.
Tanner Patrick is a graphic student. He has an assignment
which is to develop a game. Before designing the
computerized game’s character, basically he needs to sketch
on paper first, then he will need to draw again using the
software. This method is quite difficult and consumes a lot
of time to complete as he’ll need many steps to be done in
order to finish designing the characters. He want a software,
that would make it easier for him in creating 3D characters
for his game which could also providing various choices of
3d shapes so that he can just pick any shapes that he wanted
and drag it to the design.
Sabarudin is an architect in a big company. He needs to
prepare his model plan and his project’s blueprint for the
project he’s assigned with. Usually, he will bring his
blueprint to present the project to his team or clients.
However, this old fashion style is not efficient, as they
cannot review in more realistic features.
2. A problem also occurred before he starts to work on the real
prototype. He wants to make sure that there will be no small
mistakes on his design so that when he working on the real
prototype there will be no problem or errors. He needs a
software or hardware that can help him to detect any
mistakes where he can re-edit the design. He also would
love any software that can save his budget and time.
Sabariah is an art teacher in high school. In teaching her
students arts, she demands the students to colorize the
drawings creatively. The student can choose either to paint
the drawings traditionally or a modern way which is using a
computer software. The students prefer the traditional way
because they cannot find any suitable software, but the
problem is good qualities of brushes and paints are quite
expensive and they need to replace them with new ones if
they’re already worn out. Furthermore, the traditional
method needs a lot of time and the drawings made are not
long lasting. Hence, she needs software to be promoted to
her students so they can apply the modern way in coloring
the drawings.
SOLUTION
To all designers out there, no more worries on design
failures! We are introducing an application that will serve
you a detailed design of yours before it is realized.
Let’s Live-3D Design (LL3D) - is an application that allow
us to create or sketch using wide choice of selection by
touch. You also may design on the screen using a stylus on
a nice-flow LCD screen with a fast detection of your
drawings on the screen itself!
Wait, there’s more! LL3D also can bring out the virtual
design into live atmosphere where you can interact with the
virtual design using your bare-hands and off-screen!
LL3D will make it easy for you for editing or reconstruct a
previously a bad design. This application will enhance your
experience in designing due to the multiple ways of
interacting with it; touch and air-based gesture. You need
perfect designs, you need creativity, you will need Lets
Live-3D Design!
CONCEPTUAL DESIGN
The figure below shows the flow in our conceptual design
which include all the tasks that users can fulfill when using
the LL3D application.
Figure 1 Conceptual Flow Diagram
DESIGN
In designing the application interface, we have come out
with few results of sketches so we can compare them with
one another and come out with best design idea for LL3D.
LL3D is a composer used for designing which have many
functions that users can use. Therefore, the design must be
simple for user to understand every function that exists in
the application. Hence, making LL3D is user friendly.
Some of the important features that we need to add up to
our application design is the app drawing tools (pencil,
lines, pen, brush, etc. ) and the 3D related features.
3. Figure 2 : First Design Sketch
Figure 3 (a): Second Design Sketch
Figure 3 (b): Second Design Sketch
Figure 4 : Third Design Sketch
Figure 5 : Fourth Design Sketch
4. Figure 6 : Final Design Sketch
Figure 6 shows the final design sketch that we finally
decided to make it as our paper prototype.
See: https://www.youtube.com/watch?v=4zujNYgsTmY
After the paper prototype, we proceed with the same design
and build the computer prototype with just a little
adjustment from the actual design.
Figure 7 : Computer Prototype Main Screen
Figure 8 : Computer Prototype (Tutorial)
Figure 9 : Computer Prototype Workspace
Figure 7, Figure 8 and Figure 9 shows the computerized
LL3D interfaces. As you can see, we tried to keep the
design as simple as we could, but still trying make it
attractive for users.
5. Figure 10: Computer Prototype Go 3D
In Figure 10, it shows the 3D mode, where users can
interact with the designed 3D objects. The 3D button
function is to switch between editing mode and 3D mode.
Meanwhile, the red buttons above add up users’
interactivity with the object.
IMPLEMENTATION
We have decided to create an application based on two
types of interfaces which are; touch and air-based gesture.
Therefore, in designing an application that would satisfy
those two interface types would be a little bit tough for
Senorsenoritas and we really need to think out of the box.
Hence, we come out an idea to create a designing
application which is kind of a common application we
would have come across in our normal days. Therefore, in
making our application different with other designing apps,
we add on the 3d features to it. Thus, making LL3D
becomes more interesting.
LL3D have various choices for user to use or in editing the
3D object. In implementing the LL3D functions, we need a
software that also support 3D features in creating the LL3D
computer prototype.
Using Intuiface software, we implement various function to
this application which includes drawing, types of strokes in
drawing, default sides button for 3D objects ( Left side,
Right side, Top, etc. ), zoom in and out, supporting the
color strokes and many more.
However, at first we encountered a problem on how are we
going to add a live three-dimension object to our computer
prototype. We are only able to show different sides of
object, in two-dimension and therefore the 3D requirement
is not fulfilled. Then, we solve the problem by basically
implement the example that we used in our paper prototype,
a 3D house object. Using the help of internet, we
downloaded a few sample of 3D objects and try to test it on
our computer prototype.
Next, implementing the default sides button, we need to
find the correct x-axis, y-axis and z-axis to make the 3D
object rotates to user’s choosen sides. For example, in
making the 3D object rotates to its front side, we need to set
the x, y and z axises to 180,0 and 180 respectively.
The other functions are implemented easily using the
software. Basically, if user touched/clicked on a button, we
use a popup textbox that would suggest the user more
choices that the user could pick and use it on the canvas or
the 3D object.
On the other hand, implementing the 3D projector as part of
our prototype we only managed to make a fake projector
and make it able to project some lights out of it and make a
3D object out of papers to show the users the idea on what
LL3D could do using the air-based gesture features. We
recorded a video to show users how the 3D object would
react to hand movements in live surroundings.
EVALUATION
For the evaluating process, we have created our own
questionnaires and spread it to the community to get the
feedback based on our application. Resulting in 40
respondents that had respond the questions about LL3D and
then we analyze for every single result based on their
responses.
Furthermore, for the User Acceptance Testing (UAT)
session, we have chosen 4 different users, in the level of
beginners, to have a go and try to use our application and
we have recorded the time taken for each user to complete
all the task given during the test. We have learned that, in
creating an application, it is necessary to fulfill the users’
needs and requirements.
Figure 11 : Question 1
Based on the pie chart , we can see that 93% of
respondents which is 37 out of 40 find that LL3D is
interesting. On the other hand, only 7% of them said it was
not interesting.
6. Figure 12 : Question 2
83% of respondents (33 out of 40) understand the
instruction or given steps to use the application. Meanwhile,
the other 18% of them have no idea how to use it. This
shows that the given instructions were quite easy and
understandable.
Figure 13 : Question 3
In rating the attractiveness of the application’s interface, 8
out of 40 (20 respondents) give 9 which is stating the
interface is almost very good. Meanwhile, the percentage of
respondents that chose 4, 7 and 10 are all 18% respectively.
The varieties of user’s rating maybe depends on the users
themselves to find whether the interface looked good or not.
Figure 14 : Question 4
The question was on about whether the application is
boring to use or not. Therefore, the pie chart shows 80% of
respondents answered No meanwhile the remaining 20%
said Yes. This proves that LL3D can be an enjoyable
experience for some users. Improvements can be made to
ensure that the percentage of respondents that said No could
be lessen in adding up more fun interactivity and users
flexibility in using LL3D.
Figure 15 : Question 5
The bar chart shows that majorities of respondents rate the
efficiency of LL3D with 7. This can be considered as
optimum efficiency expectation of LL3D. On the other
hand, minorities rated with a 1 and 7 out of 40 respondents
rated with 10, stating that the application is very efficient.
Therefore, the results indicates LL3D can be counted an
efficient applications.
Figure 16 : Question 6
We have tested the user’s preference whether to use the
application on desktop or on their smart phone. Most of the
( 27 out of 40) chose desktop meanwhile the other 13 chose
smart phone. LL3D application is a software that are only
fit to be use on desktop for now. However, we need to
reconsider about making this application comfortable in
mobile/ smart phone.
7. Figure 17 : Question 7
On the responds on about the 3D functioning projector ,
85% of respondents opined it is exciting and interesting to
be use while 4 out of 40 responds are their do not really
understand its purpose. 3D functioning projector is
something that quite rare in Asian technology market,
hence many people would find it exciting yet few of them
could not understand what 3D projector could do.
Figure 18 : Question 8
From the analysis, we find that 33% of respondents which
is 13 out of 40, confuse on how the application works,
while 65% of them that is 27 out of 40 did not. This shows
that bigger number of them don’t have any problem on
understanding on how LL3D works. However, there are
still few left behind, confuse on what is LL3D all about.
Therefore, we need to provide them with a better help or
guideline to ensure that every user would fully
acknowledge how this applications run.
Figure 19 : Question 9
Analyzing the pie chart above, 30 respondents out of 40
said Yes, agreeing that the tutorial given is enough for them
to understand this usage for each function in the
application. Meanwhile, another 10 responses are not. This
indicates the tutorial given is not clear enough as some of
the respondents (25% of them) said no, and therefore, the
tutorial method in our application need an improvements.
Figure 20 : Question 10
In comparing LL3D with other design applications, 65% of
respondents which is 26 out of 40, state that LL3D is a lot
simple but is more interesting. Meanwhile, the least
percentage is only 8%, which state the application is more
complex and the function are hard to be understood. There
is also one single other opinion given by a respondent
which said the application is “good enough”. For the other
two choices have acquired the same percentage of
respondents which is 13%.
Figure 21 : Question 11
In rating the application from 1 to 10 ( low to high) , 25%
of them rate LL3D with 10 while the least rating which is 1
only required 3% of responses. The rating of 7 and 8
retrieved a same amount of respondents’ percentage which
is 15%. Plus, 18% of them rate the application with 9. This
show that the majority of people give high rating for LL3D
and therefore this application satisfy them.
8. REFLECTION
According to our project that we have completed, we have
learned a lot of things from it. For example, in developing
team building skills is an important benefit for our learning
process and our progress in this project. It was not always
easy developing an effective team, therefore a full
commitment is very important in working as a group.
Our team will make discussion regularly when we have any
tasks that were given by our lecturer. During each meeting
and discussion, we have shared our ideas and our
understanding about the task given thus, this sharing of
each ideas will help us to achieve the best result.
The major benefit of working in a team was that we
facilitated and enhanced our own understanding of the
projects. In designing process, we have list all of our ideas
and knowledge on how to design the interface for our
projects, and then we choose the best idea to take it into the
implementation process.
Furthermore, for every task given we need to be well-
planned before we start to do any sketching or building the
application. Moreover, we also discovered and learn how to
make real computer prototype using the available software
such as Intuiface.
Henceforth, the analyzation method and process is quite
important to ensure whether the application is truly
accepted amongst various type of users. Finally, from the
evaluations taken we have learned to make further
improvement to the application we are developing so the
requirements that were not fulfilled before is reviewed and
added into the application function. We hoped that in the
future, Senorsenoritas team can develop a better and more
reliable application for the community.
ACKNOWLEDGMENTS
We thank our lecture Mr Nik Isroz Zaidi Bin Nik Ismail, all
the volunteers and classmates who helped us in many ways
and provided helpful comments on this project.
REFERENCES
1. Isroz.wordpress.com