Usability & Mobile Applications II

5/29/18 Week 1-14
Kamal Afiq [0330643]
Usability & Mobility Applications II
Week 1

---

WK1 Original Information Hierarchy

1. Header
   1. Taylor's design school
   2. Programmes 
   3. Contact
2. About
3. Programmes
4. New Programmes
5. Watch our show reel
6. Happenings
   1. Image, button
   2. View more
7. Portfolios
   1. Bachelor of design in creative media
   2. Interior architecture
   3. Foundation in design
   4. Interactive multimedia design
   5. Graphic communication design
8. Social media
   1. Facebook share
   2. Twitter tweet

                                                                                                                                                                                                                                                

Revised Information Hierarchy

1. Header
   1. Taylor's design school logo
   2. Programmes 
   3. Contact
2. Show-reel (CTA)
3. Happenings
   1. Image, button
   2. View more
4. About
5. Portfolios (CTA)
   1. Bachelor of design in creative media
   2. Interior architecture
   3. Foundation in design
   4. Interactive multimedia design
   5. Graphic communication design
6. Social media
   1. Facebook share
   2. Twitter tweet

Target Audience

• Students looking to enroll into the design school at Taylor's (Primary)
• Parent's looking to find out more about the school. (Secondary)

User's goals

• Viewing student's work and past projects. (Primary)
• Finding out updates and news (Secondary)

---

WK2 Cat User Persona

At this stage, we were told to create various user personas, an exercise to help us better gauge and understand our target demographic and intended users. 

Name: Chia Xian Hui

Age: 22

Work: Student

Character: Introvert, shy, caring, conservative, hardworking

Goals: Completing university. Finding a job she can be happy with. Opening up her own business one day.

Motivations: Family. Work. 

Frustrations: Gets overworked easily. Stays at home alone, gets lonely, could use company.
Bio: A culinary student doing her degree in the city. Hardworking and dedicated, she finds herself studying and working at home a lot and sometimes feels lonely, she wants to get a pet to accompany her at home.

________________________

Name: Ahmad Shafique
Age: 30
Work: Accountant
Character: Extrovert, outgoing, laid-back, liberal, easy-going
Goals: Making money. Meeting new people and making new connections.  Getting a nice house.
Motivations: Finance. Socializing. Buying a nice house.

Frustrations: Gets bored when at home and not socializing. Could use a buddy at home to keep him company.

Bio: Working uptown. Social creature, likes to network and make new friends. Very ambitious person, but gets a lot of downtime at home. Bored easily when not out socializing, could use a pet to make the house more lively.

________________________

Name: Sharvind Shyamsunder
Age: 42
Work: Shop salesmen
Character: Extrovert, chatty, hard-working, conservative
Goals: Sending his kids off to school and college. Taking care of his house and pets.
Motivations: Family, work, cleanliness

Frustrations: Has cats at home, could use more the keep the place lively as his kids grow older and go off to school and college.

Bio: An old-fashioned salesman hailing from a village, now working in a suburb at a local electronics shop. Has lots of pets at home. His wife passed away a long time ago, and as his kids go off to school and college he wants to have more pets with him at home.

---

WK3 Business model canvas

For today's class, we were tasked with exploring the more businessy side of app design and to do that we learnt to use a business model canvas to structure our business plan and strategy for my mobile app.

We filled in each box using information related to our own app, in the hopes of creating a focused and concise plan. 

The key partners are essentially the people and stakeholders who will make the app happen. In my case since the app mainly deals in cat adoption and listing as well as selling products my key partners would be both cat owners and pet product businesses.

Key activities are the main functions of the app itself, for my app the main activities involve adoption, social networking and buying of cat-related products.

The key propositions are the main selling points of the app. From an objective standpoint my app is not the most unique, so I narrowed it down to being a one-stop shop for cats; one solely dedicated to felines.

The key resources are the people I need to carry out the project; the app itself would mainly entail a programmer, UX designer, designer and tester.

Customer relationships are the ways we can interact with the customers, and how frequently. Membership, promotions, customer support and e-mails are the main ways we would interact with the customers.

The channels are the way we reach the customers; the app would be found on most mobile marketplaces as a freemium app and would be spread online via social media.

