APPLICATION DESIGN I: PROJECT 1

29/08/2022 - 19/09/2022 (Week 01 - Week 04)

ALICIA TENG YI LING / 0345159 / BDCM

APPLICATION DESIGN I

PROJECT 1 / APP PROPOSAL

---

LECTURES 

Week 01 / Introduction to Application Design I

Mr. Shamsul gave a briefing on what the tasks for this module are. 

There are a total of three:

Project 1 - Mobile Application Proposal (Week 01 - 04) 20% 

• Required to re-design an existing app that is unsatisfactory in either user experience (UX) or interface design or both (subject to mr shamsul approval) - unpresentable basically 
• Must conduct surveys, interviews, market research, etc for data to see if the app looks bad and why (not more than 50 respondents) 
• Identify target audience
• Design project using google slides or canvas - [ ] Submit to google classroom   

Project 2 - UI/UX Design Document (Week 02- 07) 20% 

• Include target audience and outline of content for the app 
• Cut sorting (normally done within a group/team) = categorising content (making the flow smooth) 
• Persona is an avatar based on your research and interviews (demographics)
• List app features and the apps minimum viable product
• Plan the User interaction activity = flowchart 
• Get reviews on the re-designed app / get feedback & then update the design/app 
• Basically an extension of the proposal (project 1)  

Project 3 - Lo-Fi App Design Prototype (Week 06 - 10) 20% 

• Create the lo-fi app prototype 
• Arrange all the screen wireframes, actions, visual feedback and link them up in adobe XD 
• Conduct usability testing (must record & film the testing)
• Have three testers  

Final Project & E-portfolio 40%

• After feedback, update your design
• Submission format - presentation slides in PDF

I was pretty happy to hear that there is no coding for this module this semester as last semester in Interactive Design really stressed me out. 

---

Project [1] Mobile Application Proposal 

Week 1 Task

Todo:

• Identify the genre of app you wish to re-design.
• Present which app(s) you have chosen and why.

Process:

    Firstly, I knew I wanted to re-design an app for Android as I am an Android girl and I've been using them for years. Then, I decided to focus on the genre of meal planning and food tracking apps purely out of personal interest and also because I found an app that genuinely needed a makeover because of how bad it's UI and design was. The app being "Meal Planner - Weekly Meal Planner". It is a meal planning and food tracker. It allows users to plan their daily and/or meals, snacks and drinks as well as track the nutritional intake they are getting on the regular and perhaps highlighting their eating habits. Additionally, this app offers a shopping list option whilst also having the option to view ingredients at home to prevent overbuying or simply for the ease of convenience when buying groceries.

Fig 1.1 App Store: Meal Planner - Weekly Meal Plan 

Fig 1.2 Screenshot of Daily Meal Planner Home Page

I deduced several problems I'd like to solve:

1. Design
• Inconsistent typography
• Poor colour palette for both light and dark modes
• Readability issues
• Overcrowded layout
• Outdated and poor design choices in general
2. UI
• Non-intuitive navigation
• Un-responsive design
• No clear icons to indicate sections
• Lack of structure and hierarchy
3. UX
• No instructions for first-time users
• Thus difficulty with usability
• Purpose, functions & features are unclear

This is my detailed analysis of the app

Fig 2.1 Analysis of Weekly Meal Planner

Following that, I conduced the SWOT of the app

Fig 2.2 Weekly Meal Planner's SWOT

From here I determined the main objectives of the Project

• To solve
1. Inconsistent design, poor choice of colours and unattractive appearance
2. Confusing, non-intuitive design, cluttered layout and terrible navigation
3. Overcrowded and inefficient design
4. Complicated, outdated [appearance wise] UI and un-responsive design 

What do I value:

Design

• Colour Palette
• Typography Choices
• Empty Space

Functionality

• Flawless navigation
• Customise for users and target audience, make it efficient and ergonomic

Competitor Analysis

    [01] Eat This Much

        It's aesthetic but

    [02] Plan to Eat

        This is the one competitor that had the pros outweigh the cons. It has detailed instructions for beginners 

    [03] Plan Meals - MealPlanner

        Simple, intuitive design

    [04] Weekly Meal Planner

        Cheap one time fee

How might We?

    For this section, I kept in mind what my main goals were for the app and split it into the actions:

1. Encourage
2. Improve
3. Redesign
4. Promote

    From here I elaborated on the plans and they formed pretty solid statements.

Fig 3.1 How Might We

Strengths, Weaknesses, Opportunities, Threats (SWOT) Analysis

    I based the SWOT off of several elements: Functionality, Appearance, User Experience and Structure. From here, I expanded my statements based on the pros and cons of these factors.

User Research

    To conduct my user research, I used two methods that were suggested by Mr. Shamsul:

1. Online Questionnaire Survey [minimum 50 participants]
2. Interviews [minimum 3 participants]

    For the first research method, I ended up receiving 59 respondents and gained a significant amount of useful data for the redevelopment of my app. For the second method in which I choose voice interviews, I had three participants who provided much more detailed answers and were as well greatly helpful.

Questionnaire Link: https://docs.google.com/forms/d/e/1FAIpQLScGXqFYb9857-Q1FDSIFNWNjfRme9PN9Uwcq8IMLhSGh-R66g/viewform?usp=sf_link

Fig 4.1

User Personas

    I loosely based the user personas of off the previous interview participants as well as my desired target audiences.

Process Flowchart

Created on my Miro board for this project.

Fig 5.1

Lo-fi Wireframes

    From the sketches below, I refined the wireframes and tidied up the layout and structure. Additionally, based on the market and user research conducted, I created two new wireframes due to the abundant requests for a calorie counter as well as daily water intake.

    

Fig 6.1

Sketches

    Please don't look at these too hard, they are very rough sketches but they encapsulate essentially what components I want to include in my wireframes.

    

Fig 6.2

Final Submission

Fig 7.1

Fig 7.2

---

FEEDBACK 

Week 02 05/09/2022

• Gained approval for my choice of app
• Proceed with the Miro board

---

REFLECTION

I have a good idea of how to proceed for the subsequent Application Design I projects. For the projects submission, I ended up relying a lot of senior works so I could ensure I had everything included. All in all, I'm pleased with how the re-designing process is going and I'm having fun trying out app design, I'm just worried for the coding part.