Minor Project - Projects



27.8.20 - 4.12.20 (Week 1 - Week 15)
Abigail Bea Chong Ka Yee (0333966)
Minor Project
Projects


LECTURES

Lecture 1: Introduction to Minor Project
27.8.20 | Week 1

For the first week of class, we were introduced to what to expect, what projects we were going to have, and who we would be collaborating with. Mr Mike presented the 5 projects that we would be working on and gave a brief explanation of how we have to come out with creative solutions to solve the difficulties faced in each of the given projects. The project will be in cooperation with business school students and computing school students. 

My group members are Gordon, Jess, Joe, Kar Yan, Xuan, and myself. We would be taking the LPG ordering system project. 

Lecture 2: Tutorial about Miro and Lecture about Design Thinking 
3.9.20 | Week 2

Our class was taught online using Microsoft teams today. Mr Mike gave us an overview of how to use Miro for our group discussions and what tools Miro had to offer. Miro is an online collaborative whiteboarding platform that allows teams to work efficiently together. It has mindmaps, sticky notes, templates, and many more to get us into brainstorming ideas. After that Mr Mike presented what is design/design thinking all about. I learned that our first stage would be to empathise with our customers, to understand their difficulties, and come up with a problem.  

The following week from week 3 consists of consultations or presentations.



INSTRUCTIONS




PROJECTS

Selecting a project and group members | Week 1 | 27.8.20

After the presentations from Mr Mike and Mr Edwin, we proceeded to select our group members with one project in mind. My group Gordon, Jess, Joe, Kar Yan, and Xuan chose to work on the LPG ordering system. We also got to hear from the business school students and computing school students about their ideas and solutions for each project during the Microsoft teams online session with Mr Edwin. However, we have not discussed it with the other schools only between ourselves.

Here is a presentation of the projects and collaborators we'll be working with:



Researching more about our topic | Week 2 | 3.9.20

Before the next class, my group and I dwell on researching more about LPG Gas. We came out with simple questions to ask ourselves to understand more about the topic. After writing down the questions we went to look for gas ordering systems and existing websites that had to do with selling and purchasing gas. Then we picked which system and websites to do. I've embedded the google docs file that contains what we searched about below along with the individual documents assigned to each of us. 



After Mr Mike gave us a tutorial on how to use Miro we had to create a board and add everyone in including Mr Mike. A screenshot of the board below:

Fig 2.1 Screenshot of Miro of our team's progress so far


Consultation with Mr Mike #1 | Week 3 | 10.9.20

We had our first consultation with Mr Mike today. He went through our google document and miro board to check our progress so far. Here what we gathered from the feedback:

Fig 3.1 Week 3 Feedback from Mr Mike

Our team met up again as an internal meeting to create questions for consumers, the gas delivery man, and suppliers based on the given feedback in Fig 3.1. We made a questionnaire using Google Form and face to face interview questions (in English and Mandarin) for our 3 personas in our google document proposal. The questionnaires were given out using social media such as Whatsapp and Instagram and through word of mouth.     

 
 

Consultation with Mr Mike #2 | Week 4 | 17.9.20

We showed a summary of what we did in week 3 to Mr Mike and he was surprised by the number of respondents as we got 100+ participants within 2 days from several different states around Malaysia. Our next part was to complete face to face or phone call interviews with the delivery man and business/ store owners which would be our next target audience. Mr Mike also reminded us to work on the problem statement in the document soon before we get even busier.    

Later in the week, we had two separate meetings with the Business team and IT team to better grasp their understanding of the project. All of the teams went through and discussed what we did for our individual team projects and shared each of the team's progress in our Miro board.

Fig 4.1 Week 4 progress of the Business team and IT team


Consultation with Mr Mike #3 | Week 5 | 24.9.20

Our goal was to get at least 3 delivery men to participate in our interview (shown in figure 5.1) and we did that by calling 10 different phone numbers. We also interviewed 2 grocery store owners (shown in figure 5.2 and 5.3). 

Figure 5.1 Delivery Man interview responses

Figure 5.2 Grocery Store Owner interview responses #1

Figure 5.3 Grocery Store Owner interview responses #2

