Major Project 1-UI/UX Specialization

Week 1 - Week 4 (04.02.2025 - 25.02.2025)

Michael Chan Henn Loong (0363611) / Bachelor of Design (Honours) in Creative Media
Major Project 1
UI/UX Specialization

INSTRUCTIONS

IMPORTANT LINKS

Figjam Board

Figma Lo-Fi Work File

Canva Slides

Final Canva Slides

TASK 1 - Proposal Development

So we were briefed the whole module and what to do for the whole semester on Week 1 and we were introduced to the head of the module Dr. Wong Chui Yin. We were also told to form our group as soon as possible so that we can start on our proposal idea as well. So I formed a group with Jordan Axel, Nathan Ng Zheng Kai and Ian Choo Xin Zhe a group of 4 as mentioned in class.

After forming our group we started to work on the project, Jordan created a Whatsapp group and invited all of us in so that we can communicate easier and Ian created a Figjam Board for us to work in it.

Fig 1.0, Week 1 Brain Storming & Ideation

Fig 1.1, Week 1 Brain Storming & Ideation summary

So in Week 1 we started working on brainstorming ideas on what to have for our FYP and we created quite a few ideas and recorded all of them down on the Figjam board and summarized the ideas so that when we are showing others they can go through it faster and get an idea on what we are thinking of.

Based on the Ideas we have, each of us decided to create one proposal and put it into the Figjam as progress so that we can go through with Mr. Shamsul during the consultation hours.

Fig 1.2, Proposal (Health Sync, Beacon)

Fig 1.3, Proposal (Digital Detox Companion, First Aid Guide)

So in week 2 we showed Mr. Shamsul our proposal we gone through each others ideas during the consultation explaining our ideas to sir and getting feedbacks for our ideas. Health Sync is by me, Beacon by Jordan, Digital Detox Companion by Ian and First Aid Guide by Nathan.

After the consultation with Mr. Shamsul we decided to work on the Beacon app it's basically a tinder app but for gamers to find their "perfect" teammates.

Fig 1.4, Slides selection & Framing choices

After we finalized on which app to work on Ian provided us a few choices of slides to use and we also started to brainstorm on the name for the app, taglines as well as the features that we should include in the app.

Fig 1.5, Improvised Features & User Flow

I've gone through what they've all listed out for the features but I think that the way they put it is too random and messy so I decided to work on it again I rearranged the features and added in some of my ideas as well as summarized what they were trying to say, I've also added a small pink box at the side mentioning some feature that I'm not sure whether that works with the app. I've also created a user flow as shown in Fig 1.5 which kinda demonstrates approximately how the flow would've been if we are designing the app with our current ideas and features. I created the flow so that we know what are missing throughout the process and we know what to add on or whatsoever.

Fig 1.6, Interview Questions

We've also created our interview questions right after the consultation on Wednesday because we will be showing our questions to Mr. Shamsul on Friday morning. So I created the one on the most left I put in too much details so the question is too long and I've tested it out with one of my friend, he kept his answers short and clean and it took around 30 mins to finish the set of questions. So after giving Mr. Shamsul a look on our questions he provided us some feedback as shown in Fig 1.7.

Fig 1.8, Feedback For Questions

So after receiving our feedback we went and combined our questions together and simplified some part of it deleted some repeating part and got our final questionaire.

Fig 1.9, Final Questions

After getting the final questions we started doing our interviews, and below are the answers I got for the interviews.

So after getting all our interview answers, we moved on to synthesizing our data using the affinity diagram to look for our patterns as well as our user insights.

Fig 2.0, Affinity Diagram 1

Fig 2.1, Affinity Diagram 2

So we started on the Ideate & group first by brainstorming around an area of concern that are mentioned in our interview answers then cluster the ideas together to make them into groups. After this we move on to creating themes using the ideas we have in the ideate and group section and lastly the user insights.

I personally think the user insights is the hardest as I took quite some time to go through the user interviews again and again to fully understand what they meant what is their perspective, do I agree on what they say, are there any biased answers, etc. It took me quite some time, even though it's time consuming but I think this process helps a lot in providing me the vision of our app like what it should be and what should be accomplished.

After all these we went and did some little research on some "Competitors" that we each knows and looked up on what are their pros, cons and other information.

Fig 2.2, Research

So Jordan did Lita App, Nathan did Steam chat, Ian did Noobly and I did E-pal, even though its not expected in the deliverables slides we still did some research on our "Future Potential Competitors".

And before ending this Blog here's our project timeline for Major project.

Fig 2.3, Project Timeline

TASK 2

After all that we started with our user persona based on the interviews and interviewee we created each of our own user persona and mine is Alex Chang.

