Students are required to initiate proposal documentation for their mobile
application project and produce the documentation in MIRO. Please share the
MIRO board with hafiz.zamri@gmail.com
The mobile application categories can be:
Informational (How to), Services, Entertainment, Fitness, or Travel and its
subject to preliminary approval by the module coordinator.
Task 1
DISCOVERY SESSION Surveys, interviews, market studies, and research
STRATEGY AND GOAL STATEMENT Users and Brand Personas. Determine and verify
their target audiences. Outline the content element of their app, and
exercise the card sorting method to achieve optimum information
architecture. Show and Tell. Mood boards (Pinterest).
MAP AND FLOWCHART How the thing works. User touchpoints. key features of the
app, a clear flowchart (From Marketing, Appstore, Onboarding to the End
Game). Listing the app features and identifying the app’s MVP. Sketching
then wire-framing the screens. Plan the user interaction and
interactivity
The document will determine whether or not the app idea is good to continue
to the next development phase. This task is an iterative process whereby
during the assignment period, students are free to get feedback from their
peers and the module coordinator to further refine their idea.
MIRO Board (progress documentation):
Figure 2.0 Miro Board
Proposal for Submission:
Figure 2.1 Final Proposal (Submission)
Figure 2.2 Revised Proposal
Project 3: Lo-fi Prototype
I created my lo-fi prototype using Figma. Besides, I also decided on the name
for my app, which is "Grocey." The name was derived from the words "grocery"
and "pricy". With that, it ended up being GROCEY as groceries are pricy
nowadays.
Figure 3.0 User flow chart with arrows
Figure 3.1 Progress
Figure 3.2 Lo-fi Prototype
Project 3: Lo-fi Prototype (User Test)
Figure 3.2 User Test Recording
Figure 3.3 User test summary
Final Project : Mobile App Prototype
From low-fidelity wireframes to high-fidelity prototypes, I first added colours to the wireframes I did in the previous project. I will continue the project using Figma. However, I was not satisfied with the previous colour proposed in my proposal because I think the colours chosen previously did not reflect the "grocery" app.
Figure 4.0 First colour
I then decided to do some research and find more references before I proceeded.
From the research, I realised that green would be the best colour to reflect
the grocery app. I did think about having green as the main colour of my app
at first during the proposal phase. I think it might be boring as most of the
grocery-related apps are green. With that, I decided to go with cyan in my
proposal. However, after extensive research, I have concluded that green may
not be boring when paired with another bright colour, such as orange. At last,
I decided to use #44AD9E (green) and #F37950 (orange) as the main colours for
my app.
Figure 4.4 Colour Palette Before (top) vs After (bottom)
After deciding on the final colour palette, I continued to work on my prototype.
Figure 4.5 Progress
To make my app look more interesting, I added some images and illustrations. For the category page, I first tried with images, then I tried with illustrations.
Figure 4.6 Images Vs Illustrations
Figure 4.7 Illustration Progress
However, I realise both did not work out, and at the same time, I really think that I have to improve on my illustration skills. With that, I decided to get some illustrations from Freepik.
Figure 4.8 Freepik Vector Art
Figure 4.9 Category Page
Figure 5.0 Progress
Later on, I also tried to make my prototype more interactive.
Figure 5.1 Add and Minus Quantity Button
Figure 5.2 Dropdown Button
Next, I revise the app's navigation.
Figure 5.3 Navigation
Following Mr. Hafiz's suggestion, I decided to grey out all the
non-functioning buttons.
Figure 5.4 Progress
Figure 5.5 Progress
Figure 5.6 Navigation (the crazy lines)
I did not change my money sign to RM because I think that the outcome
will reduce familiarity as an expense icon.
Figure 5.7 Expenses Icon
Final Submission
Figure 6.0 Final Grocey Prototype
Figure 6.1 Final Grocey Presentation
Figure 6.2 Final Grocey Video Walk Through
Figure 6.3 Final Presentation Slides
Figure 6.4 Final Presentation Slides in PDF
FEEDBACK
Week 3 Mr. Hafiz said that a music streaming app and a
banking app are both not a bad idea. However, it might not be a purely
banking app; it could be like a transaction app that could gather
every bank together.
Week 5 Mr. Hafiz said that the banking app is very boring.
He suggested me a few ideas as well as guided me through the SWOT
analysis. Hence, I decided to change my idea to a grocery price
comparison app.
Week 8 Mr. Hafiz said that my sketches are good but remember
to focus on the main features of the app. For example, taking Grab as an
example, a comparison app could compare in terms of brand, price, and
location.
Week 11 Mr. Hafiz said that I could add flow chart arrows
and unclip the vertical frame of the prototype.
Week 12 Mr. Hafiz said that I should think about the order and not forget about the on-boarding process. The arrangement should be able to recalculate the distance and price. The stores can update the price + get voucher, while users can collect points after engaged eg: future DISCOUNTS (like shopee sales).
Week 14 Mr. Hafiz said that I should grey out the non-functioning buttons and change the sign to RM. Besides, it is OK to add features to the app.
REFLECTION
Week 7
Application design is interesting and I learned a lot throughout the
discovery and writing this proposal. Hence, I am looking forward to the
next step in prototyping the app.
Week 15
A ride on a roller coaster. I realised after finishing this project
that I still have a lot to learn about application design. This is due to
the fact that I have been struggling until the end, and the application
design is more difficult than I expected. Minor changes or adjustments
will have a significant impact on the visual of the design. I wouldn't say
I didn't enjoy the process, but it wasn't as immersive as I expected.
However, I am relieved that I was able to complete all of my assignments
on time, and I thank Mr. Hafiz for his assistance throughout the semester.
Mr. Hafiz's feedback is always insightful to me, and I greatly appreciate
it.
Comments
Post a Comment