We then summarised our data findings into mindmaps and presented them to Mr Mike during our consultation slot. The conversation talked about how there should be packages as an option for consumers to help deduct a few costs whilst helping businesses to increase their income and customer loyalty. On the other hand, we went over the different possibilities of using an LPG indicator and how a subscription package wouldn't work in our case as some of the orders aren't predictable.  

Figure 5.4 Summary of all the data from the interviews.

After our consultation session, Mr Mike reminded us to complete our LPG project google document as the faster we finish that the sooner we can work on coming up with solutions for the next step. The POV problem statements for LPG deliver personas were confirmed before class ended. 

Alignment meeting with IT team and Emergency meeting with Dr Edwin | Week 5 | 29.9.20

Our team and the IT team had an alignment meeting today to talk about the main features of the website which is the admin panel and the two apps. We came to terms that both teams were confused about the admin panel. 

A day after the discussion, both teams had an emergency meeting with Dr Edwin to clarify the back-end logic of the computing side. After the meeting, our team and the IT team were satisfied with the outcome as the progression we made was going well.  

Consultation with Mr Mike #4 | Week 6 | 1.10.20

We're almost reaching the middle of the semester and our proposal is a few steps away from being completed. During our consultation with Mr Mike, he noticed that we were missing the user journey map of the LPG process in both the app and website. We also spoke about the following step which is to come up with the brand identity and concept, work on the UI/UX process, and refine 'how might we' in the google document of the LPG project.

Fig 6.1 Our week 6 progress

Alignment meeting with the whole team + lecturers | Week 7 | 8.10.20

We showed our progress and what we have found from the questionnaire and interviews (week 4 to week 6) with Dr Edwin and he was pleased by the amount of information our team collected. The other teams showed their own progress on their side to see if we could proceed to the following pre-production stage. When the meeting ended I was glad that all of the teams were on the right path as we could move on to the UI design stage for the LPG project along with the branding phase. 

After the successful alignment, our team met a few times this week to complete several tasks. One of the main issues we faced was the user journey flow due to both traditional and digital methods of payment. We then showed the IT team the user flow (shown in figure 7.1) which they understood and we could proceed with the sitemap. 

Fig 7.1 User Journey Flow for delivery person and customer

Aside from that, we spilt up the team into two groups which were branding and UI/UX. And came up with a project timeline to manage our given tasks.

Fig 7.2 Project Timeline

We discussed the first draft of branding strategy for our LPG brand and planned to meet up to finalised the brand name and to refine some of the topics when needed. 

Fig 7.3 Branding (1st Attempt)

Furthermore, each of us gathered several references based on existing LPG delivery UI system and other applications to grasp the differences in the types of user interfaces. From our research conducted, we wanted to give the users a direct, user-friendly and helpful interface (legible typeface, direct language, good organisation of information and CTA) as contrast to the newer generations our target audience are not as tech-savy (shown in figure 7.4). 

Fig 7.4 References for UI/UX

Flowchart/Sitemap, Branding and UI/UX  | Week 8 - Week 9 | 15.10.20 - 22.10.20

Within the two week time period, we made a lot of progress on the branding and UI/UX side of the project. In figure 8.1 for the branding side we noticed that the interface was not as user-friendly like we intended it to be (in figure 7.4) so we commends a further research on our target audience and what the key features that we should follow when designing for them. The sub-group in charge of the branding side (Gordon, Kar Yan and Qian Hui) carried out a further research on the logo design references to have better rationale. 

Fig 8.1 Branding (2nd Attempt)

The logo of our LPG brand was finalised as a mascot because we felt like it suits with the name and brand identity. Thus, not many gas brands in Malaysia has a mascot based brand. 

On the UX/UI side, Joe and I received the function list given from the IT team. However, it was confusing because of the logical language used as we needed to complete the flowchart and sitemap so we ran through the list to digest the features stated.  

Fig 8.2 Function List (version 2)

In figure 8.3 it shows the overview of how we broke down the list into small sections of the sitemap and flowchart for both customer and courier apps. We encountered an issue with the payment method (in figure 8.4) and decided to create a brainstorming section to ask the IT team about the specific feature.

