Sri Lanka Institute of Information Technology

Human Computer Interaction (IT3060)

Assignment 02 Low fidelity frames

PROJECT TITLE - “ ToronotCupcake”

GROUP NUMBER – 2021-HCI-117

GROUP NAME – Team Pixxel

Group Member Details

Student ID Name Workload Distribution
- Draw the two alternatives and write a reason for each one.
- In his part of the interface, rate and justify the usability
IT19119618 Sriram.R
difficulties.
- Write a video transcript
- Draw the two alternatives and write a reason for each one.
- In his part of the interface, rate and justify the usability
IT19178196 Bagavan.l
difficulties.
- Write a video transcript
- Draw the two alternatives and write a reason for each one.
- In his part of the interface, rate and justify the usability
IT19241760 Nilakshana.R
difficulties.
- Write a video transcript
- Draw the two alternatives and write a reason for each one.
- In his part of the interface, rate and justify the usability
IT19196602 Sharmilan.S
difficulties.
- Write a video transcript
- Draw the two alternatives and write a reason for each one.
- In his part of the interface, rate and justify the usability
IT19029832 Kithusshand.R
difficulties
- Write the transcript video
1.Video Transcripts

2.Usabilities issues found

Interface Name Usability Issue Rate Justification

Landing Page Unwanted texts and High They included image as button to navigate
complex architecture to home page, but it seems hard the user
cant find to navigate through it and the
missing of consistency
Home Page Alignment and heading High They used low-resolution product photos in
in clusters this case. Background and alignment are
superfluous, and with more text lines
included, it appears to be more difficult for
users to guess whether or not to buy that
product, and executive perspectives appear
to be unpleasant.
About Clustered alignments High The content is good but the alignment is not
good and consistency also not good
Connect Page Excessive Text for a Low The content is excess and not properly
website aligned and the typography differ

Corporate Events Complicated Navigation High Navigation is poorly implemented and not
page & Information so for the content was clustered
Clustering
Occasions Page Poorly aligned with The images of product of cupcakes poorly
images High implemented in
Cupcake Page Bad impression and the High The images that selected for this website is
alignment very bad and the content related to them
not aligned
Community There are so many Mediu Lack of content
Irrelevant information’s. m
FAQs The contents are too High The user cant find when it comes to the
clustered and merged faqpage. Because of complexity
bad impression
Resource page Irrelevant spaces and Mediu The content was good but the
poorly aligned m implementation of it with complex
alignment is too bad
 Cupcake delivery Lack of content related High The content as well as the design
page materials implementation is too bad

Insert cupcakes page

Order update page Poorly Structured links in High If you link to web pages that are not on your
some part of the pages in website, then check your links at least once a
this website week to make sure they are still functional.
Broken links frustrate visitors and discourage
people from coming back to your site.
Order delete page Complicated Navigation Mediu website pages should be able to explain
m themselves and visitors should be able to
access any main directory page in three
website clicks or less.
Delivery and senders Bad First Impression High Your background color should be subdued
page and easy to look at. Your text color should
always mix well with the background to
make text easy to read
Different sender
details page

4.Justification of the Variants & How the best design was selected?

Sriram.R.

Landing Page

 The Over all design implementation and consistency according to the Ui/Ux is missing.
The user has a lot more to read on this page, with a lot of text and no eye-catching font
style or color. There is also a lot of irrelevant information. The user does not have the
option to accept or reject the terms. Because this is a cupcake website, visitors don't
want to spend too much time reading the terms and conditions.
So in the first variant I implemented with good consistency good white space to eye
catching to user and in the second variant I used parallel carts of images to welcome user.

Selected: 1st variant

Home Page

In the first UI, there are attractive graphics and animations that look very vibrant, and their tales
are well-organized with the same color fonts and similar typography. It appears to be much
simpler for the customer.

In the second UI, which is also quite understandable, they included what they have accomplished
over the years. What are the primary areas and their significant strengths? Vision and mission are
all covered. Every aspect of the location, including worldwide partners and world-class
amenities, has been meticulously planned. It's pretty similar to the first UI, and it's really user-
friendly. however the sfirst UI is more user friendly and appealing.

Selected : 1st variant

Different sender details page

When comparing the second Ui to the first one, the consumer can clearly see the intricacies of
the distribution for them without hesitation in the second Ui. Customers can order and receive
their products without anxiety as a result of this.

Variant: 1

Nilakshana.R

Delivery and sender details page

When comparing second Ui with first 0ne in second Ui customer can clearly know the details of
the distribution for them without any hesitation. Because of this customer can order and receive
their products without any fear.
Variant:1
About page

In the first UI, there are attractive images and animations that look very colorful, and their
storylines are well-organized with the same color fonts. It appears to be much more user-
friendly.
In the second UI, they incorporated what they had accomplished in previous years, which was
also quite understandable. What are the important regions, as well as their main strengths and
missions? Every aspect of the location, including worldwide partners and world-class amenities,
was meticulously planned. It's comparable to the first UI in that it's incredibly user-friendly. Both
are good UIs in my opinion as a UI developer, but the sfirst UI is more user friendly and
appealing.

Variant:1st

Corporate events page

The text size and styles are extremely complex, making it difficult to distinguish between
different parts of the test. And the user has a lot more information to read unnecessarily. The
items image is meant to look like the same object is attached one after another, which may make
it difficult for elderly persons to distinguish between them. The user gets a clear and huge image
of the object with 1stui because it only shows one image at a time. The next item can be viewed
by clicking the next or previous indicator symbol, which has both sides of the item.

Selected variant:1st

Gantt Chart
Appendix B
Drive link to the frames:
https://drive.google.com/drive/folders/1oa7TyUH6Z5I9Ty9RNTYSCNFhLkHa0p0z?
usp=sharing