Labels

Application Design I | Final Task: High-fidelity app (GoTour)

FEILYCIA JOY KURNIAWAN / 0373400 

Application Design I / Bachelor of Design (Honors) in Creative Media 

Final Task: High-fidelity app (GoTour)

    LECTURE

    WEEK 12 - Heuristics for UI Design

    Usability heuristics - general principles or rule of thumb that designers use to help and improve user-friendliness and usability

    Jakob Nielsen' 10 Usability Heuristics:

    1. Visibility of system status 
            (confirmation & error messages)
    2. Match between system & real world
            (navigation bar icons)
    3. User control and freedom
            (flexibility to undo or redo actions)
    4. Consistency and standards
    5. Error prevention 
            (confirmation prompts)
    6. Recognition rather than recall
            (history and favorites) 
    7. Flexibility and efficiency of use
            (shortcuts)
    8. Aesthetic and minimalist design 
            (consistent typography & colors)
    9. Help users with errors
            (clear error messages)
    10. Help and documentation 
            (contextual help and online support)

    INSTRUCTION


    <iframe src="https://drive.google.com/file/d/1H4RAKyXEGGU7Y4Mojo_v6dA3xUIJrNgS/preview" width="640" height="480" allow="autoplay"></iframe>

    PROCESS

    Click here to see Task 3 

    Task 3 Recap
    Areas of improvement for high-fidelity prototype:

    • Improve the labeling for each page
    • Make navigation bar more noticeable by making it slightly higher
    • Add more feedback to the navigation bar (current page, the icon will change color)
    • Add labeling for each page
    • Add more interactions to the input forms to make it look more realistic
    • Be more consistent on the layout and the overall design

    UI Kit 

    Iconography: for icons, I used the icon set from Iconify in Figma plugins. I aimed for a round edged icons to give it a softer look

    Color palette: Since GoTour is integrated in Gojek, I used Gojek's iconic green as my primary color and used different shades of blue as the accent color 

    Typography: When analyzing the typography used in the current Gojek app, they use a clean and structured sans serif. So I used montserrat as my font. The thinnest font I used was Montserrat (light) as I found the other light variations are too thin making it hard to read. 




    3D Iconography: Gojek has these 3D icons on their app, so I went to canva and looked for similar icons to use on my GoTour


    Monetization




    1. Advertisements 

    GoTour will generate revenue through paid advertising and promotional partnerships with travel-related businesses such as airlines, hotels, travel agents, transportation services, and experience providers.

    In-App Banners

    • Example: Flight discounts, hotel promotions, tour packages, transportation deals.

    • These banners appear in non-intrusive areas of the app so they do not disrupt user experience.

    • Clicking the banner takes users directly to the partner’s promotional page 

    How GoTour earns:

    • Partner pays a fixed fee for banner placement or campaign duration
    • Example:
    • Airline pays RM10,000 to run a 1-month “20% OFF Flights to Bali” banner in GoTour.
    • A hotel chain pays to promote seasonal deals during school holidays.

    2. Promotion Codes in Ads Banner

    Other ways to get money is also from the codes provided from the third party. For instance, XXX airlines have a promotion code: YYCC, when users input that code →

    How GoTour earns:

    • Commission per code used
    • Percentage of transaction value

    Example:

    • Airline gives 3% commission per successful booking using special code
    • A RM1,000 flight booked → GoTour earns RM30
    • 500 bookings → RM15,000 revenue
    3. App Booking Fee


    GoTour makes money by taking a small 3% app fee every time someone books a tour guide or service through the app. 

    For example, if someone books a guide for RM100, GoTour earns RM3. 
    This fee helps the app:
    • keep running 
    • handle payments safely 
    • provide customer support 
    • and help connect users with trusted local guides 
    The 3% fee is small, so it is still affordable for users and fair for the guides. Many travel apps also use this same way to earn money.

    Gamification 


    GoTour uses achievement badges, similar to Duolingo, to make the app more fun and motivating. When users do certain actions in the app, they earn badges they can keep on their profile.

    Examples:

    • 📰 Journalist Badge → when user makes their first post / review
    • 🧳 Planner Badge → when they successfully plan a trip
    • ✈️ First Class Badge → when they book a flight or use travel services
    • 🌍 Explorer Badge → when they visit multiple places

    When users get a badge, they feel:

    • rewarded
    • recognized
    • like they achieved something

    When users know they can unlock more badges, they are more likely to:

    • open the app again
    • travel more
    • post more
    • interact more

    Badges can:

    • show who is active
    • who travels a lot
    • who helps others
    Promotion Page


    FINAL OUTCOME





    LINKS

    Figma work view: https://www.figma.com/design/XWNMMHOXFMLA8mmeZofWxn/high-fi-prototype?node-id=0-1&t=88nVPYQpNCECxpFk-1

    Figma high-fidelity prototype view: https://www.figma.com/proto/XWNMMHOXFMLA8mmeZofWxn/high-fi-prototype?node-id=242-140&p=f&t=iVbB4zA8euWzqRca-1&scaling=scale-down&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=418%3A235

    Click here to see Task 3 

    Canva Presentation: https://www.canva.com/design/DAG9cCOatfc/og2c6ILP9dIMZV79yxfZRg/edit?utm_content=DAG9cCOatfc&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton
    FEEDBACK 

    WEEK 12

    Feedback - Briefed about final task and what was expected for this task

    WEEK 13

    Feedback - Was told to add gamification and monetization aspects to our app and an additional promo page. 

    I also showed him my progress

    WEEK 15

    Feedback - Showed him feedback about my app specifically about the fill in forms, he said does not need to be fillable, just make it realistic enough

    REFLECTIONS 

    During the 14 weeks on application design 1, I enjoyed the overall module. From the 4 tasks given, I would say I struggled the most on task 2 when we were gathering data. But other than that, I enjoyed the process of making the app, the thought process and finalizing it. 

    This module has taught that making an app needs a lot of consideration and a lot of data gathering. You need to deliver what your audience wants and prioritize user experience. Although I struggled a lot during the data gathering, I later find it very useful because it gave me a direction of where I need to go and gave me an idea of features that people would actually use. Prototype stage was fun, I did the whole process on figma, and although I forgot some of the components, Mr. Sylvian helped by giving lectures and tutorials in class. 

    All in all, this project was a fun way to see how an app is actually made. From proposal, data gathering, user testing and the final prototype, I learnt the whole process and specifically how to gather data to use for your app 



    Labels:

    Comments

    Post a Comment

    Popular Posts