Customer segments are the main demographic, seeing as my app is made for a younger audience I targeted 20-26 year old cat owners.

The cost structure is the various costs of the app's production and maintenance. Various setup costs for servers and accounts as well as for advertising and software are all crucial costs for my project.

Revenue streams are the main ways money will be made using the app. The main method is through sales cut percentage and membership fees, as well as partnerships and in-content advertising.

I've felt that learning the business model canvas is a great foundation for to start setting up a business; in our case an app and that it would allow us to concisely plan the key points and features of our app/business before we start actual conception and production.

At this stage, I began redeveloping my app's layout and design, further fleshing out the various pages and layouts, keeping in mind the new things I learnt. Here the concept is approaching something that is very similar to how the final app would work.

---

WK4 User Experience Testing

With the app's layout and interface overall done, I began doing some initial user testing on the app to see how it performed, from both a design and experience perspective.

I had them complete a myriad of different tasks within the app; adopting a cat, putting up a cat for adoption, searching for products, changing their profile, etc. Afterwards, I listed down their various comments and points of feedback in an app for later study and iteration of the app.

After receiving feedback, I summarized and collapsed the various issues and feedback they were having:

• Adoption information is confusing
• Listing information is not very clear
• Adoption page doesn't have clear direction
• Message button is confusing
• Signup and login screen is not clear
• Transaction process is missing some elements
• Adoption confirmation process is somewhat confusing

Taking all these things into consideration, I went abouts making amendments and changing both the processes, layouts and design of my app. I went abouts adding more confirmation and transaction pages, adding a shopping cart and editing the color and layout of certain pages. I also changed the font, because Gotham looked a bit too serious for a cat app.

---

WK5 Customer Journey Map

In this week's lecture and tutorial, we went through the paces of mapping out the journey and processes of the users as they use the app. The aim of this man is to understand the discrete processes the users go through, their experience and verbal feedback for the usability and experience of the app.

As seen below, three distinct customer journey maps were made for three different processes and tasks; adoption, posting for adoption and for products.

At this stage I continue reiterating upon my design, streamlining, simplifying and removing features to make the experience tighter and cleaner. However it's at this stage that I realized something off about the app itself.

---

WK6 Rework

Initially I set off this project by aiming to create an app that centered around cats; a one-stop shop for cats where you can adopt and post-up cats as well as buy various products and supplies for them. Initially I split the site into 3 main sections: adopt, post-up and products.

The adopt and post-up section would center around the cats, and when adoptions are carried out or posted up congratulatory text or feedback would be given, celebrating the event of an adoption. In essence this aspect of the app was quite emotional and intimate.

However when it comes to the products section, attention from the app immediately turns to that of commerce, with intimate design and feedback being replaced by commercial and business features like listings, bulk ordering and shopping cart.

I felt that the disparity between the two aspects of the site was quite jarring, as one half of it was intimate and emotional while the other was business and commercial. Furthermore the app was also very large in scope, with lots of different pages and sections that spread my attention thin. As such I came to the conclusion that I should scale down my project and narrow down my focus, to create a smaller and more focused user experience.

So now I have decided to reconstruct my app, focusing it more on charity and donation rather than commerce and purchasing. I would remove the product section of my app, thus taking out about 1/5th of all the pages I've made so far, and replace it with a donation section. The donation page would have a single pathway, to donate money to the cat organization, allowing the user to select their method of payment and frequency.

I'd also need to overhaul the design of the app, reworking various visual aspects such as the menus, main pages, content as so on.

---

WK7 Design Rework

Over this past week, I began overhauling the entirety of my app's design; reworking most of the visual elements and layouts of the app. While keeping the color palette the same as previously, I decided to tone down the overall colorfulness of the app and use less blacks and darker colors, so the app overall looks brighter and lighter. I think this fits in more with the soft-natured attitude of the app, as before this I tended to overuse color, flooding the screen with too many visual points for the user to focus on.

I ended up using light gray a lot more in this iteration. I also collected a large number of references and inspirations of other pet apps from sites such as pinterest and dribbble. I noticed that they used white space too great effect in their designs, their was less visual noise as more space was put in between various buttons and text boxes, and bold text was used less frequently.

