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.
16/6/2024 - 22 /7/2024 / Week 9 - Week 14 Cindy Clarissa Leslie / 0367677 Advanced Typography / Bachelor of Design (Hons) in Creative Media Task 3: Type Exploration and Application LECTURES Link to lectures 1 to 4 Link to lecture 5 INSTRUCTIONS In this task, we were required to propose specific problems and how we could design a font in order to solve them. These proposals were collected in slides format and proposed to the lecturer in order to decide which ones were good enough to do. Research Figure 1.1 Slides for proposal. Week 9, 16/6/2024 In the end, I chose to create an extension based on my old font and go with the final idea of creating a font for a band, I wanted to be able to present their metalcore music that showcases how different songs in the album is able to be loud and sharp, while some of their songs are on the softer side. Figure 1.2 Original logo/typeface for the band. Week 9, 16/6/2024 Setting the original typeface as a reference itself, I wanted to be ab...
2 /12/2024 - 7/1/ 2025 / Week 11 - Week 14 Cindy Clarissa Leslie / 0367677 Application Design / Bachelor of Design (Hons) in Creative Media Final Project: High Fidelity App Design Prototype LECTURES PROJECT 1: MOBILE APP PROPOSAL PROJECT 2: UI/UX DESIGN DOCUMENT PROJECT 3: LOW FIDELITY APP DESIGN PROTOTYPE INSTRUCTIONS Project 3: Lo-Fi App Design Prototype Design process Figure 1.1 Deciding on the final colour scheme At first, I was struggling a lot in deciding on the final colour scheme. I had a lot of different experiments switching from dark to light mode. Since there are 3 official brand colours, I had to choose one of the colours instead as I figured that the purple that I initially planned on using wasn't able to reflect on the brand. At the end, to ensure a strong branding, I eventually chose blue as the accents with additional pink from the logo as the numbered notifications and other interactive elements especially in liking posts that could add to the design in a ...
Comments
Post a Comment