UX DESIGN - FINAL PROJECT

-

29/03/2022
Hansel Ribowo (0350008)
Final Project

Lectures

Week 2
Users UI UX
1. Research (MEET THE USER)
  • User Demographics
  • Define user goals
  • Define user challanges
  • Desfine metrics and form hyphotesis
2. Empathize (BE THE USERS)
  • User personas
  • User scenarios
  • User testing
  • User experience map
3. Create ( MAKE IT SIMPLE)
  • Wireframes
  • Moodboard
  • Mock-ups
  • Style guide
4. Test (DOATA DON'T LIE)
  • Usability tests
  • Review matrics
  • Track usage
  • Inform next iteration
5. Develop (STICK TO THE DESIGN)
  • Usabillity tests
  • Review metrics
  • Track usage
  • Inform next
Determine Value Mteic > Set Costumer Segments > Complete User Research

Value Metric
  • Singing up for it or paying for it
  • Using it more than once
  • Telling others about it
Usable
It means the design, structure, and purpose of the product is clear and easy to use.

Equitable
it means a design is helpful to people with diverse abilities and backgrounds.

Enjoyable
It means the design delights the user.

Useful
That means it solves user problems.

Segmentation
1. Demographic > properties like age, gender, education level, occupation, or income level.
2. Geographic > Geographic areas, such as countries, regions, or cities.
3. Behavior > Behavioral patterns that users experience toward using a particular product. These can include buying behaviors (spending and consumption) and desired benefits.
4. Technology > The level of users tech savviness.
Introductions
Tasks

In the first week we were given a task from Mr Hafiz we need to choose 1 things and identify the difficulity that we get from that and what the result from that difficulity for me i pick door drower in my house that i ussually struggle to open it.

Fig 1.1 Task 1

In the second week we were given task to define target audience and demographic for our mobile app.

Fig 1.2 Target Demographic

Fig 1.3 Target Audience

For the next task is to make User Emphaty and Project Definition.

Fig 1.4 User Emphaty

Fig 1.5 Project Definition

The next one is to make User persona for my Steam Mobile App to determine what should I know what to change in my redesign, and make design audit to pin point what the pain point in the old app design.

Fig 1.6 User Persona #1

Fig 1.7 User Persona #2

Fig 1.8 Design Audit

For the next one is to make user experience journey map to know what our audience thing when operating the app.

Fig 1.9 User Experience Journey Map

Next, we must make PowerPoint to present the data that we already gather by making user persona, empathy, and others.

Fig 1.10 Steam App Presentation

After I done with the presentation, I make an interview with my friend about the mobile steam app before redesign.

Fig 1.11 User Experience Survey

After I got all the pain points next part is to make the Lo-Fi prototype of the redesigned steam mobile app.

Fig 1.12 Lo-Fi Mobile Steam App Redesign

For the complete data that I make is in Miro link Here
Reflection
In this module is a lot of work to do and sometimes I confuse with the task because its really similar to application design, but I manage to understand what should I do and what the different, and maybe I confuse because there is a lot of public holidays that make this module have a lot of no class but I still enjoy when making all the task even tho there is a lot of difficulties.

Comments

Post a Comment

Popular posts from this blog

APPLICATION DESIGN II - EXERCISE 1

-
Image
12/04/2023 Hansel Ribowo / 0350008 BDCM (UI/UX) Application Design II - Exercise 1 Exercises In this first week, Mr. Razif explains to us about MIB and what task and project we will do this semester after that we learn how to use Chat GPT to make a website after that Mr. Razif asks us to do some exercises which make a website using Chat GPT. Here my website uses Chat GPT Fig 1.1 Home Page Fig 1.2 About Page Fig 1.3 Portfolio Page Fig 1.4 Contact Page Fig 1.5 HTML Coding in Visual Studio Code Fig 1.5 HTML Coding in Visual Studio Code Fig  1.6 CSS Coding in Visual Studio Code Fig  1.7 CSS Coding in Visual Studio Code Fig  1.8 CSS Coding in Visual Studio Code ...
Read more

APPLICATION DESIGN II - LECTURE

-
Image
03/05/2023 Hansel Ribowo/BDCM App Design II Lecture Lecture In this week we learning how to animate our website. We start by learning how to use Gsap website to help us with the animation of the website, Then we try to animate our website logo by using script that we copy from Gsap. First we need to load Gsap into HTML page we need to add script in visual studio code which is this After adding the script now we can add the animation from Gsap, our lecture want us to the animation for the logo so this the code for the animation First we need to add id to the logo. and then add the Gsap at the java script section. This one is for adding ease in/out for the animation After that, we added some animation delay to make it come one by one. This animation for the side panel that when we press it will show the menu to animate the section we need to add the animation when open and close the panel. now we making the main lo...
Read more