Fig 8.3 Planning and Drafts (Customer & Courier)

Fig 8.4 Payment brainstorming

Feedback from Mr Mike:

Progression is on track and in control. The dependent sitemap and flowchart which is coming from the IT team is holding up the development temporarily. However, as flowcharts are organic the best version should suffice to progress on for wireframe and later the 1st draft UI design. Once the draft UI design is complete, proceed to testing with XD. The other areas are on the brand name, logo (mark and type), art direction elements; needs to be confirmed soon. 

Following with the feedback given, we then continued to work on refining our progress for the flowchart and sitemap. We developed three versions of the flowchart and sitemap to get a better insight on the user experience. Before moving on we had another meeting with the IT team to confirm the the flowchart and sitemap. 

Fig 9.1 Flowchart and Sitemap for Customer (version 1 - version 3)

We then broke down the previously researched articles on how to design for the elderly into mindmaps, to understand the rules we needed to appeal to when designing the UI and UX part. 

Fig 9.2 Mindmaps on Designing for elders

The branding group looked more into the rationale of the choice of logo and how it fits the brand product and target audiences. By now we have finalised the mascot which is a penguin and the name of the brand called Gas Up. 

Fig 9.3 Branding (logo rationale)

After the base of this project was established, we carried on to distribute job tasks and created three versions of the project timeline (Branding Process, UX and UX Micro Process) to ensure that we we're on track and everyone was given equal job scopes to do. 

Jobscopes:

Logo Design: Gordon (will help out with High fidelity design once the logo is done)
Courier App Design: Joe and Qian Hui
Website: Joe and Qian Hui
Customer App Design: Kar Yan and Abigail
Onboarding Illustrations: Wei Xuan

Joe will overlook the entire App UI/UX Design and Qian Hui will overlook the entire project 

Feedback from Mr Mike:

Our team is progressing well. We need to confirm why we chose the penguin as a mascot for our brand, discuss some of the functions and features proposed by the IT team and to start creating the wireframes in Figma so we can user test the application before week 12. 

App Design, Logo Design, and Illustrations | Week 10 - Week 12 | 29.10.20 - 12.11.20

Once the flowchart and sitemaps were completed we made a rough draft for customer and courier apps using the miro board to make sure the ideas and outlines were on the right track. Then we moved the rest of the wireframes into Figma to be completed. The customer app was easier to work with than the courier due to the nature of the process being direct to understand in terms of the function list.  

Fig 10.1 UI/UX Progress (Customer App)

Fig 10.2 UX Progress (Courier App)

As mentioned in the previous week, Kar Yan and I begin working on the low fidelity customer app. We created three versions to figure out the main process and features in the app as we were not familiar with certain functions. Our first version (in figure 10.3) of the wireframe was to understand the flow of the customer app. That entails the functions and features whether it is direct, makes sense or would it disturb the user experience.

We created wireframes for each function/page and listed out the pros and cons for the design, what to change from there.

Fig 10.3 Customer App (1st version)

Our second version (in figure 10.4) of the wireframes was intended to re-evaluate the features revised and given by the IT team. We removed the e-payment function and remain with cash on delivery (COD).

Fig 10.4 Customer App (2nd version)

Our third version  (in figure 10.5) of the wireframes was to redefine our intentions and refine the information hierarchy instead of chunking it into separate pages. The final elements and layouts were not confirmed yet. 

Fig 10.5 Customer App (3rd version)

Whenever Kar Yan and I were done, we would update the others in our group and they would help us by providing feedback. Any refinement we made would be implemented into the design and be reviewed again. To improved the design of the customer app our team members will constantly provided us with feedback. 

Fig 10.6 Customer App checking feedback (Process)

Going back to what we researched when designing for the elderly a few rules must be kept in mind when creating the wireframes. For example, text size should not be smaller than 12pt (ideally 16pt), buttons should be clear and direct, functions should not be hidden (swipe to see, scroll to see, etc should be avoided), the information should be kept on the one-page minimum and not chunked into more pages, and to limit the number of taps. 

