Glance— Interaction Design Capstone Project
In December 2015, I signed up for the Interaction design course in Coursera, After so many up’s & down’s in the schedule, finally i am now sharing my final capstone project to the world, I have learned a lot with respect to HCI, User research and Usability testing, The best part of this course is, It is well laid out and it is end to end.
In this post, I will share my project details, like process ,need, features and how it shaped up in the time frame
Design Brief
We are surrounded by information. Some might even call it overload. How might technology show us the essential pieces at a glance, so we can quickly navigate through the noise to get to what we really want? We compulsively check email, Twitter, Facebook, and the news — — just in case there’s something there. Right now we are doing the filtering and finding ourselves, why not let our devices do it for us? How can a screen summarize information and present just the most relevant parts (especially if it is tiny)? How can these devices use social and physical context to more effectively have the key information ready at a glance? Today the home screen of many devices is a grid of icons, or a static picture. That’s not very creative. You can do way better!
In One word — Design a Personal Dashboard for Users which is smart
Needfinding
With the brief selected, the first task was to observe the current disposition of any scenario of our choice where our problem statement could be applied. The need finding observation was accompanied by 3 interviews of individuals from different demographics and see how each was impacted by our scenario under observation, understanding different perspectives on the problem and identifying breakpoints and opportunities for our design.
My main intention was to learn about the typical user’s usage of smartphone, i.e. how much they are reliant on social networks, smartphone in their day to day lives, and I was most curious to know what are the users Expectations, from a smart phone.
I observed and interviewed total of 3 participants 2 my dormitory and 1 in my workplace, what surprised me was their unique answers to my question “How would you like your Home screen to look, if it is context aware?” and the best part is the design finding that the user’s priority and customization is the key for Glance project, so lets get started to know, what they have said…
1st Participant — Santhosh — IT Professional — “ I wish my phone would show all my social feed straight up in my home screen, it should show my calorie count, my leaderboard position with my friends, My Emails, My Favourite music list, Gadget news to shuffle through when I have time”
Opportunity Analysis: He has lot of things in his mind that one can capitalise on, but the phone’s screen is just shear 5 inch screen, But if the phone can prioritise users tasks and interests on its own , then it’s a break through in the tech industry, such an AI can interpret users location, state of mind, time and context and if it can pull data which is related to user, That’s a great win.
2nd Participant — Bhaskar — Banking Loan Officer — “ I Would ask him to create an app which has all our previous loan details, contact details, New loan process etc. straight from this screens (He showed and laughed).”
3nd Participant — Pranavi — Front end Developer — “ I would love to see my peer’s birthdates and I would love to send wishes and animated wishes straight from my wake up time, I would love to see who is nearby me to hang out, hmmmm I would love to see nearby food places and etc”
Conclusion of Need finding :- The Glance App has to be customizable by user and it should understand user a lot to prompt, what it should do, But the opportunities are endless here, It strictly depends on to what market and users you cater to.
List of Inspired User needs and insights
1. A User want his smartphone to show his social feed straight up in his home screen, He wants all the social network feeds like Facebook, Twitter etc. to be consolidated into a widget area.
2. The feed widget in the dashboard has to be customizable.
3. A User needs a way to see his day calorie count straight away.
4. A user needs a way to see his position in the leaderboard in the challenges with his friends in the dashboard.
5. A user needs a way to check his mails directly from the dashboard rather than going to app and clicking and wasting time.
6. A user needs a way to shuffle through his favorite music or playlist straight from dashboard, it can be done through widget but he wants all control over it.
7. A user wants a way to see his favorite or desired news to read when he has some time.
8. A user wants his smartphone to capitalize on the internet and his details to automatically login to the applications and show him the content context aware.
9. A user wants a way to sort out the best songs for a workout straight away in the dashboard widget and it has to be done smartphone daily at the moment he starts to work out.
10. A user wants to see his desired status tracking of applications (loan tracking for a loan officer) straight away in the dashboard so that he will not miss out on the key information.
11. A user wants a way to personalize or customize his desired context and desired notification area in the dashboard.
12. A user wants to see his or her nearby friends when he moves in to a location to hang out with them
13. A user needs a way to communicate or send messages to a birthday baby straight away from the home screen
14. A user needs a way to communicate through animation stickers to his desired friends
15. A user needs a way to see some of favourite restaurants nearby when its lunch or dinner time.
Design Inspirations
Verbal Inspiration: Customizable, Unique, Context Aware, Intelligent, Smart , Fast, Reliable
Visual Inspiration:
Google Now
Google Now is a near high level design for a dashboard, It shows all the detailed info straight away with a single left swipe, It shows news, flight status, calendar, traffic so on, My design mostly would stick around it and how to make it better
Facebook Nearby friend’s feature is a great addition, It allows me to meet my fellow dear ones if I am near to any one, and this need is coined by one of my user In the interview
Google Maps
Google Maps has a great view of combining routes, details, images, reviews and navigation, I am inspired a lot from it, so that I can use a similar navigation for my design as well
Google Goggles
Google Goggles is a great way to get to know the details of something which you can’t spell or type, if you want to search around some item, goggles is there for you to search better.
Bixby
Bixby has a lot of potential in the future market, as it is a very good AI which is context aware and it can place orders track for you and it is a real good assistant to be there in the dashboard
Fit bit Leaderboard
Samsung S Health
Storyboards and Paper Sketcehs
Wireframes
Heuristic Evaluation
Next step was to evaluate our app using Neilson’s Ten Usability Heuristics.
We conducted a self walkthrough at first to smoothen out the app flow and interactions. This was followed by an in-person evaluation, where a user interacted with our paper prototype while voicing their thoughts and opinion about the app. These observations were recorded and later correlated to the Usability Heuristics list. Each identified problem was categorised and given a severity rating.
Heuristic Evaluation is perhaps the most useful process while designing an app. It’s a great way to identify problems early on in the design process and figure out what works and what does not. It helps you identify key usability violations and think of alternate designs to fix them, while also ironing out minute errors and bugs. This greatly reduces the probability of redesign and failure during the later stages. External participation is key since if we do it alone, we will often gloss over the imperfections of our own design. H.E. should be done at every design stage and whenever a major system change is introduced.
Finally, after going through all the evaluations, we consolidate them and distill our final solution around which we design our application. We also create a development plan to assign estimated timelines and effort required for each upcoming task.
Then the actual Mocks were designed digitally, We learned about IOS and android guidelines and we are asked to create a prototype in invision for testing it with users,
InPerson Testing
A testing protocol was developed to list down the steps and roles for executing the test and debriefing the users. User consent was obtained through signed forms informing them about the way they were being recorded. After the tests were completed, the results were compiled in a meaningful way so as to discern what breakdowns were happening and changes that needed to be made.
Usability Script
1. Before showing the test subject our app, we explained the goal of the app in order to set up their context; we told them that they’ll be testing an app called Glance, A home dashboard for your smartphone which is context aware. After prepping them, we asked what they are expecting of this app as far as intuitiveness, look and feel and functionality
2. Ask them to sign the consent form.
3. Present the user with a smartphone displaying our app’s homepage and allow them to look at the home page for approximately 5 seconds before the assigning of tasks.
4. Assign tasks:
· Ask the user to look for the user calendar and appointments
· Ask the user to create a Memo or Reminder
· Ask the user to Think Aloud on the App
· Ask the user to go to his profile
· Ask the user to customize widgets
· Ask the user to go through notification center
· Ask the user to snooze the reminder he set
5. Conduct post test survey.
The the feedback was collected and the designs were iterated, then as a next step we did Online User Testing that too for A/B Versions
Online Testing with A/B versions of one specific feature
I have selected the navigation bar click rate — which one is more accessible in in which position the click rate is high, Idid my online usability testing with Usertesting.com, I have watched 4 Users video feedback in the portal and made some major changes to the design
List of Changes based on User Testing Feedback
- New Screen for settings section
2. Better interaction to support cards
3. Removal of the bulge tool action bar to reduce confusion
4. Adding a screen interaction for notification view
5. Settings detailed — Context aware may be much clear
Visual Designs
Prototype Links :
Conclusion
Finally ,This journey with Coursera’s IxD Specialization is coming to a close, The whole post is an outcome of 2years time ,With this intensive hands-on online course, I have learned a lot of valuable knowledge and would surely continue to use all of it with my work as a UX / UI Designer.
Thank you Coursera, Professor Elizabeth Gerber, Professor Jacob Wobbrock, and most especially to Professor Scott Klemmer and the UCSD Design Lab for putting this IxD Specialization together and making it accessible to everyone
