Work tracker- Work tracking app case study…
Work tracker- work tracking app case study [ capstone project of interaction design specialization through University of California San Diego & Coursera].
Problem Statement: Redesign the way we experience or interact with time.
Over view of the project:
The capstone project is last course of the Interaction Design Specialization. The project is about design thinking as a process that helps us unearth problems worth solving and create designs to address them. The process contains different steps which are useful to solve the real-world problems. The project has three design briefs those are Time, Change, Glance. I have chosen the topic on Time which is a major part and the change is little part of the project.
I would like to learn more about the people’s behaviour and to solve their problems in to modern way to create successful interactions. I have chosen 3 kinds of participants [ students, software engineer, Freelance designer] to observe their daily life spent on working with laptop screen. I have tried to calculate the amount of time spent to work with laptop per day and eye strain level.
Ideation & Brainstorming [user needs]:
After observing different people, I have listed ideations are below.
· Everyone needs to know how much time spent on working with laptop per day or week or month.
· The user needs to schedule a task [ working with laptop].
· The user needs to take notes on how much time spending on working with laptop and eye strain level.
· The user needs to get notifications and work reminder
· The user wants to receive the notifications on eye strain level and take rest.
· User wants to know about how much time spent on every task like watching movie, online payment, working on project.
· User wants to track the work in graphical representation
· User wants to track and share the details.
· User wants to get automated notification on working time with laptop.
· The device which can automatically calculate the amount of time spent working with laptop.
· The app, save the time to create the task and work tracking.
· The mobile app that show the options about the different task’s summary and details of the work.
· The device that can view to-do list of the day.
· The device that can make changes like edit or delete task after scheduled task.
· The device that can share the task summary details.
After listing on ideation and brainstorming, I have created the inspiration board. In the inspiration board, I have included the five inspirational visual interface and wrote the short description behind the visual interface which are related to the project brief.
Create story board & Paper prototype:
Story board:
I am very excited to create the story board of project. I like the drawing part, I have enjoyed creating storyboard and paper prototype. I have brainstormed a list of ideas and then pick some best ideas to create two storyboards using pen and paper, to convey my design idea which is based on user needs and goals.
The storyboard is best way to conveying design ideas.
Paper prototype:
Based on story boarding, I have listed out strengths and weaknesses of each design, and how well they achieve the goals set out by point of view of my project. I have created two paper prototypes. Each one is connected to point of view of my project but I have created in two different ways. A paper prototype concretely shows all the essential elements of user interface of the project. The paper prototype was created with pen and paper, to focus on main idea behind the project.
Heuristic evaluation:
The next step in the design process was conducting Nielsen’s Ten Usability Heuristics evaluations on both paper prototype. In this process, I was conducted multiple walkthroughs by myself to figure out flow of my prototype and find out which pieces of my prototype needs to be swapped around at what point, to make my prototypes run smoother, better and an evaluator easily interact with my prototype.
After that, I have chosen the three participants to conduct in-person evaluation. In this process, I have observed and map the evaluator’s thoughts and opinions to different heuristic violations, writing many violations and adding severity rating to each violation. Which is very helpful to make better interaction with prototype?
We have conducted online evaluation of prototype using talk about to evaluate peer evaluation, where peer shows their prototype on online, and also documented on each heuristic evaluation on their prototype and severity rating of each violation. To help make better prototype flow and interaction. The peer also evaluates my paper prototype and documented the different types of violation and severity rating of each violation.
Conducting self-evaluation on prototype is better than conducting online or another person evaluation. We can get more valuable feedback on our prototype, to easy way to solve the problems on prototype interaction.
Next step, I have distilled all the heuristic evaluations to figure out which are useful and which are not useful for the prototype, identified all the major problems as well as potential solutions. I have created the development plan for the upcoming tasks, which is help full to complete the project with in the timeline.
Wire framing:
Next step was creating the wire frames. I have created the low fidelity wireframes using Adobe XD tool. The wire frames contains home page and key pages. The wire frame of home page includes all navigation links for app. In this wireframes no need to worry about colour, typeface. In this wireframes, I have focused on arranged hierarchy of the UI elements.
Visual Design:
Finally, I have get into my favourite part of the process, creating the visual design of prototype. I have created the colour pallet for the visual design and choose the typography of the mobile app design. Using the wireframes and information, we was created the fully designed mobile UI design. I have created total 15 visual screens. I have created the visual UI in Sketch App tool.
The mobile app contains three major tasks
· Creating an account
· Schedule the task.
· Tracking
1. Creating an account to App.
Welcome screen for the app. The instruction page for the new user, how to use the app and how to sync the mobile to laptop and then sign in to account.
2. Scheduling the task
The user can create the task and then the user can view
Scheduling the task- when the user click in to the create button and then, the new screen will appear with different options after filling this options the user can create the new task.
The user can also view all to-do list of the day.
3. Tracking
User can view their work tracking and eye strain level in graphical representation. And the summary of the each detail tasks. The user can upload the tracking details and share the details.
Profile: Profile page of the user, in this page includes the settings of the details. The different options include in this page like notifications, edit profile, Help, Support…
I have created the prototype of the app in Adobe XD. After creating the fully functional design of the prototype.
User test:
Finally the prototype is ready for testing. The fully designed prototype is ready to test with actual users. I have created the development protocol. The development protocol includes the list out the number of questioners and interview questions. With the participants permission to record the user using the prototype. I have explained to participants about the description, goals, and user needs of the mobile app and usage of the app. With participants permission I have recorded and took the notes about observation during the tasks. Debriefing the participants.
After conducting the user test, I have list out the problems while using the app.
· When user download the app, the new user needs to know more options to create an account .
· Confirmation of the scheduling option in the app. The user needs to know about the user has created the task or not. So, the app contains the screen of conformation of work.
· Add the successfully created the task screen with to manage your work to show the created tasks.
· Edit button on top of the screen to user can edit the account settings like user, email id, contact number.
Launch A/B Test:
The final task of the project was A/B test. For this test we need to create the A/B test plan. For that we need to create the duplicate of the prototype. Then, in my duplicate, replace the “A” (original) screen with the “B” (alternate) screen. Create the two separate links for the prototype with only one difference between the two links.
We have used the UserTesting.com to run the A/B test. In this platform, the prototype is run and evaluate with four participants. Two users test ‘A’ link of the prototype and another two participants test ‘B’ link.
The list of changes to make in prototype:
· In this user test, one user did not understand the navigation about the schedule the task. To solve this problem, I need to create the multiple screens to finish the task and make easy navigation for the user.
· One participant did not understanding about the options on the tracker. To solve this problem, I need to create the share or upload icon to clarify the user that they can share the details.
· One of the participant cannot understand notification settings and to-do list changes, like edit or delete. To solve this problem, I have created the option button on each notification and task details screen.
· Profile of the user cannot easily make changes. To solve this problem, I need to create the edit button on the profile screen.
After receiving the A/B test results, I have listed out the changes in the prototype. Once I am done with all the changes on the prototype, I have created more pretty visual interfaces of the prototype. According to the feedback and all the changes, I need to edit colour and layout of the app and created more screens for the easy navigation of the user.
Prototype of the work tracker:
Conclusion:
The work tracker is the mobile app, where the user can schedule the task, edit or delete the task, and can view to-do list of the task. Also the user can view the notifications and reminder of the task. The user can also view the time spent working with laptop. And also view the summary of the each task details. The user can edit and view the profile screen. In this process the iteration of the work-tracker App is trying to achieve their goals. The app goes into the real world, then we will make changes in the app.
Beyond the creation of the project, This was a great experience to apply all skills sets to learnt in Interaction Design Specialization- Human cantered design, Design principles, Social computing, Input and interaction, User Experience-research and prototyping, Information design, Designing, running, analysing experiments.
The design thinking process is a way that, we can solve the user problems to create more effective design interface. From this specialization I have learnt how to design the technologies that people joy rather than frustration. Also learnt how to generate ideas, techniques for quickly prototyping them, and how to use prototypes to get feedback from other stockholders. Also learned principles of visual design, perception, and cognition that inform effective interaction design.
Thank you…