For the logo design, we realised that the design might end up looking too cute and not very reliable and friendly, so we had a discussion and laid out a few rules that should be followed: the logo should be stable while showing movement and not as cute looking.

Fig 10.7 Sketches of the logo #1
Fig 10.8 Sketches of the logo #2

Fig 10.9 Study about penguins

For the illustration side, we have agreed on a simple illustration style so that it is easy to look at and not overwhelming for our users. We also created the content for onboarding pages so Wei Xuan can draft the illustration based on the content provided.

Fig 10.10 Illustration Style we chose to go with

Fig 10.11 Onboarding content

Aside from that, we carried out the user testing this week when the low fidelity design was completed. 

Fig 10.12 Customer App (4th version)

In figure 11.1 it shows the scenarios used which were 5 in total and 11 participants for user testing. 

Fig 11.1 User Testing Results for Customer App

After receiving the user testing results for customer app, we summarised the problems that repeated or made the experience slow (in figure 11.2). Then we started to work on the high fidelity design.

Fig 11.2 Problems Identified Summary

The logo design was confirmed so Gordon helped us out with the customer app's high fidelity design.

Fig 11.3 Final Logo Design

Wei Xuan is also progressing on the onboarding illustrations with sketches and drafts. 

Fig 11.4 Onboarding illustration sketches and draft

After we have discussed and updated each other on our progress, we have also provided feedback for our designs and continue to refine and work on them. 

Throughout the week, Joe kept close contact with the IT team to ensure the designs were in line with the functions and confirmed by them as well. We have also had discussions on some features that we would like to add in and to ask whether the addition is alright with the IT team.

Joe and Qian Hui also guided and provided feedback for the customer app design to ensure that the designs are consistent and rationalised, also whenever we add a design, layout, button it should be approved and confirmed with the IT team before progressing. 

Feedback from Mr Mike:

Shown good progression. Logo design has been confirmed and the brand identity is done. The user testing results are gathered and will now proceed to complete the illustrations of characters and final UI Designs. The production is on time and the last component would be the marketing and promotion collaterals.

For the twelfth week, we finalised our high fidelity design and sent it to the IT team for a final run-through and checkup. The courier app, customer app, and admin panel were then refined according to feedback and are ready for submission. The assets such as images and SVG icons were exported as well and compiled in google drive for the IT team. 

Fig 12.1 Final Design for Customer App

Fig 12.2 Final Design for Courier/Driver App

Fig 12.3 Final Design for Admin Panel (website)

We also contacted the business team about their progression and what were the marketing and promotional collaterals that are needed. They requested for newspaper, brochure, and social media advertisement design. Kar Yan worked on the newspaper design, Qian Hui worked on the brochure design while Gordon worked on the social media design.

Fig 12.4 Mock-Ups of newspaper, brochure, and social media

Kar Yan also did further research on marketing on the app mainly focused on how to market to our target consumers.

Fig 12.5 Marketing and Advertising Strategy

Final Slides - Proposal and Progression | Week 13 - Week 15 | 19.11.20 - 3.12.20

For our final push, we had to create two presentation slides that would be used to compile all our work. Gordon made rough templates for the slides, and we followed the theme. 

I was tasked to work on the UI slides for both applications because I was involved in the process and could explain more about what happened. 

Link to Miro Board:

Google Document of LPG Project:


Proposal Slides:

 
  
Final Presentation Slides:
 


REFLECTION 

Week 2

D – Describe objectively what happened

I had to search about the existing gas ordering websites available in Malaysia. I chose to analyse two websites called Gas Malaysia and Miragas. Through these websites, I learned that to purchase gas people would have to call by phone instead of buying the gas through the website.

I – Interpret the events

I browsed through the websites to have a better understanding of what the gas ordering system is like in Malaysia.

E – Evaluate what you learned

This is useful as I had no idea how people actually bought gas besides calling through phone numbers or gas lorries passing by my house. It also helps me think about the next potential step to do in this project. 

P – Plan how this learning will be applied

I would be more aware of how the gas ordering system works and the methods used to purchase gas.

Week 3

D – Describe objectively what happened

