Week 11 / Wireframe & UI Kit
This week, we are starting Project 3: Lo-Fi App Design Prototype.
Our first task is to choose a UI Kit that includes our design's
typography, color palette, and iconography. Once the UI Kit is
finalized, we will begin creating the Low Fidelity Prototype using
black, grey, and white colors.
Fig 1.1 Week 11 Lecture
Week 12 / User Testing
Mr.Zeon required us must need create 3 scenarios for user
test and provide feedback, with compulsory recording. After
receiving and analyzing the feedback, we can make improvements and
proceed to create the high-fidelity prototype.
REQUIREMENTS
1. Visual Design Concept
Create a cohesive visual design strategy that reflects your
application's branding. This strategy should define the color palette,
typography, and imagery to establish the application's aesthetic.
Ensure these elements work together to communicate the intended tone
and enhance the user experience.
2. Wireframes
Design wireframes for the mobile application screens using Figma.
These wireframes should clearly outline the layout, content structure,
navigation flow, and interactive components, providing a detailed
blueprint for the app's user interface.
3. Usability Testing
Perform usability testing on your low-fidelity prototype to evaluate
the user flow and overall experience. Recruit individuals such as
friends, family members, or classmates to interact with your prototype
and share their feedback. Be sure to document their insights and
suggestions, and use this information to refine and improve your
design.
4. Deliverables
Prepare a digital submission featuring your low-fidelity prototype,
wireframes, and visual design concept. Include a concise overview of
the usability testing outcomes, highlighting key feedback and the
changes implemented to enhance your design. Ensure this document is
well-organized and uploaded to your e-portfolio as part of your
project showcase.
Week 11 - 13 / Wireframe Sketch & UI Kit & Design
Process
1. UI Kit
This week, we began the design phase of our app project. I started
by creating a UI kit before proceeding to the wireframes. A
well-structured UI kit is crucial in app design as it ensures
consistency and efficiency in the design process. By incorporating
icons and text elements, the UI kit facilitates intuitive navigation
and enhances user recognition of key features. Below is the draft of
my initial UI kit, showcasing the foundational components and visual
elements for the app’s interface.
Fig 2.1 UI Kit Progress
2. Reference
Next, I began researching design references from existing
cinema apps, including TGV, GSC, and MegaCineplex, to gather
inspiration and ideas for creating a user-friendly and appealing
app. These references provided valuable insights into effective
design practices and features that enhance usability and user
satisfaction. Conducting research is a critical step in the
design process, as it helps ensure that the final outcome is
both functional and engaging. Without proper research and
references, the design could lack direction and fail to meet
user expectations.
Fig 2.2 Reference
3. Process of Designing
After completing the research and brainstorming for the
design, I began creating the wireframe. I started with the
login page, following the flowchart I had previously
developed. By building the design step by step, I ensured that
each component aligned with the user journey. The image below
illustrates the flow for the login and forgot password pages,
showcasing how users will navigate through these initial steps
of the app. This structured approach allows for a clear and
seamless user experience.
Fig 2.3 Login Page Progress
After completing the login page, I was occupied
with other assignments for a few days, which
slowed my progress on the app design. However,
Mr. Zeon extended the submission deadline,
allowing me more time to focus on completing the
project. To make the most of the extension, I
decided to prioritize designing the home page.
Completing the home page first provides a
clearer overview of the app's structure and
helps identify additional pages that need to be
developed. This approach ensures a more
organized and efficient workflow as I aim to
finish as much as possible within the given
timeframe.
Fig 2.4 Low-Fi Progress
The next phase of the design process involved creating the
movie page. The images below illustrate the entire flow for
purchasing movie tickets. The process begins with selecting
the movie, followed by choosing the preferred date, time, and
seat. Users then review and confirm their booking details,
including options for food and drinks. Once all selections are
finalized, the user proceeds to checkout and completes the
payment. The streamlined flow concludes with a confirmation of
the successful transaction, ensuring a seamless and
user-friendly experience.
Fig 2.5 Low-Fi Progress
Here is the design for the profile page, crafted with
simplicity and functionality in mind to ensure users can easily
access and locate the features they need. The profile page
includes a rewards section, allowing users to redeem vouchers
and conveniently apply them during the movie booking process.
This feature addresses a common issue where users often forget
to utilize their vouchers at checkout, enhancing the overall
user experience.
Fig 2.6 Low-Fi Progress
Below are some components and elements designed for pop-up
overlays. These features are crafted to be intuitive, ensuring
users can easily understand and navigate them. The pop-ups are
functional and user-friendly, providing seamless interaction
and enhancing the overall usability of the application.
Fig 2.7 Features Progress
Below is the overall low-fidelity design, consisting of
approximately 42 pages. While this provides a solid
foundation, additional pages may need to be designed to
incorporate more detailed features and ensure a comprehensive
user experience for the app.
Fig 2.8 Overall Progress
4. Usability Testing
This week, we began preparing the prototype and initiated
the process of conducting usability testing with three
users. To ensure a meaningful evaluation, we focused on
creating a low-fidelity prototype that included three
specific scenarios for users to navigate. This approach
allowed us to gather valuable feedback on the usability
and functionality of the app, helping us identify areas
for improvement.
Fig 2.9 Usability Testing, 3 Scenarios - Week 13 (20/12/24)
Fig 2.10 Scenario 1 - Week 13 (21/12/24)
Imagine you are new user and need to navigate the Dadi
Cinema App and explore what function exists.
-
As a new user browsing the app, you
find a movie of interest but aren't ready to buy a
ticket. You add it to your
bookmark list for easy access later,
keeping your options open.
-
Before browser the movie,
select the cinema location first
before browser the movie.
-
A slide-up window shows that you need to
select the location for the cinema.
Press continue after confirm the
location.
-
After continue, it will direct bring you to the
movie page, at the movie page you can
start searching the movie you interested.
-
But for now you are not buying the ticket, Open the
More Info for the movie to access the
details for the movie, It will directly bring you to
the movie details page.
-
Now you are at the movie details page, you can review
all the movie details here, now try to add to
favourite the movie to easy access
went you need to find back.
-
After favourite the movie, back to the homepage,
Click the bookmark icon to the top
right and access to the movie that you have
favourite.
-
Finally, return to the homepage and
click on the notification icon. This
feature keeps you updated with the latest details or
promotions related to the movies, ensuring you never
miss out.
Fig 2.11 Scenario 2 - Week 13 (21/12/24)
Imagine you are a new user and you need to
purchase a movie ticket on the Dadi
Cinema App.
-
The process begins on the
Movie Page, where you can
explore detailed information about
the movie to help you make an informed decision
before purchasing a ticket.
-
Return to the Movie Page after
reviewing the details, and
select a showtime that best fits
your schedule.
-
Now, you need to
book the seat and continue to the
next part.
-
After selecting your seat, confirm the ticket
quantity for the chosen showtime and
add the tickets to your cart.
-
After adding the tickets to your cart, proceed to
the F&B page, where you can
select your preferred beverages. If
you're not interested, simply
click to continue to the next
step.
-
Next, proceed to the
checkout and payment section. Review and confirm the details and total price
before moving forward to the payment gateway.
-
Proceed to the payment gateway, where you can enter
your personal information and bank details or select
an alternative payment method to
complete the transaction.
-
Once the payment is complete, a slide-up
notification will appear indicating whether the
payment was successful or failed.
Click "Done"
to return to the homepage.
-
Next, select "My Ticket" on the
homepage navigation bar to view the ticket you just
purchased.
-
Click on the ticket in the pending section to view
the details and QR code, which will grant you access
to the cinema.
Fig 2.12 Scenario 3 - Week 13 (21/12/24)
Imagine you are a new user using the Dadi Cinema App,
you need try to redeem and apply the voucher for
purchase movie ticket.
-
To redeem the voucher,
navigate to the profile page.
-
On the Profile page, review the reward highlights
for the voucher. Click "View All"
to access additional voucher details.
-
Now on the voucher page,
select the voucher you're
interested in redeeming.
-
After selecting a voucher, a pop-up will display
the voucher details.
Click "Redeem Now" to apply the
voucher.
-
After redeeming the voucher, a confirmation screen
will appear, indicating that the voucher has been
successfully redeemed and added to
your "My Rewards."
-
Return to the profile page and navigate to
"My Rewards"
to browse the voucher you just redeemed.
-
Select the voucher you just redeemed, and a pop-up
will appear. Click "Book Now" to
begin booking your movie ticket.
I hosted an online Zoom session with the participants
from the previous phase, allowing them to explore the
prototype independently. During the session, I provided
clarification when they encountered challenges and guided
them through specific features. Afterward, we engaged in a
collaborative discussion to identify the issues they faced
and brainstorm potential solutions.
Usability Testing Feedback
Fig 3.1 User Feedback - PDF
5. Final Outcomes
Demonstrating Video / Low-FI
Figma View - Work File
Fig 3.1 Low-Fi App Design- Week 14 (26/12/24)
Fig 3.2 Low-Fi App Design Prototype- Week 14 (26/12/24)
FEEDBACK
Feedback from Handsome Zeon
Week 12
-
Navigation bar bottom spacing too wide, try to reduce some or
down the icon and the middle button.
-
Some page like promotions page can change some layout design
make it different and more intresting.
Week 13
- Overall design is ok, keep up the progress.
- Need to have the 3 scenario.
Week 14
-
Overall the flow and design is ok and nice, but maybe some
part align not match and the bottom spacing too much,
modified it.
- Not enough for the 3 scenarios, need to add few more.
REFLECTION
Experience
For Project 3, my primary focus was on developing a low-fidelity
prototype and conducting an in-depth research study to test and
validate the design concepts. By creating a basic, interactive
prototype, I could rapidly iterate on ideas and evaluate them with
real users, gaining crucial insights into their interaction with
the interface. Utilizing methods such as user testing,
observational analysis, and follow-up interviews, I assessed the
intuitiveness of the design and identified potential usability
challenges. This iterative approach allowed me to refine the app’s
features based on practical feedback, rather than relying on
assumptions or theoretical scenarios.
The low-fidelity prototype provided an opportunity to
concentrate on fundamental functionalities and user flows,
setting aside visual design details at this stage. This
streamlined version of the app acted as a testing platform for
essential interactions and tasks, enabling me to evaluate the
success of my design choices. Engaging directly with users
uncovered specific areas that required adjustments or a complete
redesign, ensuring that the final product delivered a seamless
and intuitive user experience.
Findings
This project underscored the significance of iterative design
and real-world testing as integral components of the design
process. Working with a low-fidelity prototype allowed me to
efficiently explore various iterations and challenge my initial
assumptions about the app's usability. The accompanying research
study emphasized how essential user feedback is in uncovering
pain points and refining the design. Even at the prototyping
stage, minor adjustments—such as reorganizing button placement
or enhancing navigation clarity—had a substantial impact on
improving the overall user experience.
Observations
The research study and prototype testing revealed several key
insights. Simplicity and clarity emerged as top priorities for
users, who often expressed frustration with convoluted
navigation or overly complicated workflows. Common pain points
included excessive steps for completing basic tasks and
insufficient feedback following specific actions. Conversely,
users appreciated features that were intuitive and immediately
useful, such as quick access to essential tools and prominent
call-to-action buttons.
Usability testing highlighted opportunities for improvement,
particularly in minimizing cognitive load. Feedback
indicated that navigating between screens was a challenge
for many users, emphasizing the need for a more seamless
flow and intuitive wayfinding. Additionally, some users
noted that the interactions felt too rigid, underscoring the
importance of designing a more adaptive and user-friendly
experience that better aligns with diverse user needs.
Comments