Application Design: Final Project Hi-fi Prototype

1/4/2025 

ALTAIFI, LEEN MAAN A (0367698)

Bachelor of Design (Hons) in Creative Media, Taylor's University

Application Design

---

Table of Content

1. Instructions & Tasks

        - Design Process

        - Usability Testing

        - Final Submissions

2. Feedback

3. Reflections

---

1. Instructions & Tasks

Module Information Booklet:

Task 4: Create a Hi-Fi Prototype

In this final project, we are instructed to continue working on our create a hi-fi prototype based on our lo-fi prototype for our chosen mobile app. This prototype should showcase the final visual design, interactions, and functionality of the application. The hi-fi prototype will act like a realistic simulation of how our app functions that will allow users to experience and provide feedback on the final design.

Hi-Fi Design Process

Using the UI kit I've constructed as well as the references, they will guide me throughout the whole designing process in order to have a consistent, comprehensive design.

I start adding the color, icons, images, and content to a copy of the wireframe pages for the high fidelity prototype. Similar to the lo-fi design process, I design it section by section in order of the pages. Since I am working on Adobe Xd, a lot of the tools make the designing process much easier, especially the "repeat-grid" tool that honestly saved me so much time. The reason I used Adobe Xd is because I'm more familiar with it than Figma. Had I used Figma, I would've wasted time trying to get to know the software first.

Fig.1.1: Hi-Fi Design Process 2

Fig.1.0: Hi-Fi Design Process 1

 Most of the app's content are artworks since it is an artist-centered app, I saved a bunch of artworks from Pinterest to use in both the home and explore feeds. As for the profile, however, I used my own artworks.

Fig.1.2: Hi-Fi Design Process 3

Fig.1.3: Hi-Fi Design Process 4

Fig.1.4: Hi-Fi Prototype Overall Design

Hi-Fi Prototyping Process

For a lot of the micro-interaction animations I used Xd's 'auto-animate' action type which was quite tricky and tedious to use. In order for it to properly work, the animated objects need to have the same object type, name, and placement in the layers. So, as you can imagine, with all of these pages it's easy to lose track of where the layers are and what they are called. But I think the software itself makes the process pretty easy I would say. An example of an animated micro-interaction is when the '+' is clicked, it transitions and moves upwards, showing two other options: Image and text. I retained Cara's original design of having the ability to post both images or just text, so I decided to separate them. If the user wants to directly post an image they can press the image icon, if they want to share a text, they can directly press the text icon.

Fig.1.5: "Auto-animate" Transition Type - Prototyping Process 1

Another example is the toggle button. I designed the two different states: on/off, and once clicked it will transition (using auto-animate) into the other state. For the notifications page specifically, it was a bit tricky because I have "Allow all notifications" that controls all settings below it, so when that one is clicked, every other setting follows. However, because they are all the same object, I had to rename them one by one because when they were all the same name, the auto-animate tool gets confused and even rearranges them randomly.

Fig.1.6: "Auto-animate" Transition Type - Prototyping Process 2

Another type of animated interaction I have is the feedback message when a process has been completed or successful. I used the action/transition type 'overlay', so that the page with the feedback message itself does not need a background, it will just overlay on top of the current page, and disappears within a specific time-frame, which in this case I chose 1 second.

Fig.1.7: "Overlay" Transition Type - Prototyping Process 3

Below is the combination of all interactions between the pages. Because I wanted the app to be more interconnected, instead of separated in different flows, I tried to make most buttons lead to its respective destination for it to seem like a more realistic app prototype.

Fig.1.8: Overall Prototype Interactions

Hi-Fi Prototype Sections

Fig.1.9: Log in/Sign up to Cara

Fig.1.10: Home Page: Home, Latest, Communities. (Create a post [+] toggled on/off)

Fig.1.11: Communities Section; Joining a Community Group Flow

Fig.1.12: Create an Image Post Flow pt. 1

Fig.1.13: Create an Image Post - Flow pt. 2

Fig.1.14: Profile Side Page, and Hamburger Menu Overlays

Fig.1.15: Explore Page: Explore, News, Jobs

Fig.1.16: Filter and Search for a Job - Flow

Fig.1.17: Apply for a Job - Flow

Fig.1.18: Track Your Job Application - Flow 

Fig.1.19: Your Profile Section

Fig.1.20: Edit Profile Section

Fig.1.21: Notifications and Messages Section

Usability Testing
After finishing up the first draft of the lo-fi prototype, we were instructed to undergo user testing for our designs to get direct user feedback. In order for the testing process to go smoothly, we had to create at least 3 scenarios the user needs to go through to test the functionality of the prototype.

