INSTRUCTIONS
AKPK Proposal Brief
AKPK UI/UX Development Timeline
AKPK Brand Visual (existing website)
LECTURES
Week 1 | August 27th, 2020
We had a quick introductory session with the UX Design module today. Mr, Asrizal briefed the class through the incoming tasks leading up to the final project. Our final project would be a collaboration project with AKPK where the logo, branding, and corporate guidelines will be provided by the agency. We chose our group members to work with throughout the entire module and head over to our first task right after the brief session.
Week 2 | September 10th, 2020
The session started off with a final project client briefing with the AKPK representatives, Mr. Allen and Mr. Rafeq. Our task was to redesign the AKPK official website as the current one doesn’t meet the standards of good UX uses such as the mobile-first design, responsiveness, and web usability.
Mr. Allen and Mr. Rafeq advised us to begin by understanding the target audience and ask questions such as “why do these individual need to use this?” since the majority of the younger people are not aware of these things. We were also advised to prioritize mobile-first design in the beginning process of redesigning the website to not only show responsiveness to the website content, but to create a new look that would best suit smaller devices.
These are the first few steps
- What kind of issues do they have?
- What kind of improvement is needed?
Before the session ended, Mr. Allen reminded us that our tasks as a designer includes the following:
- UX research
- Ideation
- User journey map
- UI design
- Micro animations
- User testing
*From week 3 onwards, the sessions were consultation-based with the AKPK project
EXERCISES
Exercise 1 | August 24th, 2020
Our first task for the UX Design module was to present a UX-related topic, which was given to us by Mr. Asrizal. I paired up with Qian Hui and presented the following slides about Usability Testing.
PROJECTS
Week 2 Progress
We met up the first time to discuss the beginning of our AKPK project. A rough flow guide and project timeline was first made according to the guidance given by Mr. Allen for both of us to understand the overall scope of the project (see figure 2.1). Once the flow was understood between our discussion, we set a date together to study the company background of AKPK and work on the website analysis for AKPK and its possible competitors. Before ending, we both collected a few website links for the ease of the upcoming session.
Figure 2.1. Rough flow guide and AKPK project timeline.
Week 3 Progress
As set from the previous week, Qian Hui (Jess) and I had a long session to analyze the AKPK website and a few other competitors together. We both weren't content with what we saw from the AKPK website, so we set aside the time to study the features and did visual analysis from its competitors in order to understand the pros and cons of each website. The following screenshots are the compilation of the website analysis.
- Figure 3.1 - 3.3: AKPK website
- Figure 3.4: YES Advisers website
- Figure 3.5: Maybank Premier Wealth website
Figure 3.1. AKPK homepage analysis (section 1).
Figure 3.2. AKPK homepage analysis (section 2-7).
Figure 3.2. AKPK four life stages page analysis and navigation menu.
We proceeded to study its first few local and international competitors based on the links we found in the following photos (Figure 3.4 for Yes Advisors; Figure 3.5 for Maybank Premier Wealth).
As set from the previous week, Qian Hui (Jess) and I had a long session to analyze the AKPK website and a few other competitors together. We both weren't content with what we saw from the AKPK website, so we set aside the time to study the features and did visual analysis from its competitors in order to understand the pros and cons of each website. The following screenshots are the compilation of the website analysis.
- Figure 3.1 - 3.3: AKPK website
- Figure 3.4: YES Advisers website
- Figure 3.5: Maybank Premier Wealth website
Figure 3.4. Yes Advisers web visual analysis.
Figure 3.5. Maybank Premier Wealth web visual analysis.
Week 3 Presentation | September 10th, 2020
We then presented the information we've gathered in our first presentation with Mr. Razif and Mr. Allen. We first talked about AKPK mission, visions as written on their websites, and followed up with the website feature and visual analysis from AKPK's website and its competitors.
Week 4 Consultation | September 17th, 2020
The revenue of consultation today took place at the Codelab where Mr. Allen's workplace is based in for this project. We presented additional findings of the website analysis, this time with more feature and UX base references rather than the visuals. The details will be explained in the captions of each figures (figure 4.1 - 4.3). The presentation provided further insights into our rough decision on the visual direction of the website.
 |
| Figure 4.1. Creative Adviser website. This is one of our current favourite website as they provide a variety of services (much more than AKPK) and yet their content information is nicely arranged and categorised in a professional way. Adequate white space, and well chosen visual that appeals to youngster with color palette mature to the elder audiences (in simple words, not boring to look at). |
 |
