Application Design: Lo-fi Prototype

 9/12/2023 

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 3: Create a Lo-Fi Prototype

In this task, we are instructed to make a lo-fi prototype before working on the hi-fi prototype to design the main features of the app. Then, we are required to perform usability testing with users to test out our low fidelity prototype and gather all the information, response, feedback, pain points observed from the test and use it to improve our designs and make it as intuitive as possible.

Visual Design Concept: UI Kit

Before planning and designing the wireframe, we are required to develop a visual design concept that aligns with the branding of our application. This concept should include color schemes, typography, and iconography that convey the chosen application.

Fig.1.0: Cara's Original Design

Cara's original Design only has a dark mode as of yet, because of that, I'd like to propose a light mode design to make it more accessible. Since the original design of the app is purely black and white, with a very minimal inconsistent accent color of blue and green, I decided to add a soft lavender/lilac color because it's a modern, creative color that wouldn't overpower the app's content. 

Fig.1.1: Online Color Finder Tool

I used a color shade tool online to get the different shades and tints of the lilac color, which is how i got the second shade of the lavender/lilac gradient I use in the color palette.

Fig.1.2: Cara Redesign Color Palette

The lilac will be used as an accent color for buttons and some headers. This includes, a light background, and a dark shade of the lilac to replace the black.

I decided to use Open Sans for the font in the app, because it is modern, clean, and a universally used font. Throughout the app, I will use bold, semi-bold, medium, and regular font families depending on the information hierarchy. 

Fig.1.3: Cara Redesign Typography

To match the modern look and feel of the interface, I found icons that are well suited from an online UI kit, and changed the color to suit the theme.

Fig.1.4: Cara Redesign Iconography

Lastly, to make the design process easier and consistent, I had the grid system laid out to the default grid on Adobe Xd with minor changes, such as making the side margins 20 px. And the mobile canvas dimensions are as stated below:

Fig.1.5: Cara Redesign Grid System

UI Kit PDF

References

Cara is not only an artist portfolio app, but also a social media app. Therefore, I referenced a wide variety of apps ranging from its competitors: DeviantArt, ArtStation, Instagram, Behance, to other social media apps like Twitter, Reddit, WhatsApp, and of course, not to stray too far from the original source: Cara.

Fig.1.7: References from Social Media apps 2

Fig.1.6: References from Social Media apps

Lo-Fi Design Process

I start off my design in order of the navigation bar: Home, Explore, Create a Post, Notifications, and Messages. Inspired by the twitter and reddit design, I make the profile accessible from the top left corner of the app, because not only can you view the profile, but you can also access personal content excluding your profile such as your bookmarked posts, the communities you are in, and your jobs. 

Fig.1.9: Lo-fi Designing Process 2

Fig.1.8: Lo-fi Designing Process 1

I took inspiration from a lot of sources and combined them into this redesign, in hopes of designing an intuitive design that achieves my goals for this redesign and complete what is missing from the original design.

Fig.1.10: Lo-fi Designing Process 3

Fig.1.11: Lo-fi Designing Process 4

Admittedly, my design process was not as organized as I would have liked it to be; ideally, I would prefer to finish one section at a time, but I kept jumping from section to section before finishing one, due to the ideas in my head rapidly firing.

Fig.1.12: Overall Lo-Fi Prototype Design

Lo-Fi Design Sections

Fig.1.13: Log in/Sign up Page

Fig.1.14: Home Page: Home, Latest, Communities

Fig.1.15: 'Create a Post' Section

Fig.1.16: Profile Side Menu and Hamburger Menu

Fig.1.17: Viewing Profile Section

Fig.1.18: Communities Section 'Searching for and joining a community'

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

Fig.1.20: Applying for Job Section

Fig.1.21: Tracking Job Application and Saved Jobs Section

Fig.1.22: Notifications and Messages Section

Lo-Fi Prototyping

I started prototyping and adding the button interactions between the pages simultaneously as I was designing because I knew that if I left it at the end it would get very overwhelming considering how many pages there are, and it is easy to get lost, confused, and miss some things.

Fig.1.23: Lo-Fi Prototyping on Adobe Xd

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.24: Usability Lo-Fi Testing Video Recordings in Google Drive

Link to Lo-Fi usability testing 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. Brand Logo Functionality: A user suggested that the Cara brand logo in the middle should act as an additional home button, similar to how it works on some websites.
   
   
3. Community Group Membership Update: A user noticed the group member count does not automatically update after joining a group. They also suggested the "Join" pop-up window should close automatically after joining instead of requiring manual closure.
   
   
4. Job Application Categories: A user found the "Accepted" category under "Your Jobs" unnecessary and suggested replacing it with "Applied For," which tracks all jobs previously applied for, regardless of the outcome.
   
   
5. Application Tracker Feedback: A user deemed the "Review Application" feature in the application tracker unnecessary if applications cannot be edited.
   
   

Changes after User Feedback

After hearing the user feedback, I gained insight that I haven't noticed myself so I used that to improve on my design. I fix the unnecessary designs in the Job Flow, such as removing the 'accepted' category and replacing it with 'applied for' and removing the 'review application' button.

Fig.1.25: Adding Improvements to Job Section 1

Fig.1.26: Adding Improvements to Job Section 2

I also made the changes in the join community group pop-up window so that the number of members changes as the user joins, and the pop-up disappears after the user clicks 'join group'. And added the function of 'home button' to the cara logo in the top middle.

Fig.1.27: Adding Improvements to Join Community Section

Lo-Fi Prototype Video Walkthrough 

Final Lo-Fi Prototype

Lo- Fi Prototype Adobe Xd Link

---

2. Feedback

Week 13: 

I showed the lecturer my prototype and he pointed out that it lacks further steps in every scenario. As of now, my prototype is pretty static and the steps are incomplete, meaning the user cannot fully finish one scenario flow, so I need to add more steps to what I already have. Additionally, sir suggested I add a job progress bar to the profile and make it so you can apply through the app. 

---

3. Reflections

Experience

It was a bit challenging designing the prototype because the app had so many possible scenario flows and what I ended up doing at first was trying to have everything in the app interactable, when I should've focused on 3 main flows. Therefore, my design ended up sort of watered down and lacking in depth, so as per the lecturer's advice, I added more steps to the design. Additionally, because of the user testing process, I got to hear different perspectives on my design and suggestions of things I have not thought of myself which was very crucial for the design process.

It was pretty interesting to observe and analyze how people try the prototype with no prior expectation and seeing if they can easily navigate a new app, which in this case, is my prototype. Because ideally, an app should be universally easily understood and used because of how global apps have become. And if people face difficulties using the app, then there must be a problem with the design. But I found it challenging to keep that universality while also providing something unique. I ask myself: "How should I differentiate my design from others?" And think of offering something new to the table, either by features, the steps it takes to get to the action, or by creativity. Thus, with the additional help of feedback from others, I hope to improve my design in the high fidelity prototype.