Usability and Mobile Application II
1st April - 5th July 2019 (W1-W14)
Jaslyn Tjhai (0333039)
Usability and Mobile Application II
Mobile Application Proposal
◔ Week 1
April 1, 2019
On the first class, as usual, module outlines were briefed to the whole class. We were informed about the expectations from this module and balancing between the other modules. After the short brief and introduction, each of us consulted for our previous project to get feedback from Mr. Kannan regarding a few suggestions and things to consider. I was suggested a few other ideas that I can try to tweak in my project where I was asked to start by gathering and reviewing all the data that was collected last semester, consider thinking about trends as recommendations to further improve the experience of users, try to find a clearer focus on the USP. Since my idea is about food recommendation which is almost similar to TripAdvisor, Zomato, and other of the likes. I will try to redo my research on these platforms as well as some SWOT analysis.
I tried to redo the business model canvas for me to have a clearer idea so below is the updated one.
April 3, 2019
On the second class, we were asked to do user testing on our juniors as the one we did during the previous semester aren't exactly right. So we went to our juniors' class and each of us pair up to pick 2 juniors to test out our apps, while having our partner to record it for us.
From the data acquired, we started to analyze and organize them in realtimeboard.com for us to see how we should further improve our application. Below is what I get from the user testing.
So from the feedback gathered, my plan would be to redesign my application starting from the logo all the way to wireframing and changing of layouts. I'm also going to rethink about the features that the app will be able to offer for the customers. Basically a whole lot of restructuring and redesigning will need to be done. I actually did think about the new logo as well as color scheme for my app throughout the break as I wasn't really satisfied. Therefore, the direction that I decided to go for is attached below.
I also decided to change the name of the app to Makan instead of Makan Mana but before confirming everything, I will obviously also get some feedback from lecturers. But as seen from the new designs, those are the direction that I wanted to go for as well as a few choices of color schemes based on the color of food illustrations and food images that I found online as my inspirations. The reason I chose food is because that's basically the whole idea for the app and therefore using the colors of food, especially fruits, I was hoping it would make my app more vibrant and attractive, pleasing to the eye.
On the first class, as usual, module outlines were briefed to the whole class. We were informed about the expectations from this module and balancing between the other modules. After the short brief and introduction, each of us consulted for our previous project to get feedback from Mr. Kannan regarding a few suggestions and things to consider. I was suggested a few other ideas that I can try to tweak in my project where I was asked to start by gathering and reviewing all the data that was collected last semester, consider thinking about trends as recommendations to further improve the experience of users, try to find a clearer focus on the USP. Since my idea is about food recommendation which is almost similar to TripAdvisor, Zomato, and other of the likes. I will try to redo my research on these platforms as well as some SWOT analysis.
I tried to redo the business model canvas for me to have a clearer idea so below is the updated one.
 |
| Fig. 1.a Business Model Canvas |
April 3, 2019
On the second class, we were asked to do user testing on our juniors as the one we did during the previous semester aren't exactly right. So we went to our juniors' class and each of us pair up to pick 2 juniors to test out our apps, while having our partner to record it for us.
 |
| Fig. 1.b User 1 |
 |
| Fig. 1.c User 2 |
 |
| Fig. 1.d Customer Journey Map |
 |
| Fig. 1.e Redesigning of the logo |
 |
| Fig. 1.f Colorboard |
As for the art style and direction, I wanted to play around with lines and colors, taking this as reference.
 |
| Fig. 1.g Art style reference |
I also look through some transitions and animations as well as layouts that I wanted for my app, to guide me and inspire me along the way of redesigning everything.
LINKS
- SWOT Analysis
- User testing videos: User 1 & User 2
- Current XD File
◔ Week 2
April 8, 2019
Serif typefaces are considered more trustworthy - John Moore Williams, Head of Content Strategy at WebflowOne of the finding that I found while doing my research. So I consulted Mr. Kannan for my art direction, color choices and a few layouts where I was advised to try to look even deeper and list down what are the things that I really wanted to help the users. Mr. Kannan provided me with a lot of advice regarding the layouts where I just need to rethink, research, and plan it well as well as try it out because it's also all about trials and errors. As for my art direction, I was advised to try and go on with the direction that I wanted but also experiment in different ways so as it's not too much going on, seeing which fits best. For color itself, it would be great to look into millennial colors or current trending colors as my target audiences are university students. So yeah, to wrap it up, I'll be researching more on colors, typefaces, as well as layouts, preparing for my proposal.
 |
| Fig. 2.a. A few layout and colors that I managed to show |
◔ Week 4
23rd April 2019
Continuing from my previous progress, I tried to do more logos and testing colors here and there. Also, finally deciding on a color to use based on my research on colors that would attract millennial and that are currently on trend. With the research, I came up with this moodboard.
 |
| Fig. 2.b. Moodboard |
As for the logos, below are what I tried doing, and is still thinking on which logo to actually use.
 |
| Fig. 2.c Trying out logos |
◔ Week 5
29th April 2019
For class this week I started off by consulting Mr. Kannan on my progress so far. The main feedback that was given to me was, since I'm going for a funky kind of feel for my app, might as well just make everything look really different, like in a game. Mr. Kannan suggested Miracle Merchant for me to have a look and I loved it. He said that maybe I can use that as an inspiration where my app will look like a game but it's actually a food app, to make things more fun in a way. With that, I reworked my app's branding and direction again, using this moodboard as reference as well as this tone of colors as well.
 |
| Fig. 2.d. Updated Moodboard |
For this week I'll finish up the whole assets that will be needed for this updated version of my app and hopefully by next week, I'll be able to work around the layout and finish it ASAP.
◔ Week 6
6th May 2019
I managed to finish up my icons for my mobile application as well as the logo for it where I showed Mr. Kannan. He gave me a few other suggestions on what I can do to improve it and other than that I'm good to go.
 |
