Design Concept for a Gift Shop Mobile Application

This document presents two alternative design concepts for a mobile application for a gift shop. Each alternative includes a series of screens showcasing the user interface and functionality. The document also includes a heuristic evaluation of each alternative, highlighting their strengths and weaknesses. Finally, the document provides recommendations for choosing the best alternative based on user experience and design principles.

ITC504
Assignment-1
D E S I G N C O N C E P T
M A N O J KU M A R N A L L A
11 6 1 4 6 0 1

Alternative 1/ Screen 1

Alternative 1/ Screen 1
Purpose- This page is basically a welcome page. The user can make a choice in between sign up
and login.
Components Taken - The components taken in screen 1 are symbols like sign up and lock,
image, Label, and line.
Actions performed by user – The user can make a choice in between two options. If he is already
registered he will choose login and if he is a new user he will choose sign up.

Alternative 1/ Screen 2

Alternative 1/ Screen 2
Purpose- The page is needed for login into the application.
Components Taken - The components taken in screen 2 are text area, button, Label, and image.
Actions performed by user -
a. By entering the username and password a user can login into the application.
b. The password can be reset by clicking on the forgot password option.

Alternative 1/ Screen 3

Alternative 1/ Screen 3
Purpose- The use of this page is to register the client on the application.
Components Taken - The components used in screen 3 are text area, image, Label, and button.
Actions performed by user-
a. User can provide his details to enter or sign up this application.
b. Only by giving required information, a user can register on the application.

Alternative 1/ Screen 4

Alternative 1/ Screen 4
Purpose- This is the main page of the application. It will display the category list including the
footer and header section.
Components Taken - The components taken in screen 4 are image, slider arrows, Label, and
symbols like Facebook, location and YouTube.
Actions performed by user -
1. The category of the choice can be chosen by the user.
2. Location of the shop can be chosen by clicking on location button.
3. The social media link of the shop is also given in the footer with some related information like
contact us, about us, disclaimer and terms & condition.

Alternative 1/ Screen 5

Alternative 1/ Screen 5
Purpose- Through this page shop can provide the gifts items in category format. Also through
this the user can easily order the gift easily.
Components Taken - The components taken in screen 5 are image, Label, rectangle, link bar,
menu bar, and symbols like location, Facebook, slider, twitter, YouTube, and so on.
Actions performed by user -
1. The gift items can be scrolled category wise by the user.
2. The more screen can be scrolled using the slider bar.

Alternative 1/ Screen 6

Alternative 1/ Screen 6
Purpose – This page displays the information of the category page of drinks which have wines
and more drinks in stock.
Components Taken - The components taken in screen 6 are image, menu bar, Label, rectangle,
link bar, and symbols like location, Facebook, image files, twitter, YouTube, and so on.
Actions performed by user -
1. User can make his choice and can choose the wine from the application whether it is white or
red.
2. The complete description and image of the wines are given.
3. The user can choose more drinks for more variety in the drinks.

Alternative 1/ Screen 7

Alternative 1/ Screen 7
Purpose- The page is used for booking of the restaurant by providing necessary details.
Components Taken - The components taken in screen 7 are image, Label, link bar, rectangle,
menu bar, and symbols like location, YouTube, LinkedIn, and so on.
Actions performed by user -
1. The restaurant can booked by the user for the small event.

Alternative 1/ Screen 8

Alternative 1/ Screen 8
Purpose- The wish list or favorite list is displayed on this page. A user can access this page
whenever he wants.
Components Taken - The components taken in screen 8 are image, Label, link bar, rectangle,
menu bar, and symbols like Facebook, image files, location, twitter, YouTube, and so on.
Actions performed by user -
1. User can scroll his favorite list any time he wants.
2. The user can purchase the item from the wish list also.

Alternative 2/ Screen 1

Alternative 2/ Screen 1
Purpose- This page is basically a welcome page. The user can make a choice in between sign up
and login.
Components Taken - The components taken in screen 1 are symbols like sign up, circle, and lock,
image, Label, and line.
Actions performed by user –
a. The user can make a choice in between two options. If he is already registered he will
choose login and if he is a new user he will choose sign up.
b. User can also skip the login and sign up just by clicking skip and can proceed on the
application.

Alternative 2/ Screen 2

Alternative 2/ Screen 2
Purpose- The page is needed for login into the application.
Components Taken - The components taken in screen 2 are text area, button, Label, and image.
Actions performed by user -
a. By entering the username and password a user can login into the application.
b. The password can be reset by clicking on the forgot password option.
c. User can also sign up from here, if he is new on the application.

Alternative 2/ Screen 3

Alternative 2/ Screen 3
Purpose- The use of this page is to register the client on the application.
Components Taken - The components used in screen 3 are text area, image, Label, symbols like
Facebook, google and button.
Actions performed by user-
a. User can provide his details to enter or sign up this application.
b. Only by giving required information, a user can register on the application.
c. User can also register on the application using google or Facebook.

Alternative 2/ Screen 4

