Application Design I - Projects
Abigail Bea Chong Ka Yee (0333966)
Application Design I
Projects
LECTURE NOTES
Lecture 1: Introduction to the module
16.4.20 | Week 1
We had our first lecture with Mr Razif on Discord, he briefed us on the assessments and showed us some examples that our seniors did and what we would be doing throughout the projects. He also reminded us about the software we needed to download.
Lecture 2: UX Design
23.4.20 | Week 2
Today we had a lecture on UX Design followed by an exercise to research and present the topics: psychology of shapes, the psychology of colours, Gestalt principles and Fitt's Law. Since there were only three of us Mr Razif took a topic to present too.
Lecture 3: -
30.4.20 | Week 3
No lectures today. We worked on our Miro board for our projects.
Lecture 4: -
7.5.20 | Week 4
No lectures this week.
Lecture 5: Application Ideas
14.5.20 | Week 5
14.5.20 | Week 5
We presented our application idea to Mr Razif using the business modal canvas and gathered feedback on what to improve.
Lecture 6: Example of using Adobe XD to build wireframes
21.5.20 | Week 6
21.5.20 | Week 6
Before next week, we had to complete our app proposal. Mr Razif told us what we needed to touch up and include in the proposal following by a few examples given. We also had a small session using Adobe XD to create fast and easy wireframes for the app.
Lecture 7: Application Proposal Presentation
28.5.20 | Week 7
28.5.20 | Week 7
All of us presented our app proposal during class today. It was mainly us fixing and adjusting the application since it was close to reaching the end of the semester.
Lecture 8: -
4.6.20 | Week 8
4.6.20 | Week 8
This week we continued working on the application in our selected platforms digitally.
Lecture 9: -
11.6.20 | Week 9
11.6.20 | Week 9
For today's class, Mr Razif told us that in an application it's not just about aesthetics. An application's main purpose is to help make the user's life easier and the way an app functions and how it flows together is crucial. That's where wireframes come in to achieve good flow. Both the difficulties and positive aspects will be able to be explored by the designer when doing a wireframe before completing the final application.
Lecture 10: -
18.6.20 | Week 10
18.6.20 | Week 10
By this week, we should be done with the wireframes along with user testing and start working on the visualisation of the app.
Lecture 12: -
2.7.20 | Week 12
2.7.20 | Week 12
We continued finalising our application.
INSTRUCTIONS
PROJECTS
Proposal | Week 1 - 8 | 16.4.20 - 4.6.2020
For our first project, Mr Razif told us to find at least 3 ideas for an application. It must also serve a purpose, figure out why it's more unique than others, and have a name. I could think of only 4 ideas which were
- know your car app
- lifestyle app
- online groceries + recipe app
- motivational app
Week 3 | 30.4.20
Mr Razif gave us a business modal canvas to brainstorm ideas for our application on Miro. After brainstorming my ideas I decided to focus on the online groceries + recipe application and told Mr Razif about the idea and approved it.
Week 4 | 7.5.20
We had to present our ideas to Mr Razif today using the business modal canvas I only presented my online groceries + recipe application and the idea was approved. Here's the picture of the business modal canvas with the amendments based on the feedback given in purple ink.
Mr Razif gave us a business modal canvas to brainstorm ideas for our application on Miro. After brainstorming my ideas I decided to focus on the online groceries + recipe application and told Mr Razif about the idea and approved it.
Week 4 | 7.5.20
We had to present our ideas to Mr Razif today using the business modal canvas I only presented my online groceries + recipe application and the idea was approved. Here's the picture of the business modal canvas with the amendments based on the feedback given in purple ink.
|
| Fig 4.1 Business Modal |
Week 7 - Week 8 | 25.5.20 and 4.6.20
Today we had to present the proposal of the application. I presented the online groceries + recipe and received feedback to have the wireframes properly displayed in Adobe XD. Here are the slides in the PDF version. In the slides, we should have the main purpose of this application, competitive analysis for other existing apps, modal business canvas, user profiles, user flow, list of features, mood board, and wireframes.
Prototype | Week 9 | 11.6.20
I chose Figma to start prototyping the wireframes I drew in the slides
that included the user flow from the flowchart I created and the basic
layout of the application (where functionally takes place). I changed the
application name from Ezsy Ingredients to Bodega as I thought the first
name sounded cliché.
|
|
Fig 9.1 Bodega's design wireframes |
Below are the slides of Bodega's User Testing Prototypes:
After creating the prototype, I then continue with the user testing to see
if there are any improvements needed and how user friendly it is. Due to
the RMCO, I had a limited amount of people to test my app with. I tested
the app with only 2 people. The main tasks they had to do was go through
the 5 main pages on the navigation bar (profile, recipes, groceries,
rewards, and messages) and additional tasks which were to search
groceries, filter them and adding the groceries to the card proceeding
with checkout and payment. Below is the video for user testing.
I then summarised 3 main points from both users and put them into slides
and highlighting the issues they faced.
|
| Fig 9.3 Feedback from User 1 |
|
| Fig 9.4 Feedback from User 2 |
I then summarised the top issue which was the rewards page.
|
| Fig 9.5 Summary of Feedbacks |
Design Process | Week 10 - Week 14 |
I carried on with making the onboarding screens and an illustration before a user signs in or registers for the application. I drew a shelf/isle that would be seen in grocery stores and added books as I have recipes included in the app; together with items that you can find at the supermarket. Also adding a coming soon sign for ingredients that might be unavailable in for delivery.
 |