Fig 2.4, User Persona 1st attempt

So this is my first attempt on our user persona and we got feedback from Mr. Shamsul saying that we can start on our user journey maps and include scenarios in them as well as changing the size of our text in our user persona and also include the psychographics and we can remove the personality to replace other information.

Fig 2.5, User Persona finalized & User Journey Map

So I reworked on my user persona as well as started my user journey map and we showed it to Mr. Shamsul everything was acceptable and there's nothing much to change for our user persona and journey map just that there is too much information so that we should summarize them so that it will be easier for the lecturers to read and understand what we've done during the presentation on Week 7 19th March.

As for the user journey map I created 5 user steps:

-Awareness Stage – Identifying the Problem

-Consideration Stage – Exploring Solutions

-Decision Stage – Trying the App

-Engagement Stage – Using the App

-Retention Stage – Becoming a Loyal User

I included these 5 stages because I think they are the most common stages that our user will really go through, its not too niche or cliche for everyone so I think its a good idea to have these 5 stages for our user journey map.

After finishing up everything for task 2 Ian started creating our slides and I helped him a little bit on inserting the information of the persona's and journey by helping him summarize them and initially Ian worked on the layout so that the slide will be more presentable.

Task 1 & 2 Presentation Slides

Task 3

After finishing up the user persona and journey map we started with our card sorting we used USERBIT for our card sorting session and we discussed in a group on what features should we use for the card sorting as well as the categories for the app, and ultimately I'm the one who is in charged or the card sorting session.

So after one day sending the links to our participants we received total of 12 responses and 1 disabled result as he did not finish the session.

Fig 2.6, Total Responds on card sorting

So below are the final results of the card sorting and after getting our results I analyzed the results and provided our group with a list of features and where they are categorized.

Fig 2.7, Card Sorting Result

Fig 2.8, Card Sorting Result

Fig 2.9, Card Sorting Result

This is the list of the features in their corresponding categories after I'm done with our card sorting analysis we started with creating the user task flow based on this.

Fig 3.0, Card sorting analysis features

Fig 3.1, User Flow Chart

So this is our user flow chart, firstly Ian created the spines and showed it to Mr. Shamsul as I haven't finish the card sorting analysis by that time he only included the categories that we will be using but not any of the features are in, so after getting the features we started on adding in out features and refined the whole flow chart. I worked on the social, events and profile and Ian worked on the others.

After we are done with the flow chart we started with our next step.

Design Guideline & Moodboard

So we did our design guideline as well we decided on what color we will be using for our app as well as the margins for our lofi prototype and also the fonts and sizes as well so that in the lofi our margins, fonts and colors will be similar and consistent.

We've also named our color in a sense that they are reflected to our app-

-Stealth Purple: It represents games like assassins creed and stuff which is stealthy like a dark night.

-Quantum Blue: It represents Sci-Fi in a sense because of the word quantum.

-Beacon White: It represents the light that a beacon can give off in the night.

Fig 3.2, Design Guideline

Lofi Prototype

At first I started the Lofi Prototype thinking that we are doing individual Lo-fi for our work so I actually did the onboarding page and home page and after a discussion with the group only I knew that we are doing the features separately.

Fig 3.3, Onboarding Pages 1st Attempt

So these are the work that I did before I know that we are not doing the whole applications Lo-Fi. So I did a logo page and added in the questions for the onboarding pages proceeded with designing my own home page and the icons on the most right is actually an inspiration from the company Weyland Corp from the movie Aliens. I that the buttons might look more cool and techy if it's in triangle shape, but after a few thoughts I'm not sure whether it will work so I listed it in the draft and at the bottom its the matchmaking history mentioned in the features.

Fig 3.4, Home page drafts

So after that for the lofi prototype we distributed jobs among ourselves each of us was assigned with one or two of the features to design, So I took the onboarding pages and profile pages as I feel more comfortable with them as for Nathan he took Event, Jordan took the home page and the community page and as for Ian he took the Shop feature

Fig 3.5, Profile Pages

So after communication with my group I chose to work on the onboarding and profile as I'm the only one have finished the onboarding and everyone thinks the pages work so we went forward and decided that we will be working on my onboarding page, so I started to work on the profile pages at first I was working on profile 1 but then throughput the process I noticed that it looks kinda boring so I threw it aside and started to work on profile 2 and I think it looks way better then the first one and I'm sastisfied with it so I moved on to doing the profile editing page and setting page.

After that Jordan opened a new figma project file for us to insert all our stuff together and adjust our margins and match our colors so that the lofi prototype looks consistent.

Fig 3.6, Figma Project File