Alternative 2/ Screen 4
Purpose- This is the main page of the application. It will display the category list including the
footer and header section.
Components Taken - The components taken in screen 4 are image, slider arrows, Label, circle
and symbols like Facebook, location and YouTube.
Actions performed by user -
1. The category of the choice can be chosen by the user.
2. Location of the shop can be chosen by clicking on location button.
3. The social media link of the shop is also given in the footer with some related information like
contact us, about us, disclaimer and terms & condition.
4. A user can also edit in his profile, and scroll their wish list and cart.

Alternative 2/ Screen 5

Alternative 2/ Screen 5
Purpose- Through this page shop owner can provide the gift items in category format. As a result
user can easily make a order of gift in easy manner.
Components Taken - The components taken in screen 5 are image, Label, link bar, rectangle,
menu bar, vertical ruler and symbols like location, Facebook, slider, twitter, YouTube, and so on.
Actions performed by user -
1. The gift items can be scrolled category wise by the user.
2. The more screen can be scrolled using the slider bar.
3. The user can also check social media links from this page also.
4. More pages can be scrolled by clicking on the slider.

Alternative 2/ Screen 6

Alternative 2/ Screen 6
Purpose – This page displays the information of the category page of drinks which have wines and
more drinks in stock.
Components Taken - The components taken in screen 6 are image, menu bar, Label, rectangle, link
bar, caret up, caret down, and symbols like location, Facebook, image files, twitter, YouTube, and so
on.
Actions performed by user -
1. User can make his choice and can choose the wine from the application whether it is white or red.
2. The complete description and image of the wines are given.
3. The user can choose more drinks for more variety in the drinks.
4. A user can scroll more screen and wines in the list of wines.

Alternative 2/ Screen 7

Alternative 2/ Screen 7
Purpose- The page is used for booking of the restaurant by providing necessary details.
Components Taken - The components taken in screen 7 are image, Label, link bar, rectangle,
menu bar, and symbols like location, YouTube, LinkedIn, and so on.
Actions performed by user -
1. The restaurant can booked by the user for the small event.
2. The payment option is also given for making partial or full payment.
3. Also, booking can be canceled by the user if required.

Alternative 2/ Screen 8

Alternative 2/ Screen 8
Purpose- The wish list or favorite list is displayed on this page. A user can access this page
whenever he wants.
Components Taken - The components taken in screen 8 are image, Label, link bar, rectangle,
menu bar, vertical scroll bar, and symbols like Facebook, image files, location, LinkedIn, twitter,
YouTube, and so on.
Actions performed by user -
1. User can scroll his favorite list any time he wants.
2. The user can purchase the item from the wish list also.
3. User can also check various different pages on the application.

Alternative 1 Heuristics
principles
Alternative 1 Heuristics principles are :-
1. If user give wrong input then the error handling of the application is powerful.
2. The user can contact to the application advisor by writing the query in the contact us page of
the application.
3. Navigation on the pages is very easy as the interface is user friendly. The redirection of pages is
very fast and easy.
4. The loading of the page will take some time due to the internet speed.

Alternative 2 Heuristics
principles
Alternative 1 Heuristics principles are :-
1. The loading of the page will take some time but will be slower than alternative 1 due to the
internet speed and more functions.
2. Navigation on the pages is very easy than alternative 1 as the interface is very user friendly and
attractive. The redirection of pages is very fast and easy.
3. The application is compatible and flexible with every device. The alternative 2 is more
attractive and have more functionality.
4. More advanced options like social link are given on alternative 2.

Recommendations
Reason why Alternative 2 is taken over the Alternative 1 -
a.) Much better GUI (graphical user interface). As alternative 2 is designed with multiple colors
while alternative 1 is only black and white.
b.) Multiple login option are there in alternative 2. As the alternative 2 has login option with
Facebook and google also but in alternative 1 only manual option is available.
c.) The arrangements and alignment of every body element is in sorted and specific manner. The
placement of the text, label and other body elements is much better in alternative 2.
d.) The more better documentation and interface of alternative 2 makes it look attractive. Like in
alternative 2 there are more features like location, contact page, and so many are available on
every single page.

e.) The category display on home is page is more unique and many options are available. Like in
alternative 1 only three categories are displayed and no profile option is given, but in alternative
2 of home page the more option are added like of cart, my profile and wish list.
f.) The more user friendly behavior of the Alternative 2 makes it better than alternative 1. Like the
footer section like terms page, Instagram and LinkedIn has more options available on the
alternative 2 than alternative 1.

References
Berry. (2017). 3 of the Best Prototyping Tools to Test Out Your Mobile and Web
Designs. Mockplus. Retrieved 15 March 2018, from https://www.mockplus.com/blog/post/best-
prototyping-tools-to-test-out-your-mobile-and-web-designs
Robles, J. (2017). The Role of Wireframing in Mobile App Design | ChaiOne. ChaiOne. Retrieved
15 March 2018, from https://chaione.com/blog/the-role-of-wireframing-in-mobile-app-design/
Yáñez Gómez, R., Cascado Caballero, D., & Sevillano, J. (2014). Heuristic Evaluation on Mobile
Interfaces: A New Checklist. Hindawi. Retrieved 15 March 2018, from
https://www.hindawi.com/journals/tswj/2014/434326/