

Projects
This is a school project under UX course. Me and my classmate were created this project called "Better Off". Better Off is a new social media platform focused on creating and presenting content that is socially progressive, such as Mental health, Climate change, Positive self image and Anti racism . Our platform provides a voice for all users, and gives an equal opportunity to interact and exchange ideas. Here at Better Off, our aim is to create a positive and safe environment, without any outsider judgement and negative comments. Better Off allows the users to become creators, and provides the tools to create content based on their values and beliefs.

Design brief
Social media platforms such as Facebook, Instagram, and Reddit have received negative media and community reactions. Issues and criticism have plagued social media. Examples include cover bullying, click-bait, sensitive content, propaganda and conspiracy theories. Films such as The Social Dilemma explore the unethical intentions of social media companies.
How might we create a social media platform balances playful interactions (like Tik Tok) and taking action on progressive topics such as sustainability, climate change, anti-racism, positive self-image, mental health and wellbeing.

Research
From the data our team received from surveys and interviews, an affinity diagram was developed to sort through a large amount of data and place them into groups. The key ideas were categorised into their common themes which was an efficient way to visualise the results. Our team later used these to develop focus points and ideas for the designing phase.

Paper prototype
Our team first began the design process with paper prototyping. This method allowed us to make quick sketches based on our research insights, and ensure all of our ideas were put onto paper. Annotations were made to ensure the group members could understand all designs. These ideas were shared verbally and sketched to be utilised later in the design stages.
The picture above is my idea for a main function interactive design.

Wireframing
Once prototypes were sketched, we transitioned our designs to Adobe XD and began wireframing. At this stage, our team individually worked on different elements of the wireframe, including the Login, Homepage and Profile pages. Refinements were also implemented at this time, with significant features updated from the original paper prototypes.
My responsibility is a Log-in page. My idea is trying to use as modern design as possible. As our social media's target is mostly in young generations.

Style guide
I am mostly share an idea about colour palette and style guide for this project as well. As you can see, a colour palette is still using pastel colour as I personally like it. And it suite to this project as it is avoiding progressive topic on our application.

Individual reflection
Role within the team: UI design
I am covered the most interface design on the application “Better Off” including logo, colours, fonts, and icons. Style guide will be providing on the next page.
Challenges faced:
Sometimes, the design that we made during the processes since paper prototype, low fidelity until high fidelity. When it looking good for me, It doesn’t mean it good for everyone. So we have to re-do a new design over and over again like when I have learned in classes.
What did we learn:
I learn about the processes that UX/UI designer have to deal with. Also integrate the knowledge and apply to work as a team is also an important thing. UX design is the fundamental of the whole project of the application, but it also the main starting point. Because in the business way, we create an application for what the client want to respond to what user need. So we are to ones who really design for the user’s experienced to launch the great product.