I've also made some small changes with my onboarding page by adding in some small bars to show which questions are the users at so that they wont feel irritated and thinking like "how many more questions are there left" and stuff like that.

Fig 3.7, Final Onboarding.

So after moving all our stuff over to this file we started to prepare our slides for the presentation on 19th March Week 7.

Fig 3.8, Summarized Presentation Slides

So we worked on the slides pretty hard thinking how to summarize everything so that it wouldn't be too hard for the lecturers to understand what we are trying to convey without wasting too much time and energy trying to focus on the small texts we have originally in out figjam.

But we didn' think thoroughly that only Mr. Shamsul have seen our work and progress, the other lecturers have not seen our progress so when we summarized too much of the information it would seem like we didn't prepare our work properly and it feels like a lack of preparation for our presentation and also lack of proof for our work.

So in the end we stayed back and looked at how the other groups presented and prepared their slides as Dr. Wong Chui Yin suggested.

I've learned that no matter what we do we must definitely show our progress as well as a proof to whatever we do as not all the lecturers have been with us throughout all our progress so that no matter what we say there is nothing better than showing our proof.

So after receiving the feedbacks from the lecturers, we started to redo our slides with including all the information we have.

I've also changed how we organized our Information Architecture so that we can fit it in our presentation slides.

Fig 3.9, Information Architecture Map

So I made our IA map into a horizontal state so that it is easier for us to insert it into the final slides. After finishing this I also went and recorded a new video on our Lo-Fi prototype as we have made changes to our Lo-Fi so we cant use back the same video in our summarized presentation slides

Fig 4.0, Lo-Fi Walkthrough

Since we already have a complete version of slide consisting of everything with all the info so for this final slides we only needed to make some small changes and add in some new information and we are done with it.

So for our final submission slide Ian used back the old complete slides that we have with all the information and proof of work inside and changed the color theme to the ones we are using for our lofi and added in new information that we are lacking as well as work that we have improved on.

So as mentioned on top I redo the Information Architecture Map so that it would be easier for us to insert it into the slides as well as recorded a new sets of lofi walkthrough I've also shared my google drive with the group so they have the access to the card sorting finalized results.

Fig 4.1 Final Submission Slides

FEEDBACK

Week 2 (Proposal Idea)

-Many limitations and complications
-A bit too sensitive (very personal)
-Complications such as health ministry etc.
-Related to people lives, many dangerous things could happen eg. diagnosing diseases etc.
-Hard to find respondents

Week 3 (Interview Questions)

-The first set is a bit too long and could take longer time to complete

-But I kind of like it. Comprehensive

Week 4

-Include Scenarios in user journey map

-Psychographics for user persona and make the text bigger in the user persona

Week 5

-Summarize the user persona & user journey map for the slides

-Present Task 3 on week 7 19th March at E1.08

-By next week come up with task flow

-Every member should do the card sorting

Week 6

-More extensions of the user flow (By this week)

-1 Person 1 task flow

-Decide on the design guideline

-analyze card sorting

Week 7

-Detailed User Persona and provide proof to work

REFLECTION

Week 1

As its the first week we got briefed on what we are supposed to do throughout the whole semester and also were asked to form a group of at most 4 people so that we can start to work on our work asap.

Week 2

We showed our assigned lecturer our progressed and got some feedback on how to improve and improvise as well as chose our topic on which one will we be working on.

Week 3

We showed our interview questions gotten feedback from lecturer improved it and started on our interview session gotten our answers we analyzed it and gotten our raw data.

Week 4

This week, we made some key refinements to our user journey map by adding scenarios to make it feel more realistic and relatable. We also worked on the psychographics for our user persona, which helped us better understand our target audience's motivations. One small but important tweak was making the text more readable, ensuring that our insights were clear and impactful.

Week 5

Our focus this week was on summarizing our user persona and journey map for the slides. We wanted to make sure everything was concise but still informative. We also started preparing for Task 3, which was due on March 19th, so time management became crucial. The major task this week is the card sorting.

Week 6

This week was all about refining our user flow and making sure it make sense from start to finish. Ian took the lead on mapping out the task flow the spine, while I helped out on doing the design guidelines. We also analyzed the results from our card sorting activity, which gave us valuable insights into how users naturally categorize information. It was a busy but productive week, and we started seeing everything come together.

Week 7

With the final stretch in sight, we focused on touching up the details. We finalized our user persona, making sure it was well-researched and backed up with proof of work. Seeing all our efforts come together was really rewarding. At this stage, it was more about fine-tuning everything and making sure our work was polished and ready for submission.

Search This Blog

Michael Chan Henn Loong (0363611)