Application Design: Assessment 4 - HiFi

on

12.12.25 - 04.01.26

Celine Christabelle Patricia / 0374872 

Application Design / Bachelors of Design (Hons) in Creative Media / The Design School

Task 4: Hi-Fi prototype 

Table Contents

  1. Lectures
  2. Instructions
  3. Tasks
  4. Feedback
  5. Reflections

Lectures

Week 12

Nielsen Norman Group - UX youtube to learn

Usability Heuristics

  • visibility of system status
    • users can see the system status and understand the current state
    • confirmation messages, progress bar, navigation cues
  • match between system and real world
    • align with users’ real world experience and familiar language
    • icon should be consistent
  • user control and freedom
    • feel in control, flexibility to undo and redo
    • always allow users to go back and stop, cancel and close
    • toggles and checkbox
  • consistency and standards
    • reuse some elements, consistent visuals, functions and feedbacks
  • error prevention
    • reduce likelihood of users of making mistakes
    • for example: having clear instructions, confirmation prompts, validation
  • recognition rather than recall
    • recognize information or options presented to them, don’t make users recall themselved
    • every screen have the navigation, letting them know what they are doing where are they, what is next
    • for e.g, menu navigation, search histories/recommendations
  • flexibility and efficiency of use
    • interfaces are suitable for both beginners and professionals
    • e.g. customization (like personalized interface settings, preferred shortcuts) , shortcuts, adaptability, filters
  • minimalist
    • based on trend, people this day prefers identity building, maximalism
    • though you must focus on simplicity, clarity and visual appeal
  • help users with error
  • help and documentation

Design principles - visual design

  • balance
  • contrast
  • emphasis
  • unity
  • proximity → far from each other but still a group
  • repetition → respectively a sequence
  • alignment -optical alignment
  • hierarchy
  • simplicity
  • negative space
  • proportions → 60% 30% 10%
  • weight → primary button ,secondary, tertiary, icon button

Design system

  • design language

  • DESIGN KITS → all of the design elements

    • put everything elements and things like that to help the developer as well
    • building blocks → components and guidelines, find elements that can be reused
  • component library, accessible for all the designers
  • developer sandbox
  • documentation site
  • Group similar items together
  • Find the same name (put attributes then function smt like that)
  • put your contact (if u the pic yes)

Week 13

