Cindy Clarissa Leslie / 0367677 Application Design / Bachelor of Design (Hons) in Creative Media Project 3: Lo-Fi App Design Prototype
LECTURES
Week 11: Lecture 11
Usability testing
Evaluate a product or service with representative users
The aim is to detect usability issues, gather qualitative data, and assess overall user satisfaction.
Create scenarios for the participants, observe how they use it and gain insights. (3 different scenarios for 3 different users)
Create a low fidelity wireframe first (does not contain graphics nor colours, just the main idea of the whole layout)
UI Kit
Should include aspects of the design:
typography
colour palette
iconography
INSTRUCTIONS
Project 3: Lo-Fi App Design Prototype
UI Kit
As stated in the lecture, the UI kit should be created first to predetermine the design's typography, colour palette and iconography in order to ensure that it stays as consistent as possible. The kit will then be used as a foundation in creating the prototype.
Figure 1.1 UI Kit
For the colour scheme itself, since the original brand had 3 colours, I consulted and figured that I need to keep it as minimal as possible and pick one colour out of the brand instead, which is why as of that moment I was still undecided and had to experiment further in the high fidelity prototype
References
Since the app I'm redesigning a social media app, I've mostly taken references in specific features from photo-sharing apps that have stayed highly relevant in the long run. These apps include: Lemon8, Instagram, TikTok and Twitter.
Using both reference and UI kit, I started designing the low fi prototype in greyscale. In the design, there are 5 sections found in the navigation bar, including home, search, upload, group and profile. I wanted my design to focus on easy navigation while having a modern minimalistic look. I chose the color to mostly be black in order to retain a part of the original design.
Figure 3.1 Navigation bar prototype
Since the app I'm redesigning is a social media, the prototype itself includes a lot of intersections where users would commonly go back and forth especially in the navigation bar. I had to ensure that these navigation bars are aligned properly while being fix in place as I had to stretch most of the frames as it includes scrolling touch feature.
Figure 3.2 details and overlays
After receiving feedback from the lecturer, not only did I decide upon a color scheme but I was suggested to create more interactive details such as opening the comments.
Final design before user testing
Figure 4.1 Log in & sign up page
Figure 4.2 Home page
Figure 4.3 Search pages and interactive elements
Figure 4.4 Public profile pages
Figure 4.5 Upload photo process
Figure 4.6 Album organization options
Figure 4.7 Group joining process
Figure 4.8 Additional small details/features
Figure 4.9 Overall prototype
Usability testing
For the 3 participants, I recruited 3 people that are rather experienced in using social medias therefore they can identify the pros and cons of the UI in comparison to those that are highly relevant (such as Instagram, Pinterest etc.), these participants also matched the target demographic as I recruited those who are active in photo-sharing/photography. 3 scenarios have been created to go along with the user personas that were created in the previous task.
Scenario 1: Exploring the algorithm and searching for another user.
During the starting screen, sign up a new account by inputting your credentials and choosing your interests for the app to set up your home page.
In the home page, you are allowed to explore both ‘for you’ and ‘following’ by switching on each section. Different posts can be seen through scrolling, where the posts are shown based on an algorithm.
Switch to the search page by pressing onto the magnifying glass on the navigation bar. Scroll through the different content shown ranging from photo contests and photo albums.
Click on the search bar and input keyword to find specific posts.
Press on the post to view it in detail. To find more information regarding the photograph, you can click the ellipsis icon (three dot icon). Comments can be seen by clicking ‘view all comments’. To view the full image, simply press on the photograph.
After viewing the details, click on the profile picture/name to view other users profile page and other things they have posted.
Lastly, click on the ‘follow’ button to start keeping up with the user’s posts.
Scenario 2: Uploading a picture and organizing albums.
During the starting screen, sign up a new account by inputting your credentials and choosing your interests for the app to set up your home page.
In the home page, you are allowed to explore both ‘for you’ and ‘following’ by switching on each section. Different posts can be seen through scrolling, where the posts are shown based on an algorithm.
To start uploading pictures, click the ‘plus’ button located in the middle of the navigation bar.
Select the photos you want to upload and proceed to the next step, where you can make edits and alter your image with the tools.
Before uploading, type in all the information and tags you want to display regarding the photograph, you can also sort it into an album. Click the upload button once satisfied.
You will be immediately taken to your profile page, where you can see how your profile and uploaded posts look to the public. Switch onto the album tab by clicking on it to start organizing.
Press on the specific album you want to edit or organize. You can change the cover picture, name and publicity by clicking on the edit button right beside the cover image. You can manage the arrangement of the posts by clicking on the management button beside the editing button.
Additionally, for quick album management press on the ellipsis icon (three dot icon). Profile pages can be edited and you can input contact information especially for business related processes.
Scenario 3: Exploring and joining groups.
During the starting screen, sign up a new account by inputting your credentials and choosing your interests for the app to set up your home page.
In the home page, you are allowed to explore both ‘for you’ and ‘following’ by switching on each section. Different posts can be seen through scrolling, where the posts are shown based on an algorithm.
Switch to the group page by clicking on the community icon in the navigation bar.
Scroll through the home feed which shows the different posts from all the groups you have joined. To further filter the posts, you can click on the sort by option and choose to see the most recent or trending posts.
Utilize the search option by clicking on the magnifying glass icon, type in keywords to find the desired group.
Click on the group you are most interested in by the group image or name, you can explore both posts or media tabs before deciding to join the group.
Simply press the join button to officially become part of the group.
Additionally, after joining, you can start posting in the group by clicking on the plus button on top right (optional).
During the testing, I shared the prototype to the participants so that they can access it themselves and let them share their screen through zoom meetings.
Showcase how the comment section works in the prototype, just 3 or 4 comments are okay. Make sure to be able to finish everything before the deadline and interview 3 people. For the colour scheme, refer back to the lecture and use 3 colours at maximum using the 60 30 10 rule. Make sure that the navigation bar only has 5 features max with a minimum of 3.
REFLECTION
Experience
In my own experience, I found this assignment to be more fun in comparison to the last few projects. Although it was a bit tedious especially since there were a lot of small details that are required to make the prototype feel as real as possible to an actual app but it's not as complicated as the research part. I think the most fun part is the freedom in designing how the app is going to be as long as it goes along with our own research and definitely familiarizing ourselves with Figma for our future projects.
Observations
While I went through different apps for references I've observed how most social medias have similar layouts. These designs are minimalistic as they mostly focus on core functionality and navigation, while the brand images were dependent on its colour scheme instead of things such as illustrations. There are also certain unspoken rules that UI designers should follow to make their designs as effective as possible, which I learned in the lectures itself.
Findings
Again, I found the importance of doing usability testing by recruiting real life potential users. At first I though my design was already fine enough until I actually gotten feedback and realized that there are small things that I need to change in order to improve on user experience. Feedback on users is a reoccurring aspect that should be emphasized on as it is a rather easy and straightforward way to consistently improve one's design.
29/5/2025 - 3/6/2025 / Week 5 - Week 6 Cindy Clarissa Leslie / 0367677 Experiential Design / Bachelor of Design (Hons) in Creative Media Task 2: Experience Design Project Proposal LECTURES LINK TO LECTURES INSTRUCTIONS Task 2: Project Proposal Ideation From the ideas I've gathered, I had to choose one and proceed to create a detailed proposal for it. To which I have chosen to be Coral Care AR, Problem statement: Coral reefs, which are important to the earth’s ecosystem, are rapidly depleting due to climate change and human activities, however there's limited awareness especially from younger audiences who may not fully grasp the urgency. Aquariums often showcase coral reef systems for display, however the message of restoration is often missing or ineffectively displayed in static text panels. These executions fail to create a sense of connection or involvement, which is especially important in terms of building awareness. Without a more immersive execution, ed...
23/4/2025 - 29/5/2024 / Week 1 - Week 5 Cindy Clarissa Leslie / 0367677 Games Development / Bachelor of Design (Hons) in Creative Media Task 1: Game Design Document LECTURES Lecture 1 Basics of C# Variables Our tutorial for the first week was mostly an introduction to the module, additionally past senior works to provide us ideas and inspiration. During our first tutorial, our lecturer gave us the basics of C#, using the w3school website for easier understanding. The C# Variables learned were: int - stores integers without decimals double - stores numbers with decimals char - stores single characters string - stores text, more than 1 character bool - stores values with 2 states: true, false Next, we had a hands on learning process by testing these variables on a script in Unity. Figure 1.1 applying the basics onto scripting in Unity This knowledge is then applied onto Unity itself. I mostly learned that using public will be essential as it allows actions such as changing and tweaking t...
Comments
Post a Comment