Usability & Mobile Application I Project

9 May 2018 - 27 June 2018 (Week 7 - Week 14)
Liam Yue Wei (0327686)
Usability and Mobile Application I
Interface Design

---

Instruction

The Brief

Students are required to continue functional/ workable prototype on proposed platforms using digital prototyping application. Students need to focus on seamless navigation, functional flow chart and visual aesthetics enhancement accordingly. 

Evaluation:

UI/ UX - Easy navigation with functional design application (must reach target audience needs)

Visual Aesthetics - Clear forms and design usage. Good choice of color palette. 

Story - Overall app flow and purpose of creating the application.

Functional Mockup Application on project platforms. 

Final Presentation

Assignment Content

1. Application Documentation (Containing: Information Management, Flow, Wireframes, and Design) 

2. PDF of the Design

3. Working files of the projects

4. The prototype of the design, submitted using a digital prototyping tools.

5. Presentation. 

---

Progress 

I had to change the idea for my mobile app as my previous idea which includes having both 'music and productivity' combining into one app is described to be weak concept. Therefore, I proceeded with an idea inspired by one of my lecturers, I was told to design an app with the thought of 'solving a problem'. And so, the idea of the new mobile app was about organizing photos/ images, videos and notes in a more organizing way. The name of the mobile app will be 'Schot'.

Process Flow Chart

Process Flow Chart fig.1

Wireframes 

Wireframe fig.1

Wireframe fig.2

Wireframe fig.3

Wireframe fig.4

Wireframe fig.5

Mood Board

Styles and Color Scheme

Possible Color Scheme fig.1

Possible Color Scheme fig.2

Font Choice

Roboto

I have chosen to do simple style for this mobile app as this kind of app should not be complicated and look confusing to the users. Some of the icons may be similar to minimalist style. And to make the mobile app look more clean, I have picked some color scheme and mainly focus on blue colors. I have kept another two color schemes so that I can use them whenever I need.

Interface Design

Interface Design fig.1

Interface Design fig.2

Interface Design fig.3

Interface Design fig.4

Interface Design fig.5

Interface Design fig.6

Interface Design fig.7

Interface Design fig.8

Interface Design fig.9

Interface Design fig.10

Prototype 

Prototype Link:
https://xd.adobe.com/view/46751a23-e8c3-42a5-4739-5fec7d53e0f3-3044/?fullscreen

Recorded Video:

---

Feedback

Week 11

Mr. Shamsul has told me that crafting of my icons need to be more refined. Refer to some established apps and make sure that the style if consistent. The first screen does not tell the user the name of the app, so I need to add it in. Other than that, I also need to fix the back button, share button also needs to be replaced with the common icon (which is the 3 dots). After finish fixing them, I can move on to making prototypes in XD or Invision.

Week 13

Before the consultation with Mr Shamsul, Mr Razif has told me to do prototype for as many pages as I can as prototype is to show clients all the functions and how it looks like when you are using the app. Mr Shamsul gave me feedback saying that I need to replace all the boxes (I put them to represent images)  with actual images. And for the part where I click into the image to look at it in full screen, I can actually put caption inside the image (or on the image) with a small half-transparent bar behind the caption. This can help minimize the size I use up in the app. Don't put caption and note together, caption is caption and note is note. I can make a small button on the screen where the image is clicked into to be looked at. The small button is for users to click in to open the note. Also, there will of course be the edit button for them to edit the notes too. (or picture caption) Next, I was told to refer to Instagram to follow how they post several pictures in one go, if so, there should be numbers telling the users how many pics, and the dots below the pictures to tell the users which picture are they looking at (out of 5 or 8 or 10). Do note that users have to be able to tell that whether it is a video, single picture or multiple pictures. For the note-writing feature, I have asked Mr Shamsul if I should be adding all the features like having different fonts, different sizes and such and he said there is no need to as it makes it complicated. (I am glad as I don't like that feature too, it looks messy). 

Week 14