Based on what we had analysed last week, my group and I decided to list down a couple of questions to ask consumers who use LPG gas. After consultation with Mr Mike, we jotted down things to find out or study further, what to ask in a questionnaire, and things to consider about. I noticed that we were heading in the right direction but we just have to be confident and respectful in asking questions to gather the correct data.

I – Interpret the events

We did this in order to grasp how consumers play a role in the gas ordering system. 
 
E – Evaluate what you learned

In order to develop a system to help consumers, we need to know about their behaviours using a questionnaire. 

P – Plan how this learning will be applied

I can apply this to future questionnaires that I may carry out in other projects.

Week 4

D – Describe objectively what happened

I helped my team set the questions in the questionnaire and collect gas delivery people’s phone numbers from my family members and flyers.

I – Interpret the events

I did this activity to finalise how the questions were asked in the questionnaire and to collect as many phone numbers I could find as the more people we find the more data we can examine.

E – Evaluate what you learned

The questions in the questionnaire can help us answer the next stage of the proposal and make the consumers understand the questions properly without having to think twice. The 10 gas delivery numbers I collected may have a higher chance of more people participating in the interview. 

P – Plan how this learning will be applied

When preparing questions, always review them back for any spelling mistakes or weird sentences.

Week 5

D – Describe objectively what happened

My team and I analysed the questionnaire results and interview responses. We were really thankful for getting 167 responses on our survey and the three delivery gas drivers who took their time to answer our lengthy questions. 

I – Interpret the events

We did this activity to collect data with the intention of discovering useful information about the consumers and gas delivery people. 

E – Evaluate what you learned

It is useful to us as we need current and relevant statistics to develop an LPG delivery app prototype for both consumers and delivery people together with a database server.

P – Plan how this learning will be applied

This can help me find ways to gather and analyse data for future projects.

Week 6

D – Describe objectively what happened

For this week, we focused on refining the “how might we” questions & solutions and started on the user journey/flow. 

I – Interpret the events

This activity was to figure out the challenges we may face and how to control them. It can help us in a few different sections in the google document of the LPG project.
 
E – Evaluate what you learned

I’m not the kind of person to think in a business mindset so it was a good opportunity for me to explore the challenges and barriers we might face as a team. 

P – Plan how this learning will be applied

I can have a better appreciation of the business point of view.

Week 7

D – Describe objectively what happened

We did a simple user journey flow for both apps (consumer and courier) and chose design references for the app in terms of colour, shapes, fonts, etc.

I – Interpret the events

We did the user journey flow from a user’s point of view instead of looking at the function list from the IT team as it is about the user experience and not how many functions can fit in the app. The other activity was to figure out what colours were suitable, what typeface was friendly, and the layout of the app. 
 
E – Evaluate what you learned

As designers when creating an application we would always think of the user and their experience when using the app. We did this to choose our primary colours, typeface so it’ll be easier when designing the lo-fi and high-fi wireframes. I took note of the different varieties our group referenced off, it felt different yet similar. In the end, we agreed on a few designs that served our target audience. 

P – Plan how this learning will be applied

I can apply this when creating other applications or websites. There must be a reason why we choose a certain typeface, colour, or shape. Designing for elders is an interesting topic that I would like to look more into in the future. 

Week 8

D – Describe objectively what happened

It was a busy week as we only had 4 weeks to complete 30% of the consumer and courier app along with the admin panel (website). We started by analysing and comparing the IT team’s list of features for the consumer app by breaking it down into a user flow. 

I – Interpret the events

It was a little tricky to understand some of the terms used in the list but we kept on creating more versions of the flow.
 
E – Evaluate what you learned

To get a clear idea of the user flow/experience.

P – Plan how this learning will be applied

When working with another team make sure to clarify what they mean specifically instead of trying to figure out the required features.

Week 9

D – Describe objectively what happened

We sped up the process by dividing into groups of 2 (3 or 2 people in one group) instead of working in a pair for both applications. We researched the articles from week 8 about designing for elders and made a mindmap of the key features and similar statements to look for. After that, I was paired up with Kar Yan to create a low fidelity customer app. We went through another round of the features given by the IT team and made three versions of the user journey flow chart, each version helps us simplify the user experience.

I – Interpret the events

