CRITERIA C

C1:

Phase Design Component Actions Tools & Resources Dates(2024)

1 Importing Logos, This step is to import all Laptop, Success Oct 6 - Oct 7
Colors, and Fonts necessary items into the Criteria (Criteria
into Figma UI/UX design software B), Final Design
Figma. Chosen logos, colors, Reference (Criteria
and fonts will be imported by B)
uploading the logos and
fonts, and importing the
colors using their respective
hex codes.

2 Mastering Figma Watch tutorials from ManageBac Oct 7 - Oct 12,

Basics ManageBac and learn tool Tutorials, Figma
functionalities from Software,
Geeks4Geeks. Draft initial Geeks4Geeks,
UI/UX layout with newly Laptop
acquired skills.

3 Defining Visual Style Choose color schemes, Figma Tools Oct 12 - Oct 13
fonts, and icons. Compile (Color, Font,
these elements into a style Icons), External
guide page in Figma, Font Sources
complete with hex codes and
font details.

4 Defining Visual Style Set screen dimensions, Figma Frame Tool, Oct 13 - Oct 17
enable grid, and plan layout. Grid Tool, Style
Position placeholders for key Guide, Laptop
elements like buttons and
text based on final design
structure.

5 Structuring Convert wireframe Figma (Text Tool, Oct 17 - Oct 21

Wireframe placeholders to final Auto Layout), Final
elements. Add specific text, Design from
icons, and buttons as per Criteria B, Laptop
final design requirements.

6 Building Mockups Duplicate mockups for Figma (Text Tool, Oct 21 - Oct 25
prototyping. Define Auto Layout), Final
navigation pathways Design from
between screens, setting up Criteria B, Laptop
user interactions.
7 Linking Interactions Apply animations to create Figma Prototype Oct 25 - Oct 26
smooth transitions for user Tools, Mockup
interactions. Customize Pages, Laptop
animations for each button
and element as needed.

8 Animating Use Figma’s preview mode Figma Preview Oct 26 - Oct 27

Transitions to test the prototype. Gather Tool, Peer
peer feedback and identify Feedback, Google
areas for improvement. Docs for Notes

9 Final Refinements Integrate feedback and make Feedback List, Oct 27 - Oct 30
final adjustments to Figma Editing
animations and links. Tools, Prototype
Conduct a final review for and Animation
any remaining errors Tools, Laptop

C2

Skills Developed While Working on the Product

Creative Thinking Skills

Explanation:
Creative thinking in UI/UX design is the ability to generate unique, user-focused solutions. This
skill involves thoughtfully choosing colors, layouts, and interactions to create a visually
appealing and functional user experience.

Evidence of Demonstration:
In Figure 1I demonstrated creative thinking through the greeting message and color selection,
which reflects City Mapper’s friendly and simple navigation goal and it also shows how I applied
creative thinking during the wireframing phase, arranging the main page to prioritize quick,
intuitive user choices.
 FIGURE:1

Organizational Skills

Explanation:
Organizational skills in design refer to the structured management of assets, layouts, and
workflow within Figma. These skills ensure that each design element is easy to access and that
the project progresses smoothly from one stage to the next.

Evidence of Demonstration:
In Figure 2 my Figma workspace is well-organized with individual pages dedicated to each
design stage, including the style guide, wireframes, mockup, and prototype. This systematic
approach made it easier to maintain consistency and quickly transition between design steps.
 Figure:2

Critical Thinking Skills

Explanation:
Critical thinking in UI/UX involves evaluating feedback, making informed design choices, and
adapting features to meet user needs. This skill is essential for creating a user-friendly interface
that aligns with the app’s purpose.

Evidence of Demonstration:
In Figure3 I show how I applied critical thinking by implementing a “back” function for easy
navigation within the app. This feature was added in response to initial feedback, providing
users with a smoother experience, especially on the destination selection page.

FIGURE :3
Prototyping Skills

Explanation:
Prototyping skills involve creating interactive versions of designs to test user flows and
functionality. These skills allow for early feedback and adjustments, ensuring that the final
product is both practical and engaging.

Evidence of Demonstration:
Figure 4 illustrates my work in prototyping, where I used Figma to simulate essential app flows
from the initial greeting to selecting transportation modes. This process demonstrated my ability
to bring static designs to life, offering users a realistic preview of their journey through the app.

Figure:4

Wireframing Skills

Explanation:
Wireframing skills involve outlining the basic structure of an interface, focusing on functionality
and layout rather than detailed visuals. This foundation is crucial for building a design that is
both effective and aligned with user needs.