Design Principle

  • Start from 12 pt
  • Make it block, not too ragged
  • Header and body text size difference is about 2 pt, don’t make it too big
  • Use lighter black (for e.g. #1F1F1F)
  • Avoid 50% gray
  • 60-30-10 (main color, highlight, impact) → bg, text, buttons for instance
  • SOFT shadow on CLICKABLE objects (opacity 10%), can use tinted shadows to prevent dullness → highlight
  • don’t apply SHADOW on small elements and text
  • “TOY DESIGN”
  • Icons should have the same space, bounding box is usually 24px X 24px
    • In the UI KIT, show the two state of the icon (if they have)

PHOTOS

CARDS

  • think of a card as of a shorter version of specific
  • If the info is too long, just make it dot dot dot
    • For e.g. AVATAR 3 FIRE AND ASH ⇒ AVATAR…..

UI NAVIGATION

Search Bar

  • one line text input to search information

Breadcrumbs

  • a line show path to current user location (which part of the flow are they)
  • don’t use slashes, use arrowheads
  • Can shorten in by showing the first second and current step (the steps in between can make it dot dot)

Pagination

  • navigation through pages
  • If you have like over 600+ contacts, usually under the page theres like (1/40)
  • Show what is the view page before, where am I, and what is the last page

Slider

  • used to set value or range of values in a given set
  • function as filter
  • show progress
  • typically horizontal

Tags

  • used on the lowest level of hierarchy to find precious content
  • can be color coded
  • button
  • basically filters

Icons

  • alternative ways to text links and button
  • represent category or items
  • can have text label
  • consistent style of icons

Carousel

  • for skimming among items
  • showcasing multiple items
  • highlighting featured content
  • quick access items
  • block usually clickable
  • efficient use of space
  • guiding user flow
  • Onboarding steps → u explain what does this app do (the very” first time they download your app)

Mobile Specs

  • increase linespace between text, at least 16px
  • element size at least 44x44px
  • Consider heatmap → bottom half is the hot zone (where the thumbs are), too low is not comfortable
  • visibile labels
  • avoid multi column grid
  • include keyboard slide-up
  • preserve readability
  • more space
  • 3 text blocks per column
  • 5 items per row
  • Consider framework

Dropdown

  • for selection ,single line/multiple options, image

Radio button

  • for selection
  • only one option
  • you stop the experience and confirm them to choose
  • for CHOICES MORE important than dropdown

Checkbox

  • vertical arrangemetn
  • select one or more options
  • best arrangement, vertical
  • one or more colomns

Toggle

  • select between 2 staters

Date and time picker

  • select date and time, calendar drop down !!

Grids

  • improving readability
  • colomns rows, keep consistency
  • auto layout can replace your grid

Monetization and gamification

business side of your app

Monetization

  • how to sustain the business
  • process of converting something into money, how to create revenue
  • maintaining any type of platform takes time, energy and resource → need to create revenue to let it sustain / grow

Types:

  • User interaction
    • advertising
    • remove ads
    • subscription
    • pay per use
    • freemium (free or premium)
  • Active purchase
    • affiliate marketing
    • sales
    • microtransactions
    • in-app purchases
  • Intellectual property
    • licensing
  • Others
    • sponsors
    • donations
    • data

Gamification

  • use of game elements in non game context to motivate people and increase the engagement

Games

  • customization
  • levels (membership levels)
  • experience
  • statistics
  • leaderboards
  • achievements
  • medals
  • Epic meaning and Calling → notifications
  • Development and accomplishment → making progress, develop skills, overcome tougher challenges
  • Empowerment and creative feedback → trial and error , figuring things out, feedback loop
  • Ownership and possession → accumulating wealth, improve digital estate and represents collection
  • Social influence, relatedness and envy → acceptance and belonging, competition and envy, mentorship and companionship, nostalgia and memories
  • Impatience, scarcity → wanting something you can’t have because of limited access
  • unpredictability and curiosity → what will happen next (for example lucky draw after purchasing)
  • loss and avoidance → fear of losing an investment, create perceived value out of time and effort, emphasize neg- consequence of FOMO

    Intrinsic vs Extrinsic

    Extrinsic → enjoy the reward

    Intrinsic → enjoy the action

    Positive vs negative

    <back to top>

    Instructions




    Tasks

    Presentation slides



    Hi-Fi Workspace
    Feedback

    Week 12
    Group similar items together. If there are major changes from the lo-fi to the final hi-fi, do not forget to put it as well in the powerpoint, what change and why so. Make sure to have the spacings uniform from each sections. 

    Week 13
    Make sure all elements are consistent like they are all in the same application.
    (From friends) Have the spacing for each sections not too narrow.

    Week 14
    (From friends) To divide different sections, instead of just using different font size, you can use a slightly darker color from the base color to emphasize it, this is used in certain apps as well.

    Reflections

    After 14 weeks of learning, from exploring app features to understanding user pain points through the design thinking process, I realized that designing an app to solve a real problem is far from simple. Each stage, including empathy, ideation, prototyping, and testing, required careful consideration to ensure the solution truly addressed users’ needs. This process helped me better understand how users think, behave, and interact with digital products. It also showed me that a good design is not only about aesthetics, but about creating meaningful and usable experiences based on real user insights.

    Overall, I enjoyed both the design process and the final outcome, as the project managed to meet my expectations and allowed me to apply what I had learned throughout the 14 weeks. However, for future projects, I hope to work in a team setting, as collaboration could encourage idea sharing, constructive feedback, and more efficient problem-solving. Working with others would also help me improve my communication skills and expose me to different perspectives in design decision-making. In addition, I wish to further refine this project and develop it into my first portfolio piece by improving the overall layout, visual hierarchy, and presentation of the promo page for the final showcase. With more time and iteration, I believe this project could be strengthened both in terms of functionality and visual design, making it a more polished and professional representation of my work.





    Comments

    Post a Comment