DESIGNLAB
Adding a calendar feature to help with time and project management.
UI/ UX design . Feature Integration . Responsive
Project
Designlab is an online education platform. The curriculum, in addition to learning, requires the active participation of students with tasks like group critiques, mentor 1:1 sessions, hackathons, events, etc. The current website uses a third-party calendar platform to enroll and keep up with these tasks. This process requires additional steps to complete and is not very efficient in helping the student keep up with the coursework.
Process
I set out to find how students manage to keep up with their course requirements and if they’re happy with the current system. Approaching this quest of mine with Design Thinking methodologies,
I gathered the goals, needs, wants, and pain points from the community of students;
Studied the current market offerings and their shortcomings.
Defined the problem statement.
Provided a workable solution enhancing the experience.
It all boils down to a question…What does a student need, to manage their time with Designlab efficiently?
Product
The new in-house calendar feature directly enables the students to book meetings and sign up for events, etc. It also enhances the experience with reminders, personalization, cross-app sync & zoom integration making it central to perform crucial tasks and keep up with the course requirements.
The reimagined calendar is also designed to sync with other widely used personal calendars. This project is done as a part of Designlab’s curriculum.
Scroll down to read the case study or use the sidebar to view particular sections
Research
Interpret
Resolve
Design
Test
Research
PLAN | COMPETITOR ANALYSIS | USER SURVEYS
Plan
The plan was to…
Understand how students manage their time with all things Designlab.
Find out what apps they currently use (competitors).
Get to know their frustrations/ delights/ with the current offering?
Explore if there is a potential need for our feature.
Competitor Analysis
I compared the competitors & their offerings; what they provide and what they lack. These features are chosen based on their importance in helping us aim for an actionable solution. Some of these were suggested by research participants and were added later on. I have added the current Designlab (DL) calendar in there as well for a better comparison and reasoning as to why this needs improvement.
Findings
All of the market offerings are third-party and priced. They also require the user to do quite a lot of work in planning & none of them integrate with DesignLab’s (DL) web app.
The current Airtable integration offers sign-ups and attendance checks, however, it is inefficient as pointed out by the users.
It would be beneficial for the students if DL’s calendar integrates the students’ course schedule, attendance, events and allows for them to edit and manage their own project timelines.
Feature matrix
User Survey
A user survey was conducted to get quantifiable & qualifiable data. They were asked about the current products used for this goal (if any), to prioritize certain features offered by direct and indirect competitors based on their needs, and their feedback on the existing system.
71% agree that an in-house, personalized DL calendar will benefit them greatly.
≈71%
Found it inconvenient to book group crits.
Use another app to help them with the task like Google Calendar, Asana, Notion, Trello, Physical Calendar, etc.
Have missed a deadline, event, or a meeting they were supposed to attend.
≈57%
Found it inconvenient to check attendance & keep track of deadlines and schedules.
Feel that DesignLab does not support enough with time and project management.
≈38%
Found it hard to schedule mentor meetings and remember to attend.
Found it hard to check & sign up for events.
Inferring from the above findings, users need
A common calendar showing all the group crits availability, events happening, holidays and live date/ time tracker, day/week/month view).
An editable personal calendar component specific to the user (Mentor schedule, attendance, course schedule, pause, crits, attended meetings, future meetings, To-do list, task & event creator, start/ end of day updates).
Interpret
PERSONA | EMPATHY MAP | KEY USER JOURNEY
Persona
The provisional personas were very distinct from each other based on their needs but there were a few similarities when it came to their pain points. From this emerged my user persona, Ellie. Ellie is a little bit of everything.
Provisional personas
⬇
User persona: Ellie
Empathy Map
Being a student and a potential end-user myself, I had to be careful not to add in my biases while drawing up the empathy map. It should represent every user (our user persona in this case) and their need.
Empathy Map
Key User Journey
There was not one particular key journey I could think of that would combine all my user needs. Hence I broke it down to understand what functions are needed to execute each tasks. The user's desired outcome provided emotional reasoning for whom I was designing the experience.
Key user journey
Resolve
GOLDEN PATH | SKETCHES | WIREFRAMES
Golden Path
The golden path was going to be my main flow for the MVP. I started with a task most users found to be inconvenient (booking crits). I also worked on a second path mentioned by users needing help. It helped me understand the various possible entries to open the calendar and the corresponding flow.
Golden path
Sketches
The basic screen layout is inspired by commonly used and appreciated design patterns and are made to be clutter-free yet have all the information/ action accessible to the user. The screens also had to integrate with the existing web-app & its UI nicely.
Sketch: Homepage
Mid-fi Wireframe: Homepage
Sketch: Calendar view
Mid-fi Wireframe: Calendar view
Sketch: Filters
Mid-fi Wireframe: Filters
Wireframes
I have incorporated all the inconvenient but necessary actions into one flow. My user had to book a group crit & mentor session for the upcoming week and also wants to check out other events and just check if she is on track. Above shown, are some default views of the screen side-by-side with its relevant sketch illustrating how the layout developed.
Design
UI KIT | HI-FI WIREFRAMES
UI Kit
DESIGNLAB already has a Brand kit in place and I had the challenge of creating new components, adhering to the existing design. I have added new icons, navigations, labels, and pop-ups (shown below) for my calendar’s UI.
Brand design & UI Kit
Hi-Fidelity Wireframes
I kept the Hi-fidelity prototype to be minimally viable addressing the most important user need and visualizing them. Guided by atomic design methodologies, the final calendar system was a coming together of all the details; Right from how labels should be placed within a date box to how days, weeks, months view should look. Below are some key screens addressing them.
Hi-fi wireframe: Homepage
Hi-fi wireframe: Calendar monthly
Hi-fi wireframe: Calendar weekly
Task :Booking group crit - 1. Filter sessions
Task :Booking group crit - 2. Schedule session with a click
Task :Booking group crit - 3. Set reminder
Task :Booking group crit - 4. Option to remind via message or email
Task :Booking group crit - 5. Confirmation
Task :Booking group crit - 6. Session booked and added to calendar
Test
USABILITY TEST | FEEDBACK GRID | ITERATIONS
Usability Test
With the key flow ready, I wanted to evaluate users’ interaction and experience with Design Lab’s calendar feature to complete certain tasks and understand their pain points, behavior with the product, negative and positive emotions to refine the final product making it more usable and accessible.
Testing was done remotely (moderate and observe users testing the prototype via Zoom). The findings have been listed in a feedback grid.
Feedback Grid
The feedback grid helped me categorize my findings from user testing into 4 categories:
What worked well
What needs to change
What were the questions users had?
Were there any new ideas or suggestions that could be incorporated in the future?
Iterations
I addressed the “Needs to change” column from the feedback grid keeping in line with the MVP. The iterations have been shown below with relevant descirptions
Key iterations were made based on the initial usability test findings.
Final Prototype
The embedded prototype presented below might not be suitable to view on a mobile device. Click the “view prototype” button presented at the top or bottom of this page to open a new tab.
What I’ve learned
Adding a feature to DESIGNLAB made me understand that the road still keeps going; that the problem keeps getting nuanced and hence the solution needs to as well.
Adhering to an already existing set of rules and finding ways to add new components were challenging.
Being a potential user myself, I had to remove my assumptions, biases, needs, wants, pain points, and delights and keep them aside. It was a constant effort throughout the project.
In the future, I hope to add more intuitive time management tools to the calendar and make it complementary to the course curriculum.
Credits & Contributors
My mentor Igor Dinuzzi
Illustrations by storyset by Freepik
Icons (a selected few) by Google material design
Images by Unsplash
Fonts: Proxima Nova