Labels

Application Design: Final Project

26 June 2025 - 28 July 2025

CHONG CHENG TAO (0371072)
Application Design | Bachelor of Design in Creative Media | Taylor's University
Final Project: High Fidelity App Design Prototype

List

        INSTRUCTIONS

        This is the Module Information Booklet for this module: 



        Final Project: High Fidelity App Design Prototype
        • Introduction
        • User Testing & Changes
        • UI Kit
        • Prototype Design
        • Gamification & Monetization
        • Flow & Interaction
        • Final Submission

        Requirement

        We will need tocreate integrate visual asset and refine the prototype into a complete working and functional product experience for a selected task.

        1. Introduction

        Pixiv is a Japanese online community primarily focused on art, particularly illustrations and manga. The app serves as a platform for artists and normal audience, allowing them to upload, showcase, and engage with creative content from around the world. Its core concept emphasizes community-driven content where most of the contents are uploaded by users themselves.

        Pixiv mobile app have faced several issues in term of usability and user experience. The problem mainly focused on navigation, artwork display & preview and the outdated UI design of the app itself. A more detailed analysis is stated in this proposal.
        In this project, the redesign will focused on refining the weaknesses of the app, simultaneously adding additional features that are highly requested by the Pixiv community.

        2. UI Kit / Design system

        The UI Kit are developed on the foundation of Pixiv design system:

        Color Palette
        Fig 1.1 Blue

        Fig 1.2 Black & Grey

        The main colors are blue, black and grey:
        • Blue 
          • Blue/main (#0096FA) 
          • Blue/50% 
          • Blue/25%
          • Blue/10%
        • Black & Grey
          • Black (#1F1F1F)
          • Grey/dark 2 (#8E8E8E)
          • Grey/dark 1 (#D9D9D9)
          • Grey/light (#EEEEEE)

        Fig 1.3 Red

        Fig 1.4 Green

        Two status colors are used:
        • Red
          • Red (#F72D0E)
          • Light red (#FFEAE6)
        • Green
          • Green (#3FC046)
          • Light green (#F0FBEA)
        Screen & Layout Guideline
        Screen size
        • Width: 375px
        • Height: 812px
        Layout guide
        • Column: 4
        • Type: Stretch
        • Margin: 16px
        • Gutter: 8px
        Fig 1.5 Screen & Layout guideline

        Fig 1.6 UI Kit


        2. Prototype Design (Preview)

        Fig 2.1 Lo-Fi design

        60/30/10 color theory is used on the UI design (60% dominant color, 30% secondary color, and 10% accent color). 

        Fig 2.2 Hi-Fi design

        3. User Testing & Changes

        Here is the sumamry of problem (from Project 3) and the changes: 

        a. Lack of identity on commission cards
        • Different colors are used to identify the status of commission.
        • Green (#3FC046): New
        • Blue (#0096FA): Active
        • Red: (#F72D0E): Cancalled
        Commission card with status colors


        b. Some icon is confusing (e.g. message & email)
        • Initially, the mail icon (1st version) represented the messaging features, but it is confusing and not obvious enough for users.
        • In the final version, a messaging FAB was introduced with different icon.
        FAB for messaging features


        c. Some wording for button would not be suitable
        • The wordings for receiving commission and uploading artwork were changed to improve clarity.
        • Receive > Accept
        • Submit > Upload
        Wording for buttons


        d. Alternative to access commission status
        • User can access commission status through sidebar.

        Sidebar

        4. Gamification & Monetization

        As recommended by Mr. Sylvain, we need to include gamification and monetization method into the app. Here is some idea I came up with:

        a. Gamification: Point & Leveling system
        • User will gain points after doing certain activities and action (e.g. uploading artwork, commenting, getting likes).
        • Artist gained levels and tier (e.g. Doddler, Sketcher, Senior, Master, Alchemist)
          Gamification badge


          b. Monetization: Ads display
          • Integrate the ads in the artwork frames. 
          Ads frame

          5. Flows & Interaction

          Fig 3.1 Receiving commission 

          Receiving commission:
          1. Pop out notification, click "View".
          2. Click the card "OC Character Illustration".
          3. Click "Accept".
          4. Click the card below "Sketch Phase".
          5. "Sketch approved".
          6. "Deposit received", click "Later".
          7. "Deadline Setting", click "OK".
          8. Click the card below "Final Artwork".
          9. "Artwork approved".
          10. "Payment received", click "Later".
          11. Click "Back".
          Fig 3.2 Uploading artwork

          Uploading artwork:
          1. Click "Upload" button at navigation bar.
          2. Click empty artwork card.
          3. Add title and description.
          4. Add tags.
          5. Click "Publish settings", click "Save".
          6. Click "Add to folders", click "Character" folder, click "Done".
          7. Click "Upload" or "Schedule".
          8. If click "Schedule", click "OK".
          Fig 3.3 Viewing artist

          Viewing artist:
          1. Click artwork.
          2. Click artist profile.
          3. Click "Follow".
          Fig 3.4 Other pages


          6. Final Submission

          Final Submission_Hi-Fi App Design Prototype

          Prototype flow


          Hi-Fi prototype walkthrough video

          Final Project_Slide

          FEEDBACK

          Week 10

          General Feedback: -
          Specific Feedback: 
          • Do some changes to the order of the flow, client should receive artwork before the artist post it.

          Week 11

          General Feedback: -
          Specific Feedback: 
          • What artist will receive (message, alert) if the deadline is near?
          • Is there any method for artist to directly naviagte to commission page (currently working, pending...)?
          • Add features regarding payment (payment received, watermark on artwork before receiving payment...) 

          Week 11

          General Feedback: -
          Specific Feedback: 
          • Commission card should be designed with different status, e.g: New, Active, Done, Cancelled
          • Change the chat icon, make it more obvious. 
          • "Receive" might not be a suitable word for receiving commission. 
          • The flow for receive commission is unclear. 

          Week 12

          General Feedback: -
          Specific Feedback: 
          • Overall very good.
          • Make minor adjustment on the font size to enhance readability. 
          • The tag should be a global tag instead of a local tag (e.g. link to all the artwork on the platform with same tag). 

          REFLECTIONS

          Finaly reach the enddddddddddd, Application Design have been an exciting module for me. This is the first time I deep down exploring and researching the user needs and behaviors of an app. I hope the redesigned direction would give new insights for the company in improving the app. 

          This is undoubtebly an heavy module, there are a lot of steps we have to go through before redesigning the app. The work flow of focusing on UX first indeed ease the designing and prototyping phrase as the direction and aim is clear on each aspects.

          Labels:

          Comments

          Post a Comment