APPLICATION DESIGN I- PROJECTS
30/8/19- 1/12/19 (Week 1- Week 14)
Andrea Vie Choong Jia Qi (0331945)
Application Design I
Project 1 | Project 2 | Final Project
Proposal | Lo-fi Prototype | App Visual Design
Outfit Planning App: StyleMe
_______________________________________________________________
LECTURES
Lecture 1: Introduction to the module
30/8/19 (Week 1)
This week, we were briefed on what we are expecting and learning from this module and the exercises and projects that we are tasked to do. We saw samples of our seniors' work as a guideline and gain some ideas.
Lecture 2:-
6/9/19 (Week 2)
We had no lecture this week but we presented our 3 app ideas. We were introduced to an online whiteboard site, Miro where we had to plan out our app development and what will be in the app.
Fig 1.1 Screenshot of Miro, online whiteboard
Lecture 4: The 9 BMC Blocks
20/9/19 (Week 4)
In the business model canva, there are 9 BMC Blocks. Here is the explanation for each of the blocks based on the example given on Instacart.
1. Customer Segments
This section outlines the group of people who are involved with the app. For Instacart, it lists down three categories of people that are users, shoppers, and stores.
2. Value Propositions
This section is to identify the benefits of your app and points-of-difference that can give a value proposition. Instacart has 3 sections of value propositions for the customers, shopper and stores.
3. Channels
This section shows the mobile operating system of the app. The standard ones are usually for Android or iOS. For Instacart, their channels are through website and mobile apps in both available in Android and iOS.
4. Customer Relationships
This section is to strategize a plan to make your app as the consumer's favourite. Without this, the app does not satisfy the customers and will lose business in running the app. Instacart acquires, retains and grows its customer relationship using social media outreach/advertising and personalized customer service.
5. Revenue Streams
This section talked about the money that the business earns from the sale of goods or the provision of service. So Instacart makes money by charging users the delivery fee or membership fee of using the platform. They also add a surcharge to the prices stores charge for their items.
6. Key Resources
This section shows how to make the app successful using physical resources. These include manufacturers, find warehouses, establish distribution routes, create retail outlets and many more. Instacart needs to build partnerships with local stores, fast shopper workforce, and technology for its platform.
7. Key Partners
This section is about having an external partnership to help build the app and support it. Instacart has established partnerships with both local stores and financial institutions.
8. Key Activities
This section is an essential thing that you need to do to make your app build up. For Instacart and Uber, their primary key activity is building a solid technological infrastructure. Managing the shopper workforce and customer service can also be key activities as well.
9. Cost
This section is about the different types of expenses a business incurs, and it consists of both fixed and variable costs. Instacart's costs are on the technical set-up and operational costs. Next, are the salaries for permanent employees and lastly commission-based payments to shoppers.
Lecture 5: -
27/9/19 (Week 5)
We had no lecture this week.
Lecture 6:-
4/10/19 (Week 6)
This week, we were briefed on our project 1 which is to create a proposal document for our chosen final idea of our application.
Here is the lecture video and PDF link to the proposal guide:
PDF: https://drive.google.com/file/d/1lg46Xr4XdBG5J1Iyt1XxC0zH7F52utjw/view?usp=sharing
Lecture 7: -
11/10/19 (Week 7)
We had no lecture this week as we continued with our progress on our proposal.
Lecture 8: -
We had no lecture this week as we continued with our progress on the lo-fi wireframes and user flow.
Lecture 9: -
25/10/19 (Week 9)
We had no lecture this week as we continued with doing at least three user testing on our coursemates and get pain points and suggestions after using the app.
Lecture 10: -
2/11/19 (Week 10)
We had no lecture this week but we had to start with the visual design of our app.
Lecture 11: -
8/11/19 (Week 11)
We had no lecture this week but we had to attend the Troublemakers Manifesto talk.
Lecture 12: -
15/11/19 (Week 12)
We had no lecture this week but we continue with our progress and consult our app design.
Lecture 13: -
22/11/19 (Week 13)
We had no lecture this week.
Lecture 14: -
29/11/19 (Week 14)
We had no lecture this week.
_______________________________________________________________We had no lecture this week as we continued with doing at least three user testing on our coursemates and get pain points and suggestions after using the app.
Lecture 10: -
We had no lecture this week but we had to start with the visual design of our app.
Lecture 11: -
We had no lecture this week but we had to attend the Troublemakers Manifesto talk.
Lecture 12: -
We had no lecture this week but we continue with our progress and consult our app design.
Lecture 13: -
22/11/19 (Week 13)
We had no lecture this week.
Lecture 14: -
29/11/19 (Week 14)
We had no lecture this week.
INSTRUCTIONS
Module Information Booklet (MIB)
_______________________________________________________________
PROJECT 1- PROPOSAL
30/8/19 (Week 1)
- Give a name for each app
- Describe what the app is about
- What issues/problems that the app addresses
- What is unique about the apps
Here are the slides of my 3 app ideas.
6/9/19 (Week 2)
After consulting my ideas, I decided to come up with a few more ideas that make the app more unique and not so common.
I added two more ideas of creating an app caters to elderly people and one more idea on the gift delivery service app.
We were also told to do a mico board on our app that we have chosen to do on.
I did these board on one of my new ideas and the first idea that was approved.
21/9/19 (Week 4)
I continued to revise and complete my miro boards of a business model canva for 3 ideas.
Here is my progress of the boards:
27/9/19 (Week 5)
This week, I had to revise the outfit planner and elderly app and write them down more specifically.
This week, I had to choose one final idea to make the app. I chose to do on the outfit planner. I had to document my research and wireframes in Adobe XD.
_______________________________________________________________Here is my progress of the boards:
Fig 1.1 Modal Canvas: Elderly Planner App (Version 1)
Fig 1.2 Modal Canvas: Outfit Planner App (Version 1)
Fig 1.3 Modal Canvas: Gift Service App (Version 1)
27/9/19 (Week 5)
This week, I had to revise the outfit planner and elderly app and write them down more specifically.
Fig 1.4 Modal Canvas: Outfit Planner App (Version 2)
 |