| Fig. 2.e. Logo to be finalzied |
 |
| Fig. 2.f. Icons to be used |
 |
| Fig. 2.g. Avatar icons for users |
I have yet created the asset for the layouts that I've planned which I will be doing this week.
◔ Week 7-9
For these weeks, I worked on the layout design for the pages of the application based on the previous art direction and concept that was finalized while also deciding on the colors that I plan to use for the pages.
 |
| Fig. 3.h. Layout design for the main pages |
 |
| Fig. 2.i. Layout design for the starting and sign up page |
 |
| Fig. 2.j. Layout design for the restaurant found page |
I also drew a few background for the main pages, however it doesn't really go well with the whole look so I decided to remove it instead.
 |
| Fig. 2.k. Layout design with background |
I managed to finish almost all the layout design for the pages that will be available for my application project.
 |
| Fig. 2.l. Layout design for most pages |
◔ Week 10
By this week, I was starting to get pretty uninspired from the art direction that I have for the app and started to dislike it. I wanted my application to have a more professional look despite it being similar to the current trend. The games-style that I worked on was pretty fun and different and I liked it but I just felt that it might not be the right art direction that I wanted to go for and therefore, I made up my mind to revert back to the concept before this design. That is the flat-looking design playing around with lines and more vibrant colors based on food colors.
I started to improvise and polish my design for this art direction to further finalize my design for the mobile application so I can start to work on the development as that would take up quite a lot of time as well.
 |
| Fig. 3.a. Final art direction, illustrative-style |
◔ Week 11
I was finishing up my layout designs and pages for my mobile app following the previous design as I left it hanging after switching to another design. Had almost all the pages previously so it was just a matter of reorganizing and adding a few more pages here and there to finalize it.
 |
| Fig. 3.b. Pages in Adobe XD |
 |
| Fig. 3.c. Prototype in Adobe XD |
Once that was completed, started to develop my mobile app.
◔ Week 12
This week onwards, I mainly focused on developing in Dreamweaver as there's not much time left. I was kind of confused on whether I should be creating a different HTML for each page or just use a single HTML consisting of all the pages. I was also deciding between creating an external CSS or an internal ones as I really wanted my files to be really organized and convenient where it will allow me to work efficiently.
So I ended up opting to create all my pages in a single HTML where the CSS will be linked internally as well.
The first file that I created was full of errors and it was pretty unorganized, making me confuse every time I was working on it. One of the errors was that the page would appear like this.
 |
| Fig. 3.d. First file error |
Another error would be the sizing and all the margins when it's previewed on a browser, which I did not manage to figure out why.
 |
| Fig. 3.e. First try error on browser |
I understood that the error would probably be in the CSS itself. However, I decided to start a new file instead.
The second file was more organized compared to the first one as I was starting to get the hang of it the developing. Though halfway through working on the first few pages, I notice that I didn't really fully utilise and explore what jQuery has to offer as I was super focused on simply creating the pages first. Nevertheless, here's a look of the arrangement of my files in Dreamweaver.
 |
| Fig. 3.f. Arrangements in Dreamweaver |
There were also still areas where things aren't perfectly aligned which I haven't fixed yet. So when I went to class, Mr. Razif told me one of the feature that jQuery has which can ease the development since they're much more efficient and convenient. Hence, I tried to go back to jQuery's website and look at what I can use from there.
 |
| Fig. 3.g. Error in alignment |
◔ Week 13
I decided to also create a third and final file for submission where I will be placing the CSS inside the head as most pages has the same style instead of repeating the CSS on each pages.
 |
| Fig. 3.h. Arrangement for final file |
I also watched tutorial on how to create a Google Maps for my app since the feature can be found in my app. However, once I managed to get it. My file suddenly ran into an error and so I decided to remove it and place it on another backup file in case things went wrong.
Another error that I faced was the inability to go to a linked page which I didn't manage to solve it except to try and refresh sometimes.
Overall, I managed to get all the important pages to work and linking it together. It was a lot of struggles as the moment you make some changes to one section of a CSS sometimes it affected other areas. I did manage to understand more on how to arrange and organize all the elements of my mobile app and doing it in a proper way.
LINKS TO FILES
Another error that I faced was the inability to go to a linked page which I didn't manage to solve it except to try and refresh sometimes.
 |
| Fig. 3.i. Linking error |
LINKS TO FILES
Exercises
◔ Week 4
24th April 2019
Mr. Razif guide us through Phone Gap as a recap as well as an introduction to jQuery Mobile. Throughout the class, we tried to view the jQuery HTML page from Dreamweaver to our phones using the Phone Gap application.
 |
| Fig. 4.a. Exercise |
 |
| Fig. 4.b. Preview on Mobile Phone Gap |
◔ Week 5
10th May 2019
We were asked to try and work on our opening page of our mobile app to let us get started in the development process.We also worked on the sign up/log in page.
 |
| Fig. 5.c. Developed sign up and log in pages |
Reflection
This module piques my interest since the very beginning as I am really interested to venture into programming for web and mobile application. Although deciding on a proper art direction and sticking with it while still being satisfied with my work is really something that I'm still struggling on. Hence, the last minute change in design for my app. There were a lot of things that interests me in terms of the programming using jQuery and also JavaScript, which I did not manage to venture into as these skills are very useful in the current status quo. Quite a shame that I did not manage to explore those section too much, JavaScript, especially, since time is also not enough. But I would've definitely enjoyed this module more if everything else were going well this semester and also my prioritization of my academics and personal issues.
Comments
Post a Comment