Scenario 1: Sign Up, Create, and Share an Image Post

The objective for the first scenario is to test how easy it is to create an account, navigate, and share content.

1. Sign-Up Process:
   -Open the app
   -Tap the "Sign Up" button
   -Enter necessary details (username, password, email)
   -Tap Sign Up

2. Home Page Navigation:
   -Explore the default landing view after signing up.
   -Identify where the "Create Post" button is located.

3. Post Creation:
   -Tap "Create Post."
   -Add an image (select from the gallery).
   -Add a description, and add a label.
   
   

4. Post Sharing:
   -Tap "Share."
   -Confirm the post appears on the home page or profile feed.
   
   

Scenario 2: Browse Communities, Join a Group, and Locate It in Profile The second scenario tests the discoverability and usability of the community section.

1. Navigate to Communities:
   -Start at the home page and find the "Community Section."

2. Browse Communities:
   -Use search or filtering options to find “Digital Art” Community.
   -Open the "Digital Art" community to view available groups.

3. Join a Group:
   -Select a group "Digital Art Collab".
   -Tap "Join Group."
   -Check for confirmation (a success message or group icon change).

4. Find Your Joined Groups:
   -Go to the profile page side panel.
   -Locate the "Your Communities" section.
   -Confirm the joined group appears in the list.
   -Test re-accessing the group from the profile page.

Scenario 3: Explore Jobs and Track Application

The objective of this last scenario is to test the navigation and functionality of the Explore section and job application tracking.

1. Navigate to Explore Page:
   -Tap the "Explore" icon from the home page.
   -Browse categories like "Explore," "News," and "Jobs."

2. Find and Apply for a Job:
   -Tap the "Jobs" section.
   -Use filters or search to find an on-site job listing.
   -Open a job listing and view details (e.g., requirements, company profile).
   -Tap "Apply" and follow the application process.

3. Track Job Applications:
   -Go to the profile page side panel.
   -Open the "Your Jobs" section.
   -Verify the applied job appears under "In progress"
   -Check if status updates are available.

I recruited 4 participants to test my prototype. I conducted the usability testing online via Google Meet, where the user will share their screen testing the Adobe Xd prototype link.

Fig.1.22: Usability Testing Video Recordings in Google Drive

Link to Hi-Fi Prototype Usability Testing Video Recordings

User Feedback

I've compiled the main points from the feedback 4 participants during usability testing that were crucial to consider and implement in my design:

1. Mobile Scaling Issues: Users accessing the app prototype via mobile faced screen scaling issues, causing the navigation bar at the bottom to be cropped and disrupting navigation. This issue was not observed in the website version.
   
   
2. Toggle Button Colors: The on/off toggle button states are too similar in color, making it difficult to distinguish between the two states.
   
   
3. Explore Page Filter Icon: A user suggested removing the filter icon on the Explore page since the page already has categories for navigation.

Changes after User Feedback

I've made changes according to the feedback I've received in regards to some of the design choices I've made. One user noted that the on/off toggle button state colors were too similar so I needed to make the difference more clear. I made it so that when it is 'off' the toggle circle is dark.

Fig.1.23: Final Improvements on Design 1

I also removed the filter button and changed into a search icon due to a user's suggestion that the filter was redundant if the categories were already there.

Fig.1.24: Final Improvements on Design 2

Hi-Fi Prototype Video Walkthrough

Final Hi-Fi Prototype

Link to Adobe Xd Hi-Fi Prototype

---

2. Feedback

Week 14: 

The Lecturer gave me some helpful design suggestions to my design: To add more shadows in the news page's cards to separate it from the background. And add more steps when it comes to the search bar and input fields. E.g. a user name when the user touches the keyboard so it can sign in/up, and the same thing with adding a caption to a post the user is about to share.

---

3. Reflections

Experience

When I started designing the high fidelity prototype, I noticed a lack of steps in my scenarios that I could've added during the lo-fi phase, so I had to add them later on and improve my design. 

Working on this made me realize the design process is not always linear, we tend to miss things or notice them when we are looking at it in a different perspective and time, so we end up going back and forth. Like how I missed things or needed improvements in my lo-fi design when I was already in the hi-fi phase. And in this phase, especially since we are creating an app FOR people, we need to get outside perspective on our designs because we get too used to how it looks from our own perspective; this is an important lesson design has taught me. Since I come from a background in art, I got used to looking things through my own subjective lens, so breaking that habit was sort of difficult getting into design at the start. But now, through implementing the necessary design steps, I am beginning to get used to the process.