I took my latest iteration, my 3rd, and redid every single page from scratch. I also made changes to the information hierarchy, such as on the adoption page only the cat name, breed, age and location visible on each Polaroid, so that the most relevant and information is visible first.

I decided that the top search bar in the main adoption page didn't have to be visible in every page, seeing as the user only needs to see it in the Adopt, Donate and Profile pages. I also made use of Google's Material Design icons to make my prototype app more detailed. Referring back to information hierarchy, important information is highlighted in bold black and orange, while the most important is colored pink. The rest of the information varies between light and dark grey.

---

WK8-14 App coding

Over these next few weeks, I have begun the process of coding the app within Dreamweaver proper, using both a combination of classical HTML, CSS and Jquery mobile. To start off I began by setting up Phonegap, connecting both the live code on dreamweaver and my phone together.

Then after finally setting up the basic site in Dreamweaver, I began by putting in all the text and content that would go on each page, for the time being I left the images out as they would come in later on in the project. After having done so I began to use CSS to blockout the layout of the app's pages using divs and containers to organize and layout my content accordingly.

I used a combination of buttons, open text fields and range sliders to block out all the various elements of my app. At this stage layout and placement of content was my focus.

For most content that spanned the width of the entire app like body text didn't require much CSS styling and layout. However for some parts like text fields for example that were short and had more than one field per line, I had to layout the content using various containers and divs.

The method I consistently use is defining a large, overall container that contains all the objects inside. Then I create containers for the individual text fields, buttons and labels as well. Then I give all of them placeholder background colors to tell them apart, and at this stage I can manipulate their position and size using margins, puddings and offsets.

Not only was this method used to position things like text fields and boxes, but also for headings and special areas of typeset information like the comment boxes and cat information. I used the same method as mentioned above, but instead of using divs and containers I instead targeted the text directly in CSS. Often I give them headings like h3 or h4; headings that match their overall size, all of which I would then stylize later.

Having done the layout and positioning of all the content in the app, I can then begin to style and personalize all the app elements using fonts and color. I chose Catamaran as the typeface for all my fonts. I chose it because of its simplicity, modern clean appearance and because it boasted a wide variety of different font weights and styles. I downloaded the font of Google fonts, and linked it in my .html file.

Initially I had issues getting the different font weights to work, but after understanding how the font weights are styled in CSS, and took note of the different weight numbers in the Google fonts site and used them accordingly in my CSS.

Alongside the fonts, I also used the color palette I had established beforehand to style the app as well. It was important that I did not diverge from the color palette, so to keep the personality and branding of the app consistent throughout.

Up until this point I had just been styling the text and colors of the app, but at this point I ran into a challenge I had yet to overcome. I had issues changing the colors of certain Jquery elements and buttons, but after consulting my lecturer, I had realized that these elements were already styled using the Jquery CSS that came with the other Jquery elements.

With this info in hand, I began to track down the various pre-styled elements of the app in the jquery theme stylesheet, and made overwriting changes in my own custom .CSS. This stage took a lot of trial and error, but for the most part I was successful with changing the appearance of the app elements that I wanted to.

 After having done the majority of the coding and styling, my focus turned to finishing the app's design. For the cat images and avatars, I replaced all the placeholder blocks and images with actual photos of cats and fake avatars. Instead of using <img> in the html, I instead created divs which I styled to contain a background-image instead; I believe this method gave me more flexibility in the size and appearance of the pictures I had. All the avatar pictures and even the brand logos were created this way as well.

The sidebar was a part of the app that took a lot of back and forth, initially because I had trouble getting it to function, and then later because styling the sidebar took a great more effort to pin down the pre-styled elements in the Jquery stylesheet. I also included a logout button and an avatar picture as well in the sidebar to finish it off.

Bug-fixing, tweaking certain design elements and testing on the phone marked the remainder of the app's development as I worked it to a state that I would be happy with.

The final major part of the app to be added in were the login, signup and splash screens, all of which are what the user is greeted with first when they open the app. 

To ensure that the splash screen appeared first, I brought its page up to the very top of the app's body so that it would load first. From there the user would proceed to navigate through these pages to reach the main section of the app which was the 'adopt' page.

This marked the end of the development of the app as final bug-fixing and tweaking was done to ensure the app was done to a satisfactory standard of quality and finish.

---