A Conversation and UX Designer.
Homework
Homework App is an application that helps students communicate and share files with their peers to facilitate teamwork.
Based on confidential work
Product Designer
Homework App is a product I created in 2017 based on NDA designs from a previous project. For the original product, I worked as a visual and UX designer in preparation for its Jan 2017 public release and subsequent redesign. This project represents the ideation and design that I put into that redesign.
ā
Issues to Address in Redesign
I consulted with the design researcher to identify the following major issues for the redesign. We looked at analytics and interviews from users to see where the pain points and drop offs were.
Navigation
Guide the user through the app in a more direct way. Find a solution to make sure people feel confident.
Adding or Creating a Project
Make it easier and more intuitive for users to create new projects. Allow users to duplicate past projects or elements of past projects to save time and effort.
Sharing Content
Clarifying how to share content. Make it easier to tell what is shared and what isn’t.
Solution
Since many of the issues were rather large and fundamental to the first version of the project, I decided to undergo a major overhaul of the app's architecture. There was confusion over the navigation, which I believed resulted from not having a clear home page, where all of the projects were available to them. This redesign clearly differentiates between home and project pages.
ā
Another issue addressed in this redesign was how to show what is actionable for the users and ensure that they are properly interacting with the app. The main functionality of the product is to create projects and share files, but we found that people did not know how to do this. I simplified the flow for these interactions, so that people would be able to actually use the product to its full extent.
Home Pages
The three home screens present a clear navigation between current projects, invites, and expired projects. The screens utilize UI patterns and visual elements to give users key information in a condensed, easy to comprehend manner.
Additional Project Info
Project description contains members and expiration date, to give users pertinent information at a glance. I made this decision based on a set of in-team studies I conducted. My coworkers said that they would like to see at-a-glance information without having to delve too deep.
Clear Navigation
There is a clear differentiation between current and expired projects, and new invitations are easily actionable. Research showed that at any given point the users did not know where they were in the app, so I improved upon the navigation by implementing this new UI pattern.
Additional Project Info
Project description contains members and expiration date, to give users pertinent information at a glance. I made this decision based on a set of in-team studies I conducted. My coworkers said that they would like to see at-a-glance information without having to delve too deep.
Project Pages
File Sharing
One key feature of this product is that users can redact information before they share it with the group. In order to do this and to make sure that they only share appropriate information, we needed to clearly show users what they have shared and what is private in their "bank of files." In the v1 there was no clear indicator that an item had been shared, so I created this drag-and-drop interaction. The split screen shows which files have been shared with the group and the gestural interaction clearly indicates that an item has been shared.
Who Shared What
Another insight from the user research was that people had no idea who had shared which files with the group. This was a clear oversight, because upon doing an inventory of the product, I realized that we never actually gave them this information. In this version there is an indicator of who shared each file, allowing users to track everyone’s work.
Delayed Login
One major annoyance of v1 (something that we found directly resulted in abandonment of the product) was that it forced users to login to all sources at once via annoying popups. And a technical issue with saving login information required them to re-login at each use. I worked with the developers on the team to improve the process so that it would remember pertinent information, but most importantly, this redesign delays that tedious process until you need it. You only need to login to a service when you want to access files from it.
Creating a New Project
The process of creating a new project is simple and only requires a few steps. The app remembers which classes you are in, so selecting content and people to add is simple. The recommendations are based on past activity so the more you use the Homework app, the easier it will be to quickly create new work.
Simple, Pertinent Details
When creating a project, the users are only required the add the most basic details. I wanted to ensure that it would only take a matter of seconds to fill out these forms, so I eliminated unnecessary details and harnessed the products build in intelligence. More information can be added later when it is needed. This lowers the barrier to creating projects, which was found to be an issue in v1.
Smart Recommendations
The analytics had detailed information on each user and had the capability of making smart recommendations, which would drastically lower the time and effort to create projects. Highlighted recommendations based on usage patterns. The app will bubble up the most commonly used services and sources to make project creation quicker.
Adding People
The app knows who is in the class and filters them from all contacts, so the user can easily select who they want from a limited number.
Onboarding
This is the onboarding flow for the Homework app. It is an interactive process, where the user selects which classes they are in and what content they are likely to share. This initial information will create a personalized experience for each user, with recommendations dependent on their answers.