Evidence of Demonstration:
In figure 5 the wireframes for the "Main Page," and "Profile" screens illustrate how I mapped out
the structure and flow of the app early in the design process. These wireframes provided a
strong base that guided the development of the final mockups and prototype.
 Figure: 5

C3

Ciii. Follows the plan to create the solution, which functions as intended
and is presented appropriately

Final Product Overview:

The final product has been successfully developed in accordance with the initial design
plan functioning as intended and presented in a user-friendly manner. Below is an
overview of the final product and its evaluation based on the design specifications from
Criterion B.

FINAL DESIGN AND INITIAL DESIGN

Style Sheet: The style sheet includes a cohesive color palette and typography that
enhance the visual appeal of the app while maintaining readability and user engagement.

Style Sheet: visual representation of my style sheet here

Wireframe: The wireframe outlines the basic structure of the app, demonstrating the layout and
navigation flow for a clear user experience.

Wireframe: visual representation of my wireframes here

Mockup: The mockup presents a detailed visual representation of the app, showcasing all
design elements and features in their intended state.

Mockup: visual representation of my mockup here

Prototype: The prototype is fully interactive, allowing users to navigate through the app
and experience its functionalities, including real-time navigation and destination
selection.

Prototype: Link of my prototype here

Scoring based on Design Specification from Criterion B:

Design Aspect Score

 Aesthetics 3

Cost 2

Customer 1

Safety 3

Function 3

Size 3

Evaluation Summary:

Aesthetics (3): The app has a visually appealing design, utilizing a consistent color scheme
and modern typography that enhance user engagement.

Cost (2): While cost considerations were factored into the design, some premium features may
require additional resources, impacting the overall score moderately.

Customer (1): The app's initial testing phase revealed areas for improvement in user
interaction, leading to a lower score for customer satisfaction.

Safety (3): The app adheres to best practices for user data security, ensuring a safe experience
for users.

Size (3): The app's design optimizes space for readability and interaction, providing a spacious
and user-friendly interface.

Function (3): The app performs its intended functions effectively, allowing users to navigate
easily and access necessary features without issues.

Overall the final product meets the initial design goals, with small sacrifices in certain areas. The
app successfully combines functionality and aesthetics, providing a practical and engaging tool
for users navigating their city.

THE FUNCTIONALITY OF THE DESIGN

The final design successfully meets its intended functionality, providing a user-friendly interface
that enhances navigation and destination finding. Key aspects include:

Organized Information Display:

 Prominent Feature Display: Navigation buttons and search options are clearly visible and easy
to access, allowing users to quickly identify important features without confusion.

Intuitive Layout:

Logical Grouping of Functions: Each screen is organized to guide users seamlessly through
the navigation process, ensuring they can find information and perform actions without hassle.

C4

No. Change Made Explanation of Change Justification

1 Changed Color Initially, the color scheme was This change was necessary to
Scheme different. I revised it to use a color make the app visually appealing
palette that enhances readability while supporting functionality,
and visibility, aligning more with aligning with the “aesthetics”
city navigation aesthetics criterion from my design
specifications.

2 Adjusted Display for Originally, the destinations were This adjustment de-cluttered the
Destinations fully displayed on the main UI interface, making it more
screen. I changed it to use a user-friendly. It allowed me to
drop-down menu for each meet the “function” specification
destination to reduce clutter by keeping essential information
accessible yet organized.

3 Refined Map View The initial design had a basic map This change enhanced the clarity
view. I improved it to show clear of navigation, aligning with the
markers and routes, highlighting “function” and “customer focus”
popular landmarks and directions. criteria, making the app more
engaging and informative for
users.

4 Removed Initially, there was only one main By focusing on core functions, I
Customization screen. I added smooth transitions ensured that the design
Options between pages like the map, remained straightforward and
destination details, and transport easy to use, aligning with the
options to improve flow. “safety” and “size” specifications
of the project.

5 Added Scene Initially, there was only one main This was necessary to meet the
Transitions screen. I added smooth transitions “function” criterion. Smooth
 between pages like the map, transitions create a cohesive
destination details, and transport user experience, making it easier
options to improve flow. for users to navigate the app
intuitively.

Each of these adjustments enhanced City Mapper by creating a user-friendly, efficient, and
visually engaging experience, closely aligned with my design specifications from Criterion B.
These changes not only refined the functionality but also helped maintain the app’s focus on
practical, clear city navigation.