Portfolio UI/UX Team 10
A case study on a to do app and website
INTRODUCTION
It's the second week of the side hustle portfolio bootcamp and we were given the task of designing a mobile and web version of a to do app that allows people set tasks, edit tasks, delete tasks, update tasks as they are completed and also set reminders for tasks.
My team and I got to it and it was quite stressful. We had to work fast because the mobile app developers and back end developers were depending on our designs to do their tasks.
THE NAME AND LOGO
After the task was assigned, my team met to decide on how to go about the project. The first thing we talked about was choosing a name for the product. After deliberations and suggestions, we decided to name it "Do it" with the tagline; "One task at a time". We then went ahead with the logo designing.
IDENTIFYING THE PROBLEM
To know how to serve the users with our product, we needed to understand them and know what they want to see in a to do app/website. The only way we could know this was through research.
USER RESEARCH
We proceeded to do a qualitative research by using google forms to create questions and send out to users to fill for us so as to know how to create a product that is user-centric. We got 36 responses. Through the research, we could pick out some things that users have had issues with while using other to do list apps/websites while also asking for how we can serve them better. Some of the problems were:
- Lack of reminders/notifications.
- Too many features to navigate.
- No progress tracks.
- Inability to use the app without data.
SOLUTION
Putting all of these into consideration, we decided to:
- Design an app that would allow people organize their day, week and month.
- Add features that allow them to add tasks, tick them off when they are done, edit tasks or delete task.
- Add features that allow them to track their progress in percentage, gives them a badge when they are done with their task for the day, week or month, and,
- Allows them set an alarm to be reminded of what they have to do next.
USER PERSONA
A user persona was created for a content creator who because of her schedule needs a to do list app to keep up with her tasks while also notifying her of the tasks when it is time to do them. This was important as it helped to understand the feelings and needs of some of our target users.
THE DESIGN PROCESS
With the information gotten, we got to work immediately with the intentions of solving these problems through designs.
USER FLOW
After understanding the needs of the users, a user flow was created to solve those needs.
LOW FIDELITY WIREFRAME
We created a visual representation of what we want the actual designs to look like so as to understand the look and feel of the actual design.
HIGH FIDELITY WIREFRAME
The Splash Screen and Onboarding Screens
We made a visually appealing splash screen to welcome users to the app. We then designed onboarding screens giving the users a little insight into what they should expect from the app.
The Sign up, Sign in and Log out Screens
We made sure the sign up, sign in and log out processes designed were ones that would be easy for the users to navigate through. We also designed screens for people that forget their passwords and would like to create new passwords.
The Home Page
The home page shows your progress on how far you have gone with your task for the day/week. Here, you can add task and add notification.
The Task list Page Here, you can write down your task and tick them off as you do them, you can set alarm or delete tasks.
The Badge Screen
Once the progress report reaches 100%, the user is directed here for a badge for completing their task.
figma.com/file/hSj1qP5OfUZqdlicyTemit/DO-I…
CONCLUSION
We were able to turn the relevant concerns and issues into beautiful interfaces to create a better experience for the users.
Though we were supposed to create designs for both an app and a website, we couldn't start work on the website because of the time frame and the lack of cooperation from some of the team members.