project[1x2]
0344034.
BDCM
.Application Design I
::project[1x2]
lectures:
week[3]: Essentials
Clarity
Yank anything that confuses people or help them interact.
Familiarity
Allow users to use previous experience when interacting.
- Reduces learning curve
- Increases user retention
- Improves usage speed
Consistency
Allow users to recognise patterns.
Visual consistency & simplification
Use uniform fonts & colours.
Behavioural consistency
Reuse design patterns.
Behavioural optimisation
Users perform tasks with either less work.
Forgiveness
Make actions reversible.
...But not too much, be strict when needed (eg. show only suggestions that are relevant).
Efficiency
Low amount of input to achieve desired output (eg. keyboard shortcuts); reduces cognitive load.
project[1x2]: UI/UX design proposal documentation
todo:
- Find an app I'd wanna redesign
- Research its competitors
- Make H.C.W. statements
- Make S.W.O.T. analysis
- Make at least 2 user personas
- Determine MVP
- Create sketches
- Create wireframe
process:
Okay so before anything starts, all these rambles below will be sort of like a journal-style documentation, as all the fancy visual shenanigans shall be in the final.
Ice breaker
Before anything was started on the project, we were given an ice breaker thingy to do on our Miro. This would be in the form of a few questions to be answered regarding an app of our choosing. Questions such as "what problem is it solving", as well as "who are the app's competitors" — you know, something that'll totally wake up a room. It was here where the first seed of the possibility of redesigning an app being the basis of this module was planted, which made me pretty ecstatic, being the universal app hater that I was. One of the apps I was extensively battling with at the time was one called Tasker, which became my victim for the icebreaker as well as all things subsequently.
Competitor analysis
Competitors are the natural enemies of all beings, as is what this new, theoretical, redesigned app will be to Tasker. I was already aware of some of the other players in the space, namely IFTTT & Power Automate to some extent, but I decided to scour around & try all of them out once again to determine their true pros & cons without any clouding lens.
Tasker
"Hey honey I'm home!" honey in question proceeds to abuse them a
Welp what can I say, things are exactly where they were last time, just like how I hate them.
IFTTT
"Hey honey I'm home!" honey in question proceeds to not know how to open the kitchen door whilst wearing socks
IFTTT is very pretty, but very stupid, very expensive, & very limited in many areas. I did thoroughly... relatively... somewhat... a regular amount... enjoy using it, as its app is built to be friendly, with what looks like real front end devs (gasp). However, trying to create any task that spanned beyond the "If (This) Then (That)" model really required some irking, which was where I found it linked to Tasker, however fortunately that fact is.
MacroDroid
"Hey honey I'm home!" there is no honey
Everything surrounding MacroDroid look slightly wonky, from the graphics on the Play Store, to the name itself. Even going in, it's surprising anyone would use it honestly. Its UI is absolutely rancid. Don't even think its own mother could look at it. The elephant man has his work cut out for him. Like damn.
Power Automate
"Hey honey I'm home!" honey in question fin-doms them
After downloading the mobile version from the Play Store, I attempted to login using my Microsoft account, as required, only to be greeted by an extremely helpful & detailed error message — "There was a problem signing in. Please try again, or sign in with a different account." Googling that sh*t was no help either, as in hindsight, the people answering just assumed the the asker knew what was wrong, whilst the askers were just confused on what the hell this message even meant. Eventually I figured out that all this was because you needed a USD20.60++ monthly subscription to even peek at what the app does. Yikes. Whilst this may not be 100% their fault, as app stores such as Apple's & Google's are very strict about telling users to pay the dev outside of using in-app purchases, you'd still think Micro-f*cking-soft, could've figured out some way to at least hint at it.
Yeah the desktop version was free so I just played with that instead, learning then that the desktop version was pretty pleasant, all things considered.
How Can We (HCW)
This one was pretty confusing on how it worked at the beginning, but eventually I came up with a few that sounded kinda right.
Strengths, Weaknesses, Opportunities, Threats (SWOT) analysis
Bless me as a social science stream SPM student. Even though I got the worst of both worlds compared to both pure SPM streams, it all prepared me for this moment. Thus I did it & it is there.
User personas
I started this one by looking at some senior work cuz I had no idea what I was doing, ending up yanking some of their attributes, changing them to suite the persona I was imagining, & voilà .
Wireframe
I already had an idea in mind for what I wanted the app to have & to flow like, is the excuse I'd give. The main reason was that I was actually out the day I was supposed to be working on the sketch/wireframe, so I just skipped the sketch step & hoped the wireframe was enough.
Most design choices were made to conform to what users would expect, with the only possible outlier being the use of bottom sheets for the "new, new, hook, edit, *" screens rather than them being full-view views. This was mostly to enable peeking & quick dismissals of the views when no edits have been made, & bottom sheets that slide along with the user's actions make the process feel a lot more responsive rather than having to either press the android back button or the top left back button every time.
Sketches
Damn wireframes were not enough cuz sketches count for marks. I used this opportunity (is it still an opportunity if it's forced?) to explore different variations of some of the more difficult UI elements present in my idea.
feedback:
- 12/5/2022
- Add more HCW
- Add a benchmark for each user persona to help the reader more easily see the crucial differentiating traits
- Add one more user persona which applies to a larger subset of the population
- 19/5/2022
- Add at least some sketches alongside the wireframe, as it accounts for a lot of marks
- 26/5/2022
- Add a flowchart
- Add navigation arrows & an overall large diagram
final:
 |
Figure 1.1.1, Notion with all the stuff actually arranged, 26/5/2022 |
https://ljslol.notion.site/app1-task-1-proposal-c2365e2eb48a4df8bc6146d123576e77
Figure 1.1.2, Miro board full with stuff & more stuff for the above stuff, 26/5/2022
reflection:
I may have designed apps before, but never like this. Never like how a sane person should, wireframing sketching & that. It was a sorta eye-opening experience. I guess I was always restricted by technical ability & my designs followed that, but without such a limitation in place, apps can reach points of fluidity that (at least at this point I hope) users can & should experience.
The main takeaway from these two projects is just the process itself, & bunch more insight on how the industry actually does things. Mr. Hafiz mentioned before that the whole course was modelled after a typical design sprint, which puts more weight on that insight. The whole process is somewhat structured, but chaotic in all the ways where designers need them, which is sorta magical.
At the end of the day, the moment I decide I have a good enough app idea to propose, I'll be prepared with the skills to hopefully make it into a reality & continue the process of design & development through a sexy proposal.
Comments