| Fig 10.1 Process of drawing the illustration |
Week 14 | 16.7.20
From the user's feedback, I made some buttons bigger and fixed the rewards page and proceeded with the visualisation of the app in Figma. I made a lot of adjustments from the previous wireframes as I wasn't satisfied with the layout. During Mr Razif's class on Thursday (16.7.20) we showed our current prototypes and he gave us a good amount of feedback for the application to be completely finalised. Here are the feedbacks I received about Bodega:
- In the main page the "Ingredients of the Month" section it looks crowded with the name, weight, and price of the item even though it is aligned the same. It is due to how some lines have 2 or 3 which makes it look unorganised.
- In the reward page, I should stretch the point box or change the font size so it doesn't look too tight, and 'Stay at Home' words must be slightly placed away from the other rewards.
- In the profile page, "Gallery of Recipes" section I should limit the words per line to only 4 lines and have a ...more button at the side or below of the paragraph. This would be called the tuck in method.
After fixing the feedback, I compiled the final prototype application in the slides below:
From the slides of the final prototype, I made a lot of final changes that I'll list below:
- The background of the application is now a pale purple so it wouldn't look too plain.
- More colours added in the overall layout and placeholder images replace with extraordinary ingredients and recipes.
- Onboarding pages with matching illustrations with the purpose of stating the key features of the app.
- The page before a user signs up has an illustration that was developed in week 10.
- The Login and Register pages layout looks slightly different with drop shadows added along with 'forgot your password?' and 'already have an account?' following by signing in with social media icons.
- Main Page: Removed the current location as I felt like it didn't have a purpose since users would have to key in their information before checking out. The promotions that are shown before the categories are changed into carousel as it is easier for users to just scroll between them.
- The bookmarks on both the main page and recipe page now have more elaborated pages.
- Profile Page: The users would view the recipes that they have made with their own ratings and comments about the recipes.
- A rating page where users can check the percentage of how many starts a recipe gets, write their own review, and check other people's reviews.
- When a user clicks to see more information about the item is changed to a more simplistic layout with a warning pop up that tells a user to only purchase above RM100 to get free shipping.
- Message Page (Notifications): added open and close email icons to show when a user has opened a specific notification
The link to the final Figma Prototype:
Application Walkthrough Video
Comments
Post a Comment