| Fig 1.5 Modal Canvas: Elderly Planner App (Version 2) |
4/10/19 (Week 6)
This week, I had to choose one final idea to make the app. I chose to do on the outfit planner. I had to document my research and wireframes in Adobe XD.
9/10/19 (Week 7)
This week, I continued with my proposal documentation and started on the wireframes in Adobe XD of my app. I also consulted with my progress so far with Mr.Razif.
_______________________________________________________________
PROJECT 2- LO-FI PROTOTYPE
This week, I continued with my proposal documentation and started on the wireframes in Adobe XD of my app. I also consulted with my progress so far with Mr.Razif.
_______________________________________________________________
PROJECT 2- LO-FI PROTOTYPE
18/10/19 (Week 8)
This week, I continue to finish up my wireframes and start doing the user flow in the prototype of InDesign. I also started with my visual design references for layout boards, concept design and style guide to help when I create the visual part of my app.
25/10/19 (Week 9)
After completing my wireframes, I started to conduct my user testing on three of my coursemates and get their feedback as pain points after using my app. After the user testing, I changed the parts that need improvement. I continued to make changes and transfer my existing wireframe to InVision Studio.
User Testing 1: Maydeline
Pain Points:
User Testing 2: Crystallyn Ersinski
Pain Points:
User Testing 3: Katarina Indira
Pain Points:
Here is the link to my final prototype:
https://projects.invisionapp.com/prototype/ck2933mf4005lqd01oherv1mc/play
1/11/19 (Week 10)
This week, I started to make the visual design of my app in InVision Studio. I searched for some free stock images to design my app.
For my logo, I used Canva to design it and refer to my style guide in my proposal.
8/11/19 (Week 11)
This week, I continued my progress on the visual design of my app for the other features.
This week, I continue to finish up my wireframes and start doing the user flow in the prototype of InDesign. I also started with my visual design references for layout boards, concept design and style guide to help when I create the visual part of my app.
25/10/19 (Week 9)
After completing my wireframes, I started to conduct my user testing on three of my coursemates and get their feedback as pain points after using my app. After the user testing, I changed the parts that need improvement. I continued to make changes and transfer my existing wireframe to InVision Studio.
Fig 2.1 Progress of previous wireframes/prototype (Adobe XD)
Fig 2.2 Progress of designing wireframes (InVision Studio)
Fig 2.3 Progress of linking wireframes to make prototype (InVision Studio)
User Testing 1: Maydeline
Pain Points:
- It is hard for me at first to know where to click to upload my clothes.
- In the profile page, the word "SHARE" in the button is too small and hard to read.
- In the planner, the add button is too low and hard to find it straight away.
User Testing 2: Crystallyn Ersinski
Pain Points:
- It was hard for me to find the button and navigate the place for me to upload my clothes.
User Testing 3: Katarina Indira
Pain Points:
- You can put the "CREATE STYLE NOW" at the bottom and put the "UPLOAD CLOSET" on top as the user needs to upload the clothes first.
Here is the complete documentation of my proposal.
Application Design I: Proposal (Final Idea) by Andrea Choong
Here is the link to my final prototype:
https://projects.invisionapp.com/prototype/ck2933mf4005lqd01oherv1mc/play
_______________________________________________________________
FINAL PROJECT- VISUAL DESIGN
FINAL PROJECT- VISUAL DESIGN
1/11/19 (Week 10)
This week, I started to make the visual design of my app in InVision Studio. I searched for some free stock images to design my app.
Fig 3.1 Progress of visual design (InVision Studio)
For my logo, I used Canva to design it and refer to my style guide in my proposal.
Fig 3.2 Main Page logo
Fig 3.3 Sign In Logo
This week, I continued my progress on the visual design of my app for the other features.
Fig 3.4 Progress on designing for Style & Planner Screens
15/11/19 (Week 12)
Welcome Screen & Onboarding Screens
1/12/19 (Week 14)
I went through each screen in the prototype view before publishing the final design of my app and upload the file via Google Drive.
Here is the link of the Invision file via Google Drive:
This week, I was almost finished with my visual design of my app and I run the app as a prototype. Then after consulting, I had to make some changes on the colour scheme and consistency in some elements.
Fig 3.5 Amend 1: Colour of buttons & border around the clothes
Fig 3.6 Amend 2: Colour of buttons & enlarge the text
Fig 3.7 Amend 3: Colour of buttons & text box
22/11/19 (Week 13)
I finished adjusting the changes and took screenshots of each screen as final design outcomes.
Welcome Screen & Onboarding Screens
Fig 3.7 Final Design: Welcome Screen
Fig 3.8 Final Design L-R: Welcome to StyleMe & Instant Upload Onboarding Screens
Fig 3.9 Final Design L-R: Style Automation & Planner Onboarding Screens
Sign In/Sign Up Screen
1. Sign in to existing account
Fig 3.10 Final Design: Sign In/Sign Up Screen
Fig 3.11 Final Design L-R: Sign In (email & password) Screens
2. Sign in using social media account
Fig 3.12 Final Design: "Allow Access to social media" Screen
3. Sign Up as a new user
Fig 3.13 Final Design: Sign Up Screens
*Forget Password*
Fig 3.14 Final Design: Send email verification for reset password Screens
Fig 3.15 Final Design: Reset Password Screens
Home Page Screen
Fig 3.16 Final Design: Reset Password Screens
Closet Screens
Fig 3.17 Final Design: Reset Password Screens
Fig 3.18 Final Design: "Select Closet to upload clothes" Screens
Fig 3.19 Final Design L-R: "Upload clothes for Wedding occasion" & Camera Access Screens
Fig 3.20 Final Design L-R: "Take photo of dress" & Satisfaction of photo Screens
Fig 3.21 Final Design L-R: "Instruction on removing background" & Remove background from photo Screens
Fig 3.22 Final Design: Name dress Screens
Fig 3.23 Final Design: "New dress added with name" Screens
Fig 3.24 Final Design: "Delete dress" Screens
Style Screens
Fig 3.25 Final Design: "Select type of style" Screens
Fig 3.26 Final Design: "Select an occasion for styling" Screens
Fig 3.27 Final Design: "Shuffle dress to pick" Screens
Fig 3.28 Final Design L-R: "Pick dress" & "Confirm outfit" Screens
Planner Screens
Fig 3.29 Final Design: "Pick a date to plan outfit" Screen
Fig 3.30 Final Design: "Fill in details to plan outfit" Screens
Fig 3.31 Final Design: "New outfit plan added" Screen
Rating Screens
Fig 3.32 Final Design: "Rate outfit of the day" Screens
Fig 3.33 Final Design: "Feedback done" Screen
Profile Screens
Fig 3.33 Final Design: View Profile with collections Screen
Fig 3.34 Final Design: Update Profile Screen
Fig 3.35 Final Design L-R: Share collection & "Collection has been shared" Screens
Settings Screen
Fig 3.36 Menu & Settings Screen
I went through each screen in the prototype view before publishing the final design of my app and upload the file via Google Drive.
Here is the link of the Invision file via Google Drive:
https://drive.google.com/open?id=1NGB0ZXcR1ATSyo_ZayNvSZSgacxaT-Pe
This is the link for the published online app:
Screen Capture of my app walkthrough:
FEEDBACK
30/8/19 (Week 1)
No feedback was given this week.
6/9/19 (Week 2)
Specific feedback: The first app idea can be considered as it will look interesting if it is designed well, making sure to know how the user can select their outfits to match. The second one is too big if you want to make it and it may be difficult to make it. The last app is too common as there are other apps that are similar to this. To compare these apps with the existing ones and see how you can make yours unique.
27/9/19 (Week 5)
Specific feedback: Mr.Razif said to focus and put more details for the Outfit Planner and Elderly App Ideas since they are still broad. For the outfit planner app, think about how the app can help people in choosing their clothes based on the event/location/feelings. For the elderly app, focus on one routine like medicine. Make sure the elderly can save the names of the medicines so they don't forget. The main issue is their memory. Think about the behavior of the elderly.
4/10/19 (Week 6)
General feedback: Before designing the app, you need to think of the key features of your app to make it workable and unique. Therefore, doing wireframes helps to test users and know what to improve from your app.
9/10/19 (Week 7)
Specific feedback: Mr.Razif reminded me to make sure for your home page, avoid using buttons. Users nowadays want information directly so it would be better to put like a news feed layout such as Facebook. For instance, showing clothes on different occasions and a button to add more clothes in one of the categories. For the user journey map, it can be based on an existing app or your own app. It can be for several experiences with the app. And also include the pain points for each step.
18/10/19 (Week 8)
Specific feedback: Make sure to do your user testing and complete the prototype in InDesign to do the user testing and the user flow as well.
25/10/19 (Week 9)
General feedback: Make sure to upload your user testing to your blogs.
Specific feedback: Mr.Razif suggested that it would be better to change and use InVision Studio instead as you will have trouble viewing it on your phone for Adobe XD while testing out.
1/11/19 (Week 10)
There was no feedback given this week.
8/11/19 (Week 11)
There was no feedback given this week.
15/11/19 (Week 12)
Specific feedback: Mr.Razif commented that the elements and colours you add need to be consistent. For the clothes, add a grey border around it so it doesn't look like it is a cut out. The buttons in the home page, add the yellow button so the user knows that the yellow rectange is a "button". Add the title of the suggested clothes in Style Page. Arrange the clothes more separately. Change the white boxes to grey and add white text.
22/11/19 (Week 13)
There was no feedback given this week.
29/11/19 (Week 14)
There was no feedback given this week.
Comments
Post a Comment