We split into different groups to achieve the deadline set in the earlier weeks to complete at least 30% of the prototype for both apps and admin panel (website). As for the articles, it was to help us refresh our mind before designing the low fidelity customer app. Apart from that, we went through the function list and created three versions of the user journey flow chart to clarify what was missing and what we already had.
 
E – Evaluate what you learned

It is good to have a rationale when deciding what colour should a button be, how big or small is the button? Or where the placement on the page would it go?

P – Plan how this learning will be applied

I can apply this whenever I’m thinking of different ways to make it easier for the user to use an application.

Week 10

D – Describe objectively what happened

Kar Yan and I continued to work on the low fidelity customer app wireframes. It was getting really close to the deadline (week 12) and both of us were still stuck on small details. We created pages for almost every single action a user can do for user testing. We went back and forth between each of the pages speculating what to change and keep. Besides that, we asked and were given feedback from our group members on elements that we forgot or should change.

I – Interpret the events

Based on our previous research, elders like information to be on one page instead of chunked into 2 or more pages. We made that mistake when designing some of the steps in the user flow as we were following our own user experience and not aligning with the IT team.

E – Evaluate what you learned

I had learned that producing a functional app is difficult and we have to always trace back and ask ourselves “what is the rationale for this?”. Aside from that, when a specific component we have been working on for a long time doesn’t get chosen to user test, I had come to terms that this will always happen and I have to deal with it as it’s a part of the process.

P – Plan how this learning will be applied

Changing and creating many types of elements will help our process in the future because it gives us many opportunities to explore a variety of outlines. 

Week 11

D – Describe objectively what happened

When our low fidelity customer app was complete, we began user testing right away. I tested the app on my family members, interviewed them, and took videos so I could recall what I might have missed. Then I wrote the tested result and problems the users had faced on the Miro board. After user testing, I helped Joe and Qian Hui with the high fidelity courier app. 

I – Interpret the events

User testing went well. There were only a few issues that were linking between different pages as we planned around 6 different tasks for the users to carry out. 

E – Evaluate what you learned

One of the tasks I remembered said ‘after you have purchased the gas you want to track your order’, the user that I tested clicked on the account first instead of the home page where the track your order button was shown. I noticed that this is because other apps like Lazada or MySale let the user check their order status under the account page.

P – Plan how this learning will be applied

User testing is necessary as it helps us understand what to cater to the users and how they interact with our product. 

Week 12

D – Describe objectively what happened

Within the past few days, our team has been grinding and working non-stop to deliver 2 high fidelity apps and an admin panel website to both the IT team. I’m proud to say that we completed what we could manage within the timeframe given. I helped Gordon and Kar Yan with the high fidelity customer app alongside helping Joe and Qian Hui with the high fidelity courier app.

I – Interpret the events

I found that the courier app was trickier than the customer as there were functions that were not straightforward. Besides that, the colour used in the courier app had to be a flat design instead of a gradient because the driver who delivers gas needs to use the app every day. It was also tedious to rearrange the alignment for the customer app and change the colour palette to fit with the courier app.

E – Evaluate what you learned

It was fascinating to see how different the designs were for the customer app and courier app. It helped me understand the two points of view and how they connected. 

P – Plan how this learning will be applied

Two apps with different target audiences can have similar colour tones. 

Week 13

D – Describe objectively what happened

We were almost done with the applications just a little bit of touching/fixing up here and there.

I – Interpret the events

To present the final outcome of the application satisfactorily.

E – Evaluate what you learned
-

P – Plan how this learning will be applied
-

Week 14

D – Describe objectively what happened

As we moved closer to the upcoming submission for the entire project, we made final presentation slides and worked on the missing parts left in the main google document. I was tasked to complete the different versions of the wireframing stages of the customer app and courier app.    

I – Interpret the events

One more final push till we can submit all our work. I'm very glad and fortunate to have such a great team working by my side. All of us been through a lot from this module.

E – Evaluate what you learned

Teamwork makes the dream work. Communication between all teams is also important along with time management. 

P – Plan how this learning will be applied

In the future choose people you can work with not just because they're your friends.

Comments

Popular Posts