Sem 4 _ Usability and Mobile Application II
28 August 2018
Week 1
Vivien Christian Cahyadi [0331241]
Experiential Design
WIREFRAME
Key partners : "What are your key partners to get competitive advantage?", Who can help you in your business (business in general) > without this, business won't run at all
Key activities : "What are the key steps to move ahead to your customers", activities of your business
Key resources : Like your team
Key proposition : "How will you make your customer's life happier?", Unique selling point
Customer segments : "Who are your customers? Describe your target audience in a couple of words."
Customer Relationships : "How often will you interact with your customers?" > need to retain customer ex. membership
Channels : "How are you going to reach your customers?", ex. social media, store, website, ioS, Android
This was the previous design. I used the dominant colour red to give out that energetic and motivating feel. Furthermore it kind of suits the "for asian" theme. However after looking back to it I feel like it is too cramped. I had Hanif, a fellow classmate of mine who had done meal prepping before test out my app and he said it's quite confusing. For example, the plan schedule page looks like a button and the swap icon is confusing. He thought it's refresh. Therefore I decided to do a complete makeover to the app by giving it a more minimalistic visual as well as simplify the process.
USER PERSONA
USER JOURNEY MAP
START TO REDESIGN
This time around I play with more negative space. The colour scheme is dominated by white with orange and blue accents. I really like the look of it because it seems clean and organized. Because meal prep promote healthy and clean eating this simple yet minimalistic design fits well with it. The font I use is still Rubik, and I intentionally make the titles bold and italic to give it a sense of motion and energy.
Sir Kannan suggest to look for a better font so I tried different alternatives. However I feel I still like the current font better with its bold italic style.
In the midst of refining the screens I've designed, I had this nagging thought that the current design lacks contrast. So I played around with the background colour and made this dark theme version. After asking around people's opinion the dark background is a clear win compared to the white one.
added this tutorial section to lessen confusion towards new users.
The social feature is a new addition on this new version of PrepEat. As my target users are youngsters, who like to share and boast their neatly organized food containers for the week, this instagram like feature acts as a motivation for them to keep on going.
I knew I was going to use some illustrations for the onboarding section of the app and this was my initial style guide. After seeing this Mr. Kannan predicted that it would look weird because the graphics in the apps are all photographs. So I tried, and it sure looked off.
Then finally I settled with this line vector style illustration imitating the style of the icons for my navbar.
To quicken my process I set up classes to style my texts. Starting from the colour, to the sizes, line height, bold, italic, etc. So in the html page I just need to do use the classes to get the text styling that I want. Found this method quite handy.
My app uses a lot of slider/carousel. I initially use slick.js to do this, which I later found out, is not really compatible with jquery mobile as it doesn't work when viewed directly through phonegap. Fortunately I found a solution by following and customizing a slider script from codepen.
slick.js : https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=2ahUKEwiVx8XmpJjfAhUKr1kKHcgZCk4QFjAAegQICRAB&url=http%3A%2F%2Fkenwheeler.github.io%2Fslick%2F&usg=AOvVaw1hbw2jW_qSbm_B37ZN_tk5
codepen slider : https://codepen.io/AlexEmashev/pen/xZWNeV
Most of the app were coded with simple html and css and I also kept in mind to make it responsive to an extent. However for more complex interaction that has to use scripts I took existing codes from codepen and modify it to suit my app. For example, the serving counter (+ and -) in the recipe detail page, the calendar, the onboarding slider, the set level slider, etc.
At first coding the pages were quick until I got quite lost in my own codes (It was too much). Command + F in dreamweaver helped me through this to quickly get to the section I want to tweak or build.
Sometimes it was smooth sailing and sometimes it got quite frustrating. Especially when things don't work as they're supposed to.
Week 1
Vivien Christian Cahyadi [0331241]
Experiential Design
Week 1 Exercise
Target audience :
- Students finishing high school, wants to enter UNI
- people who wants to further study
- Diploma students who want to continue their study
- parents
- anyone who’s interested in studying in Taylors, and has adequate finance
- international students
Goals (of the uni):
- let potential students find out more about the university (courses, programs, fees, etc. )
- have people enroll into the uni
- impress target audience how advance and good Taylor’s University is
Goals (parents) SECONDARY:
- Whether the school is worth investing on for their kids
Goals (students) PRIMARY:
- Look for their desired course or program (header, search for program)
- How good is the course (student works, rankings)
- Find out about the facilities (virtual tour)
Main page :
- Sticky Header :
-switch to college-login-Menu : study, campus life, admissions and aid, about taylor’s, teaching & learning, research
- Video Hero : Take a virtual tour, visit our campus
- Program search, and search for your passion (for those who haven’t decided yet)
- Articles, current events
- Popular schools in Taylors
- Rankings, reputation, stats
- Footer : Explore, Learn, Experience, Connect, Social media
- Live chat (ask for user data first, should directly direct it to the live chat instead)
- Book appointment
Rearrange the content :
1. Course and program
2. Popular schools
3. Rating and stats
4. Campus virtual tour
5. Articles
Call to action (relates closely to goals (client side : the owner) make sure you leave with something. (ex. sign up for newsletter) :
- Course and program = search
- Popular schools = learn more, find out more
- Rating
- Campus virtual tour = virtual tour, visit campus
- Articles = read more
WIREFRAME
Lecture Week 2
Business Model Canvas : rather than making a business plan, businesses use this to quickly jot down ideas and concept.
Made using realtimeboard
Key partners : "What are your key partners to get competitive advantage?", Who can help you in your business (business in general) > without this, business won't run at all
Key activities : "What are the key steps to move ahead to your customers", activities of your business
Key resources : Like your team
Key proposition : "How will you make your customer's life happier?", Unique selling point
Customer segments : "Who are your customers? Describe your target audience in a couple of words."
Customer Relationships : "How often will you interact with your customers?" > need to retain customer ex. membership
Channels : "How are you going to reach your customers?", ex. social media, store, website, ioS, Android
Week 4 Exercise : Usability testing
Paper prototyping, but other alternative is using digital prototype
jot down the challenges and difficulties : pain points
create a user persona for that app
Characteristic, behaviour of the target user, can use any photo (come up with 5)
primary target user and secondary target user.
Group activity
Hanif's app : Otocarpark
User persona > survey & user testing (get information from the actual tester and see if it matches with our intended persona) > Usability testing
Above is a user journey map. We did user testing with Hanif's app where Chalani, Aryna and Paulina each got their hands on the app with an objective: find parking then pay. Recorded in the third row labelled "customer experience" was their behaviour in each step of the app, and "verbal feedback" means the real words they spouted when they are using it. Looking at this it was apparent that Hanif's app is not that user friendly and changes has to made to make it less confusing.
Group activity
Hanif's app : Otocarpark
User persona > survey & user testing (get information from the actual tester and see if it matches with our intended persona) > Usability testing
Above is a user journey map. We did user testing with Hanif's app where Chalani, Aryna and Paulina each got their hands on the app with an objective: find parking then pay. Recorded in the third row labelled "customer experience" was their behaviour in each step of the app, and "verbal feedback" means the real words they spouted when they are using it. Looking at this it was apparent that Hanif's app is not that user friendly and changes has to made to make it less confusing.
PrepEat (meal prep app)
PrepEat is a meal prepping app that eases your
USER PERSONA
USER JOURNEY MAP
START TO REDESIGN
This time around I play with more negative space. The colour scheme is dominated by white with orange and blue accents. I really like the look of it because it seems clean and organized. Because meal prep promote healthy and clean eating this simple yet minimalistic design fits well with it. The font I use is still Rubik, and I intentionally make the titles bold and italic to give it a sense of motion and energy.
Sir Kannan suggest to look for a better font so I tried different alternatives. However I feel I still like the current font better with its bold italic style.
In the midst of refining the screens I've designed, I had this nagging thought that the current design lacks contrast. So I played around with the background colour and made this dark theme version. After asking around people's opinion the dark background is a clear win compared to the white one.
added this tutorial section to lessen confusion towards new users.
The social feature is a new addition on this new version of PrepEat. As my target users are youngsters, who like to share and boast their neatly organized food containers for the week, this instagram like feature acts as a motivation for them to keep on going.
Coding
First, I start with setting up the jquery mobile and the phonegap so I could look at my app through my phone. Unfortunately phone gap needs extra tweakings for iphone X as the page doesn't extend fully onto the iPhone screen. I did my coding in dreamweaver, starting out with the first main page which is called Plan, whilst constantly looking at the "WIP" (work in progress) design through google chrome and setting its viewing dimension to the size of iPhone X. The inspector tool from Google Chrome was a great help to my coding process as with it I can easily identify which class or Id names I have to override, as Jquery Mobile has its own styling and I had to customize it somehow.To quicken my process I set up classes to style my texts. Starting from the colour, to the sizes, line height, bold, italic, etc. So in the html page I just need to do use the classes to get the text styling that I want. Found this method quite handy.
My app uses a lot of slider/carousel. I initially use slick.js to do this, which I later found out, is not really compatible with jquery mobile as it doesn't work when viewed directly through phonegap. Fortunately I found a solution by following and customizing a slider script from codepen.
slick.js : https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=2ahUKEwiVx8XmpJjfAhUKr1kKHcgZCk4QFjAAegQICRAB&url=http%3A%2F%2Fkenwheeler.github.io%2Fslick%2F&usg=AOvVaw1hbw2jW_qSbm_B37ZN_tk5
codepen slider : https://codepen.io/AlexEmashev/pen/xZWNeV
Most of the app were coded with simple html and css and I also kept in mind to make it responsive to an extent. However for more complex interaction that has to use scripts I took existing codes from codepen and modify it to suit my app. For example, the serving counter (+ and -) in the recipe detail page, the calendar, the onboarding slider, the set level slider, etc.
At first coding the pages were quick until I got quite lost in my own codes (It was too much). Command + F in dreamweaver helped me through this to quickly get to the section I want to tweak or build.
Sometimes it was smooth sailing and sometimes it got quite frustrating. Especially when things don't work as they're supposed to.
Reflection
Overall I am quite okay with the result and I've put a considerable amount of effort to this. So much thoughts were put onto designing this app that are not mentioned in this blog, but I am ashamed to say that some pages (that are supposed to be there so everything is clickable) are not designed and coded due to time constraints and mental health (haha).
Sir Razif thought us the UX part of designing a mobile app which I think is very useful to learn. I may not be designing mobile apps in my future career but I think these principles or methods can be used in whatever designs I do.
Sir Razif thought us the UX part of designing a mobile app which I think is very useful to learn. I may not be designing mobile apps in my future career but I think these principles or methods can be used in whatever designs I do.
Comments
Post a Comment