Application Design 1 - High Fidelity Prototype

16/12/2025 - 09/12/2025 (Week 13- Week 14)

Application Design - Low-Fidelity Prototype

Cindy Noverin / 0376409

Bachelor of Design in Creative Media / Taylors University

---

TABLE OF CONTENTS

Lecture 

Proposal 

Feedback 

---

Lecture

Week 13

Definition: UI elements are the parts we use to build apps or websites. They add interactivity to a user interface, providing touchpoints for the user as they navigate their way around.

UI elements usually fall into four categories:

1. Input Controls: Allow users to input information into the system.

2. Navigation Components: Help users move around the product.

3. Informational Components: Share information or feedback with the user.

4. Containers: Group content together.

1. Input Controls

These elements let users tell the system what to do.

• Buttons:

  • Definition: A clickable element that triggers an action.

  • Types: Primary (main action, bold color), Secondary (alternative action, outline/ghost), Text Link (subtle).

  • Usage: "Submit," "Log In," "Cancel."

• Text Fields (Input Fields):

  • Definition: A box where users can type text.

  • Usage: Usernames, passwords, search bars. Can be single-line or multi-line (text area).

• Checkboxes:

  • Definition: A small square box that allows users to select one or more options from a set.

  • Rule: Use when the user can select multiple options (e.g., "Select toppings: [x] Cheese [ ] Pepperoni").

• Radio Buttons:

  • Definition: Small circular buttons used to select exactly one option from a list.

  • Rule: Use when the user must select only one option (e.g., "Gender: ( ) Male (x) Female").

• Toggles (Switches):

  • Definition: A switch that turns a setting On or Off.

  • Usage: Dark Mode, Enable Notifications.

• Dropdown Lists:

  • Definition: A button that, when clicked, reveals a list of options.

  • Usage: Selecting a country from a long list to save screen space.

• Date Pickers:

  • Definition: A calendar selector that lets users choose a specific date or time range.

2. Navigational Components

These elements help users find where they are and where they want to go.

• Search Field:

  • Definition: A search box (often with a magnifying glass icon) allowing users to find content by keyword.

• Breadcrumbs:

  • Definition: A trail of links showing the user's current location within the site hierarchy.

  • Example: Home > Men’s Wear > Shoes > Boots.

• Pagination:

  • Definition: Breaks large content into pages.

  • Usage: "Page 1 of 10" or "Next >" at the bottom of search results.

• Tags:

  • Definition: Keywords or labels assigned to content to help categorize it.

  • Usage: Clicking a "Tech" tag shows all tech-related articles.

• Sliders:

  • Definition: A track that allows users to select a value (or range) by dragging a handle.

  • Usage: Volume control, Price range filter ($10 - $500).

• Icons:

  • Definition: Simplified images used as symbols to represent functions (e.g., a "House" for Home, a "Gear" for Settings).

3. Informational Components

These elements communicate with the user without always requiring action.

• Tooltips:

  • Definition: A small hint that appears when a user hovers over an item.

  • Usage: Explaining a complex icon or feature.

• Progress Bars:

  • Definition: A visual indicator of how far along a user is in a process.

  • Usage: File upload status, completing a profile setup.

• Notifications (Badges):

  • Definition: A small red dot or number on an icon.

  • Usage: Showing unread messages or new updates.

• Message Boxes (Alerts/Toasts):

  • Definition: a small popup window that provides feedback.

  • Types:

    • Success (Green): "File saved."

    • Error (Red): "Password incorrect."

    • Warning (Yellow): "Unsaved changes."

• Modals (Pop-ups):

  • Definition: A window that sits on top of the main page and requires user interaction before they can return to the main app.

  • Usage: Confirming a deletion, quick sign-up forms.

4. Containers

These elements hold other elements together to create structure.

• Cards:

  • Definition: A rectangular container that groups related info (image, title, text, link) into one unit.

  • Usage: Pinterest posts, YouTube video thumbnails, Product listings.

• Accordions:

  • Definition: A vertically stacked list of items that can be expanded or collapsed to reveal content.

  • Usage: FAQ sections (Clicking a question expands the answer).

back to top

---

High Fidelity Prototype Development

after finishing the user testing, I started doing the high fidelity prototype right away. follwing the feedback and since I have lots of monochrome shade that I used in the low fidelity, I decided to make them simpler with the color palette that I made

fig.1.1. color palette

then I started with drawing the greenhouse plants to give a vibrant garden like view, and updated the catalog on the greenhouse page. to see the plants collection that the user have, as well as the gacha options.

then I continue on fixing and upgrading the options on the timers and settings on the timer amount, sessions, whitelist apps, etc.

all buttons are now intractable on the focus timer and to-do list. 

then I did more on the socials and finished it up on some functions and navigations issue that is pointed out during the use, and fix my buttons because there are some inconsistencies when I tried gathering the UI kit.

my workspace 

UI Kit

back to top

Final Submission

High Fidelity Prototype 

Submission Links

 

Figma : https://www.figma.com/design/SPrOtIeZQovfPX72yTJdkm/App-Design-Prototype?node-id=654-1119&t=85AiPrqwAuJbRqva-1 

Canva : Focus Plant 2.0 by Cindy

back to top

---

Feedback

Week 13

I asked about adding a functional timer and scrollable number for the timer Mr. Sylvain said to at least make the scroll bar interactable, I ask about external function of the app and Mr.Sylvain said that its good to do something extra and if it could explain my prototype its a good idea to add one, and that if I want to use for the gradient look into more reference on how other designers use gradient on UI

Week 14

I did not do any consultation during this work period..

 

back to top

---

Reflection

Experience

The transition to High-Fidelity development was the main focus of these final weeks (Weeks 13-14). I moved away from the monochrome placeholders of the previous phase and established a vibrant, garden-themed color palette to bring the "Focus Plant" concept to life. A significant portion of my time was spent hand-drawing the plant assets for the greenhouse catalog to ensure the "gacha" mechanics felt rewarding. I also implemented the feedback regarding the timer, ensuring that the number scroll bar was fully intractable rather than static, and refined the "Whitelist Apps" feature using proper input controls like toggles.

Observation

As I began assembling the final screens, I observed a significant issue with consistency in my initial designs. Without a centralized guide, I had inadvertently created slightly different versions of primary buttons and icons across different pages. I also noticed that applying the lecture concept of "Containers" (specifically Cards) was essential for the greenhouse inventory; it allowed me to group the plant image, title, and status much more effectively than a simple list would have.

Findings

I found that creating a UI Kit is not just a documentation step, but a crucial design tool that forces you to standardize your work. By gathering all my elements in one place, I was able to spot and fix the inconsistencies I observed earlier. Additionally, the feedback on the timer taught me that "micro-interactions", like a working scroll bar, are vital for a high-fidelity prototype because they bridge the gap between a static image and a feeling of real functionality.

back to top