UX Design
Lee Yu Hui | 0335787
UX Design
Lectures
Week 1
During the first class, we were introduced by Mr. Shamsul about UX Design. He briefed us about the upcoming projects and assignments that we'll be taking.
Upon the briefing, we were informed that we'll be collaborating with a company and help out with problems that they're facing.
List of problems is as below:
Problem 1: User Acquisition
Problem 2: Passport
Problem 3: Mobile App
Problem 4: Redesign ESPL Website
Problem 5: Virtual Trophy
Week 2
For this weeks class, we had a lecture about design thinking by Mr. Shamsul. We were taught about phases of design thinking process,which will be helpful when generating ideas in the future.
Lecture slides about design thinking
Aside from that, we also got a presentation from our classmates, which topic focuses about "Individual Interview". In short, individual interview helps UX designers to do the research to achieve what the users want. Therefore, individual interviews happens mostly on the earlier stages on a project development.
Presentation about Individual Interview
For this weeks tutorial, we were assigned to do a user journey map based on an app. For our group, we decided to do a user journey map based on FoodPanda, a food delivery app.
We were introduced to a online board called Miro, and from there we form our user journey map.
User Journey Map on Foodpanda
Week 3
We started our class with a presentation from our classmates about the topic user persona. We learned that user persona is a fictional representation of our target customer, and it helps designers to understand patterns in research, so that its easier to target designs around users.
For this weeks tutorial, we are required to create three user personas based on the website ESPL, which is the E-sports website that we're about to work on this semester.
As this was meant to be an exercise for us, there was no need for us to conduct interview with people yet, and therefore the user persona that we created are all fictional.
Common ways to use personas:
Week 5
Initially we were supposed to have our presentation to ESPL company this week, however due to the public holiday, the presentation was then postponed to week 6.
Presentation slides about Card Sorting
Project
For the project for this module, as mentioned in the previous section, we will be collaborating with an E-Sports gaming company called ESPL.
The aim for this project is to conduct evaluations and identify the problems that users had from the current website that they had, and further provide a solution and proposal to improve the website. As such, this will be an ongoing project towards the end of the semester.
To start off the project, we first have to understand and get to know about the company. We first visited their website and have an overview of the entire website.
Below are some screenshots of the website:
Reflection
Week 1
Learning about UX Design is kind of new to me as I have no experience in doing UX Design previously. I got a bit nervous when I found out that we're collaborating with a company to work on the projects. I hope I'll do well and will be able to learn more about UX Design this semester.
Week 2
Learning about individual interview reminds me of how important it is to listen and understand users experiences to create better design. Most of the time, I tend to design base on my perspective as a designer, but it is also important to also understand the users perspective in order to create a better and more satisfying designs.
Week 3
I was confused about the purpose of having user persona at first, as I thought it was weird having to create a fictional representation of my target customer. However it made more sense after Mr. Shamsul explained further about user persona as one of the reason is to ensure the opinions are unbiased. It was definitely eye opening to me learning about user persona.
Week 4
I realize that focus group helps developers and designers to identify the problems that occur to them, and its fascinating to me that people might see things differently than designers do.
Week 5
No class due to public holiday this week.
Week 6
I felt pretty nervous when presenting our proposal to the client as we weren't sure if they liked it or not. After the presentation we did get our feedbacks on where we can improve on, and I hope we won't make the same mistakes twice based on the feedback we received.
Week 7
I'm quite excited as we can start executing our proposal and make it come true. I learned a lot about the symbols that people commonly use in the industry, and working on the flowchart of the website also made me notice a lot of details that we may have missed before.
Week 8 - 13
The process of creating the prototype in XD fascinates me as there are a lot of features and settings that we can play with to make it look like a real website. I had a lot of fun creating the intractable buttons and seeing the website slowly coming to life. I was quite nervous when conducting user testing for the first time, but I slowly got used to it and in the end I wasn't as nervous anymore. I'm glad I got the chance to try out something new.
Week 14
It was really satisfying seeing the prototype fully done. It was a new experience to me, and I'm glad I got to try out something new. I definitely have learned a lot these past few weeks, and now I have a clear image of the flow of the website works. Despite this module not being directly relevant to what specialization I'm currently studying, I' still glad that I got to try out new software and play around with it.
As this was meant to be an exercise for us, there was no need for us to conduct interview with people yet, and therefore the user persona that we created are all fictional.
User Personas that we did
To summarize everything, this is what we've learned:
- identify the features, functionality and content to develop for an intranet or website release, ensuring that value is delivered to users from day one of the release
- determine whether one user interface will meet the goals of all users, or whether there needs to be two or more user interfaces developed
- communicate to senior executives the vision for the new intranet or website and how it will meet the needs of the staff or customer base
- make design decision about how a piece of functionality will work or about the creative design of the web solution
- guide the content development so that content supports the goals of the users and answers their common questions
- focus additional user analysis activities, such as task analysis
- guide an expert usability review of the existing intranet or website
- develop scenarios for usability testing
- contribute to the marketing efforts for the intranet or website
Week 4
For this weeks lecture, we were presented about the topic "Focus Group" from our classmates.
Presentation about Focus Group
From the presentation, we learned that focus groups are done before taking the product into development, so that designers and developers are able to identify the user's expectations and feedback for the product. This helps to prevent the product from having a lot of issues when it gets launched to the market.
Week 5
Initially we were supposed to have our presentation to ESPL company this week, however due to the public holiday, the presentation was then postponed to week 6.
Week 6
This week is my team's turn to present the lecture topic "Heuristic Evaluation".
When I heard about the topic, I have absolutely no clue about what Heuristic Evaluation is, however upon further research and study, I found out that Heuristic Evaluation is also a type of method to analyse and evaluate a website or product. Despite it being similar to conducting user testing, there are significant differences between the two.
Presentation about Heuristic Evaluation
Week 7
For this weeks lecture, we were presented about the topic "Card Sorting for Better Information Architecture"
Project
To start off the project, we first have to understand and get to know about the company. We first visited their website and have an overview of the entire website.
Below are some screenshots of the website:
Fig 1.0 Homepage of the website
Fig 1.1 Passport page
Fig 1.2 Team Finder page
For the full website, click here.
From looking at the website, me and my teammates were able to identify a few issues that we see from the website. However, to avoid ourselves being judgmental and biased, we did some surveys and interview towards the website.
As we were given the choice to choose what we wanted to work on before, my team decided to focus on their passport page. As such, our design of the questions for the survey and interview are based on the section that we planned to focus on.
The design of questions of the survey is as follow:
Fig 1.3 Survey questions
After we gotten approval for the survey questions, we proceed to distribute them and conduct interviews on several people as well.
In total, we've gotten 44 responses for the survey, and from there we analyse the data and identify some of the common complaints that participants have towards the website. With the gathered information and data, we proceed to work on a user journey map to identify the main issues of the website.
Fig 1.4 User Journey Map for ESPL website
With the user journey map, we were able to clearly see the gain and pain points of the website. Now with the main problems identified, we were able to proceed to propose our solutions to the clients. We compiled all the data and put it in our presentation proposal.
Presentation proposal slides to the clients
Overall, our feedback for the presentation was fine, except for some parts that could've been explained more clearly. We were also advised to include our user persona into the presentation slides to make it look more complete. We were also told that the main problems of the slides does not relate to the result of the research, but the good thing is that we have the pain points stated clearly in the presentation.
With the feedback we've gotten from the presentation, we started to work on the prototype for the website.
We started off with creating a new user journey map for the website, as well as a flow chart. We decided to keep things simple and allow users to have more access to the website as the previous ones had a lot of restrictions to non-registered users of the website.
Fig 1.5 Proposed user journey map
Fig 1.6 Flow chart for the website
After we've gotten approval and feedback from the lecturers, we then proceed to work on the wireframe for the website.
We decided to sketch out the wireframe for the website before we started on the low fidelity prototype.
Sketches for the wireframes
After the sketch is done, we proceed to work on the low fidelity prototype. We used Adobe XD to create our prototype. The software itself wasn't really hard to learn and I manage to get the hang of it pretty quickly. The down side for it however, is that the software can only be used for one person at a time, this meant that we have to take turns in opening the file.
Despite the challenges, we still manage to come up with the prototype for the website. In the process of creating the prototype however, we realize that we needed to create more pages for the website to better showcase what we proposed before. Therefore, we also started to focus on creating other pages as well.
Below are some screenshots of the prototype:
Fig 2.0 Homepage prototype
Fig 2.1 Passport page prototype
Fig 2.2 Community page
Here is the link to the full prototype.
After we got done with the low fidelity prototype, we proceed to conduct user testing with the prototype that we have. Below is the user testing results that we get:
Fig 2.3 User testing data
From there, we simplify and concluded the feedback that we have.
Fig 2.4 Concluded data
With the data and feedback gathered, we got approval to proceed with the high fidelity prototype. Mr Razif and Mr. Shamsul also gave us feedbacks on where we can improve on.
Fig 2.5 Woking in Adobe XD
Our high fidelity prototype can be found here.
While creating the high fidelity prototype, we also got a few feedback from the lecturers. They ask us to make sure the color theme stays consistent, and they also urge us to not use pill-shaped buttons for the whole website as a lot of other groups are doing similar concept.
With the high fidelity finally done, we also conducted user testing for the prototype too.
Fig 3.0 User Testing Data
Fig 3.1 Concluded data
We made more amendments based on the feedback we received, and after the amendments are done, we are finally ready for the presentation to the clients.
Final presentation slides
Reflection
Week 1
Learning about UX Design is kind of new to me as I have no experience in doing UX Design previously. I got a bit nervous when I found out that we're collaborating with a company to work on the projects. I hope I'll do well and will be able to learn more about UX Design this semester.
Week 2
Learning about individual interview reminds me of how important it is to listen and understand users experiences to create better design. Most of the time, I tend to design base on my perspective as a designer, but it is also important to also understand the users perspective in order to create a better and more satisfying designs.
Week 3
I was confused about the purpose of having user persona at first, as I thought it was weird having to create a fictional representation of my target customer. However it made more sense after Mr. Shamsul explained further about user persona as one of the reason is to ensure the opinions are unbiased. It was definitely eye opening to me learning about user persona.
Week 4
I realize that focus group helps developers and designers to identify the problems that occur to them, and its fascinating to me that people might see things differently than designers do.
Week 5
No class due to public holiday this week.
Week 6
I felt pretty nervous when presenting our proposal to the client as we weren't sure if they liked it or not. After the presentation we did get our feedbacks on where we can improve on, and I hope we won't make the same mistakes twice based on the feedback we received.
Week 7
I'm quite excited as we can start executing our proposal and make it come true. I learned a lot about the symbols that people commonly use in the industry, and working on the flowchart of the website also made me notice a lot of details that we may have missed before.
Week 8 - 13
The process of creating the prototype in XD fascinates me as there are a lot of features and settings that we can play with to make it look like a real website. I had a lot of fun creating the intractable buttons and seeing the website slowly coming to life. I was quite nervous when conducting user testing for the first time, but I slowly got used to it and in the end I wasn't as nervous anymore. I'm glad I got the chance to try out something new.
Week 14
It was really satisfying seeing the prototype fully done. It was a new experience to me, and I'm glad I got to try out something new. I definitely have learned a lot these past few weeks, and now I have a clear image of the flow of the website works. Despite this module not being directly relevant to what specialization I'm currently studying, I' still glad that I got to try out new software and play around with it.
Comments
Post a Comment