Storyboard
Task 1: Select items and Task 2: Scan barcode
In our proposal, the action of selecting items and scanning barcodes are
done simultaneously. When a user selects an item and puts it inside his
shopping basket or bag, the item is automatically added to the virtual
cart in our application and the user does not have to scan the
barcode.
Task 3: Make Payment
Alternative Designs (Crazy 8)
We are applying the Crazy 8 method to our interface design project in order to generate ideas fast. Each of us has eight minutes to create eight alternative interface sketches in this quick and enjoyable activity. It encourages creative thinking and the generation of as many different ideas as possible without being overly concerned with details. At the end of the activity, we discuss and choose the best idea for each concept by voting. This enables us to see several options and identify the most promising concepts for further development.
Below is the overview of our Crazy 8 exercise of interface design.
Alternative Design 1 - Tan Yi Ya
Alternative Design 2 - Teh Ru Qian
Alternative Design 3 - Lam Yoke Yu
Alternative Design 4 - Goe Jie Ying
Tan Yi Ya
Teh Ru Qian
Lam Yoke Yu
Goe Jie Ying
Wireframes
The following is the wireframes for the entire application:
In the proposed system, some tasks identified in the task analysis are
simplified or superseded with another action.
Wireframe for Task 2 - Scan Barcode
Scan the barcode provided before entering the store. Previously, the task identified was to scan the barcode of the selected items before checkout. However, in the proposed system, the user would need to scan the barcode or QR code as in checking-in to the shop.
Wireframe for Task 1 - Select item and Add to Cart
Select the desired item from the shelf, and it will be automatically added to the cart.
Wireframe for Task 3 - Make Payment
When the users are done shopping and walk out of the store, the payment will be automatically processed and a receipt will be generated.
Reason or Justification of the Design
1. Similarity
The principle of similarity is applied in the functional buttons in the
menu section as shown in the figure below. Each functional button maintains
the same size and format, ensuring uniformity. Additionally, each button is
accompanied by an icon that reflects its specific same level function,
enhancing user understanding and recognition.
2.Consistency
The principle of consistency is applied throughout the app by keeping the
'Take N Go' logo at the top left corner of every page of the functions.
Additionally, the menu and user profile icons are always in the same place
on each page. This makes it easy for users to navigate since they always
know where to find these key features. The consistent layout helps create a
smooth and user-friendly experience.
3.Figure & Ground
In the navigation page, we apply the principle of figure and ground by
making the 'Navigate' text and search bar (the figure) stand out against a
white background (the ground). This helps users focus on essential elements
for navigation, enhancing readability and usability. Therefore, users can
easily locate the search bar and swiftly navigate to the item they want to
buy.
4. Dialogue
We also integrated dialogue as a design
principle to inform users when an item they
search for is unavailable. This prompt simply
notifies users about the unavailability of the
item and allows them to return to the
navigation page to continue their
search.
5. Enclosure
The principle of enclosure has been effectively applied in
our application, particularly in the user sign-up pages. In
the figure shown below, the enclosure creates a clear
separation between the section for user information and
other icons on the page. This distinct visual boundary makes
it easy for users to identify where they should input their
personal information to sign up for an account.
6. Continuity
The principle of continuity is evident during checkout,
where our users seamlessly transition as they step out
from the store. The app deducts the payment directly
from their wallet, enhancing the user experience by
maintaining seamless shopping within the store using the
app. As shown in the figure, when the user completes
shopping and exits the store, the system will
automatically deduct the payment and display a
successful payment page to the customer. This
facilitates the customer's continuity
.
In the total expenses checking page, users can seamlessly
access a detailed buylist by clicking on the total price
of the receipt. This feature promotes continuity and
ensures users can easily review all items they have
purchased, enhancing their shopping experience with
comprehensive tracking capabilities.
7. Error handling
In our application, error handling is also incorporated
into the navigation page. When a user searches for an item
that is not found or enters an incorrect item name, the
system prompts a message informing them of the item's
unavailability. This message allows users to refine their
search and try again, ensuring they can continue their
shopping experience without interruption. This mechanism
provides clear feedback and maintains the continuity of
the user's navigation and search process.
Description of Incorporation of Design Requirement into App Design
1. Add a handheld scanner to help users scan the products
Instead of adding a handheld scanner, we discovered a more
convenient method in our prototype to address the issue of
scanning hard-to-reach items. We implemented a feature that
automatically adds items to the digital cart as soon as the
customer places them in the trolley. This design significantly
aids our target users by eliminating the need to scan barcodes at
the self-checkout counter. Customers simply place items in their
trolley, and our system records their purchases instantly in the
application.
2. Implement face recognition functionality
The Take N Go app integrates facial recognition (FR) at the sign-in stage, allowing all users entering the store to be
recognised. As users enter, cameras would capture their faces,
matching them with the identity recorded when the user scanned the
QR code at entry. To enhance security against theft, an alarm
would sound if one was not checked in at the entry. Thus, a user
must be signed in to the application and scan the QR code before
they enter the store.
3. Offer the user to choose self-service or staff assistance
When initially designing our system, we considered offering users
a choice between two methods to change their payment method based
on user feedback. However, we have now developed a more efficient
solution. Users can directly select their payment method within
the application, enabling them to add multiple methods or link to
a bank card. In the event of payment failure, the system
automatically switches to an alternative payment method until
successful payment is achieved.
4. Provide a clear instruction for user to enter the
card
To simplify the payment process, users can now link their bank
card within the application. This eliminates the need to carry a
physical bank card, as the payment amount will be directly
deducted from the linked bank account or card after the users step
out of the store. By following these steps within the app, users
can easily manage their payment preferences and complete
transactions seamlessly.
Interaction Metaphor
1. Magnifying glass as Search button
Image Source:
https://www.ebay.co.uk/p/2290193347?iid=123762865842
In interface design, the magnifying glass symbol used as a
search button is a powerful metaphor. This icon represents
the process of looking for an item, just like the way to use
a magnifying glass to look closely and find details in the
real world. The magnifying glass icon in a digital interface
by default tells users that clicking on it will help them
search and find information, just as a magnifying glass lets
people see things more clearly and find what they're looking
for.
2. Image of a person as User Profile button
A person's appearance, usually shown as a head and shoulders
silhouette, is a metaphor in digital interfaces for obtaining
access to the user profile. This metaphor draws from the
real-world concept of identity and personal representation. Just
as a portrait represents an individual in the physical world,
this icon signifies the user's personal space within the digital
environment. When users see this icon, they intuitively know
that clicking it will take them to their profile, where they can
access and update their personal information and account
settings.
3. Three horizontal lines as Menu button
Image Source:
https://www.istockphoto.com/photo/isolated-shot-of-stacked-file-folders-on-white-background-gm136722192-13499499
Digital interface menu buttons are represented by the three
horizontal lines, commonly referred to as the "hamburger
menu." This metaphor is based on the visual similarities of a
traditional paper list or menu, with items stacked one over
the other. The three horizontal lines icon, similar to a
printed menu, indicates that clicking on it will disclose a
list of options in this system.
4. The left and right button to change the pages of
promotions and offers
The promotion and offers section in the home page of the app
has a left and right arrow and the sides. This is akin to
flipping through pages of a book or magazine. Users would tap
the left button to go backward through the pages and right
button to move forward, just like turning pages in physical
publication. This metaphor is intuitive and familiar, making
it easier for users to understand how to navigate through
promotions and offers.
5. Tick mark to show that the users is checked into a store
5. Tick mark to show that the users is checked into a store
6. The plus sign as Add Signal
There is the plus sign in all the buttons in the payment page. This interface metaphor utilises the universal understanding of mathematical symbols. In this metaphor, the plus sign (+) serves as a visual cue to indicate the action of adding something, in our case, to top-up the wallet, to add a bank account and to add a new card.
Comments
Post a Comment