| Figure 4.2. Help Scout website. A service based website packed with features that is extremely insightful to our side. The homepage made it real clear that they help people with particular services labelled. A video is also shown for people who tends to not like to read (although users don't how long the video might waste their time). The CTA is clear, "start the trial" for the service we have mentioned if you're interested. The website is comparatively clean and looks modern visual-wise. Although as simple as it is, the website is packed with text and less visual, or impactful images. |
 |
| Figure 4.3. Vistica website. Strong and stable first impression shown in the colors and the hero image. The clear contrast of the text makes the text legible, while the overall information hierarchy of the website is undoubtedly straight-forward. That's one of the strong points of the website, however, too direct straight-forward makes the website a little boring in terms of visual as agreed by Mr. Allen. |
 |
| Figure 4.4. Featured references. |
Week 5 Progress
After finishing off all the background study, Mr. Allen told us to get into the data collection phase to first form the 4 user personas based on the four life stages presented in the AKPK website. These are the main target audience for us to empathise on to create a suitable website that is suitable for them. Jess and I first collected details necessary to create user personas. We based our information on the brief given to us, the main four life stages that AKPK offer their service to, and extra details from the Internet (see figure 5.1).
 |
| Figure 5.1. Info that helped us structure the user persona. |
From the blueprints and guidelines we collected, the first set of the 4 user personas was formed according to what our possible audience may feel. Despite being based on real personas, no information were present to back it up.
 |
| Figure 5.2. First draft of the user personas (assumptions). |
 |
| Figure 5.3. User journey draft. |
We then read through the different services provided by AKPK, and study the processes on their website. From such, we noted the paths required for the users to reach their destinations of the particular service.
Week 5 Consultation | September 24th, 2020
We presented our first draft of the four user personas and the user journey draft to Mr. Allen today. The feedback of the week wasn't too great as we were lacking real data to back up our information on the user personas. As a crucial step, Mr. Azrizal and Mr. Allen emphasised on the importance of having a fair and accurate user personas for us to refer to during the design stage. That aside, our team were tasked to spend more time collecting relevant data through a reliable medium such as an interview.
Week 6 Progress
It's a week full of data collection for both Jess and I. We first collaborated online to create our interview questions. We also prepared some of the interview in a written format, using Google Forms as the instrument to ensure that we can collect information from busy audiences who prefers to help out on their off or personal time. Additionally, we categorised the information and services from the original AKPK website into a more understandable menus (or at least more standard). The first draft of the new navigation menus was then made upon our discussion on the website (see figure 6.1).
 |
| Figure 6.1. First draft of the new main navigation menus. |
Week 6 Consultation | October 1st, 2020
We presented the information we've collected so far, along with our user personas and the first draft of the navigation menus. Both Mr. Allen and Mr. Asrizal are slowly agreeing to the user personas, but they still suggested both of us to collect more interviewees and information to build a more reliable user persona. Mr. Asrizal also told us to collect insights on the current AKPK website from our users as an additional step before proceeding to the design stage.
 |
| Figure 6.2. Final user personas (edit: touched up from week 7). |
As a post-meeting session, Jess and I communicated online to separate the remaining tasks to gather more info from our agreed target audience, while arranging another date to compile the information we've collected together in the Miro Board to present our findings in the most categorised and efficient way (see figure 7.2 in week 7 consultation).
Week 7 Consultation | October 8th, 2020
After compiling a huge amount of data into categories, we presented its compiled form in today's consultation (figure 7.2). The session took place quickly as the data collection process was approved by both of our project advisors, and we were to proceed to make decisions on what to do with the information collected.
 |
| Figure 7.1. Total interviewees count (19). |
 |
| Figure 7.2. Web Interview Information Compiled. |
Week 8 Progress
We first set up the project management and the overall tasks to understand our progress into the project and to work more efficiently (see figure 8.1).
 |
| Figure 8.1. Project management, goals, tasks. |
We then proceeded to tackle last week's progression on the main web interview compiled information (figure 7.2). Jess and I discussed through each problem and list out its possible solutions clearly to help us decide on what we want to use the information we gathered for (see figure 8.2).
 |
| Figure 8.2. Problems and Solutions we derived from the web interviews. |
After understanding the essence of the functions and solutions we want to provide for AKPK, we both spent hours browsing through different websites in which provides similar services. Many discoveries were made as some of which matches the researches that we put into, such as the website images, the short tagline, minimal/direct use of words, and the credibility in the first impression. The analysis were broken down into key points that targets their website image, tagline, and their CTA (figure 8.3).
 |
| Figure 8.3. Homepage reference and analysis. |
 |
| Figure 8.4. Homepage information brainstorming. |
 |
| Figure 8.5. Updated site navigation menus. |
 |
| Figure 8.6. Updated low-fidelity wireframe concept. |
Week 9 Consultation | October 22nd, 2020
The day went through smoothly as we presented our thorough findings in details to Mr. Asrizal and Mr. Allen. These were our week 8 progress (figure 8.1 - 8.6), counting from the solutions we found, to the information architecture and wireframe rationales that we found. Our UX process got approved at the end of the session as we are to proceed with the speed we're moving at. Mr. Allen also suggested for our team to look into the quiz feature and its belonging in this website.
Week 10 | Low fidelity wireframes
Week 11 | User Testing & Wireframes Refinement
After completing the first few version of the wireframes, we tested them with different groups of people we have previously interviewed from the first weeks. We also collected data from fresh eyes to gain their insights on the usability and layout of the current wireframes.
 |
| Figure 11.1. User testing compilation. |
The user testing results are then compiled into different categories and topics as the following:
 |
| Figure 11.2A. User testing results (negative feedback). |
 |
| Figure 11.2B. User testing results (negative feedback). |
 |
| Figure 11.2C. User testing results (negative feedback). |
 |
| Figure 11.2D. User testing results (negative feedback). |
 |
| Figure 11.2E. User testing results (negative feedback). |
 |
| Figure 11.3A. User testing results (positive feedback). |
 |
| Figure 11.3B. User testing results (positive feedback). |
 |
| Figure 11.3C. User testing results (positive feedback). |
 |
| Figure 11.3D. User testing results (positive feedback). |
Upon data collection and compilation, we started to implement to feedbacks into the current wireframes. Many changes were made as stated from the testing I've attached above, which includes the layout itself, the copywriting, the contents, the information categorisation, and a few sections that needed refinement.
Week 12-14 | High fidelity wireframes
In these final weeks, Jess and I distributed tasks to work separately as we have already completed everything else except the high-fidelity. One important meeting we had was to agree on a fixed spacing for both website and application, along with the color palette which we have extracted from the given design guideline, and the original AKPK branding itself.
We have compiled every part of our progress and final outcome in the final presentation slides below:
Comments
Post a Comment