Dubbly
E-commerce/ 2022
phone mockup of dubbly project screen
View prototype

Details

Role: User Research, UX Design, Visual design, Usability testing
Duration:  3 months, Jan 3rd - March 31st 2022
Tools: Figma, Miro, After Effects

phone mockup of Dlvrd project screen

Problem

In my school, the University of Lagos, students with carry-over courses (repeating a course from a previous year) and students with little time for academics hear about new assignments late. They receive little to no assistance in solving them and often forget when their assignments are due because there isn't any way to get reminded. Many regular students find themselves in similar situations often.

Goal

Dubbly should help undergraduates efficiently track, manage and get solutions to assignments.

User
Research

After analyzing the data from my research (interviews), key insights were identified as follows:

key findings from dubbly user research which reads  carry over and very busy students dont get info about assignments on timekey findings from dubbly user research which reads most students get info about their assignments from their various whatsapp groups. This isnt effective as new messages overshadow themkey findings from dubbly user research which reads , many students confirmed they've often forgotten totally about an assignment till it was very close to the deadlinekey findings from dubbly user research which reads, a platform to get solutions to assignments from their peers would be really useful, especially if they'll still have access to these solutions towards exam period
View the Research documentation
here

How this research addressed some of my bias.
1. Bias:
I felt students in year one and two won’t be willing to share their solutions cause most still have this kind  of secondary school mentality.
Research findings:
Surprisingly a good percentage of the research participants in this category said they’ll be willing to share their solutions on an app like Dubbly.

2. Bias:
The Class Rep won’t need to be reminded to do his assignments cause he/she is the one thats going to collect everyones own for submission.
Research findings: 3 out of 5 of the class reps I interviewed said they’ve at least once forgotten to do an assignment.

Ideation

I used the ideation process, known as the "How Might We?" exercise to come up with ideas for some crucial functionalities of the app.

summary of the how might we exercise which reads  Lecturers are not tech savvy and would likely give tassignments the traditional way , When framing this HMW question, I changed the status quo:. How might we create a product that doesn’t need lecturers to function? By making it peer to peer, managed and run by students, with the class governor leading the pack.Students might not be eager to share how they went about an assignment to others. When framing this HMW question, I amped up the good: How might we make sharing solutions to others fun and socially acceptable? By making who shared the solution public information, by adding a feature for coursemates to appreciate with likes and with time enable tipping.Structuring the assignments for the students in a way that is  understandable and effective. When framing this HMW question, I explored the positives:. How might we show whats urgent and a bigger picture of whats pending to the users. By using two modes on the homepage, full mode that shows all your pending assignments and calendar mode that shows assignments for a particular day.

Starting
the Design

Userflow:
Improve and organize the structure to facilitate users in finding and processing the information they want

Students and Class Representative's flow respectively.

Lo-fi wireframes:
I first came up with lots of paper sketches and took my best ideas to my software for the digital wireframes

Usability
Testing

Tasks assigned:

  • Sign up/ Complete the onboarding
  • Upload a solution
  • Change the homepage to the calendar mode
  • Download a new solution posted via the notifications
  • Add a new course
View the Research documentation
here

Study
Insights

I sorted out the usability study findings via affinity mapping on Miro (view here), Then I generated insights and iterated on my designs in order of most important to least important. Here are some of the key insights.

users need better top level heirarchy navigationusers want to be able to switch between calendar and full mode easilyusers want to post solutions and assignments as textusers want to give feedback as comments on assigments and solutions
better navigation which is an iteration on the usability study findings
improved full and calendar mode  which is an iteration on the usability study findings
feature to post solutions or assignments as text  which is an iteration on the usability study findings
comment section added to assignments and solutions  which is an iteration on the usability study findings
assignments can now be sorted  which is an iteration on the usability study findings
sync to calendar apps which is an iteration on the usability study findings

Hi-fi
Design


dubbly style guide, typographydubbly style guide, coloursdubbly style guide, iconographydubbly style guide, ui components

Student's screen Student's screen Student's screen

dubbly high fidelity mock ups, onboardingdubbly high fidelity mock ups, registration, dubbly high fidelity mock ups, home and assignmentsdubbly high fidelity mock ups, assignments, solution and course details screendubbly high fidelity mock ups,  user profile sectiondubbly high fidelity mock ups, upload solution, notifications and downloads screens

Class Rep's screen Class Rep's screen Class Rep's screen Class Rep's screen Class Rep's screen

dubbly high fidelity mock ups,  uploading assignment screensdubbly high fidelity mock ups, updating assignment screen
View the figma prototype
here
It's a bit laggy though due to the size, kindly bear with me.

Hi-fi
Usability
Testing

After completing the high fidelity design, I gathered another 6 participants for another usability study to validate my prototype

Usability study summary:

  • Class rep needs a scale to rate the assignments priority and length instead of a blank slider
  • Users were satisfied with the apps intuitiveness as they were easily able to find their way around the app
  • Users love the new structure of the full (home) and calendar mode
  • Users would love an in app pdf creator/scanner

Iteration:

iteration on dubbly high fidelity design, improved the slider class rep uses to set assignment priority and length

The
END

Challenges faced:

Research:
During the first few interviews I felt I wasn't getting quality feedback. I had to pause, re-strategize, try to make the participant feel more relaxed and free so they could open up to me better and come up with better follow-up questions.

Design guide:
This was my first time using a design system as a guide in my designs. I had difficulties utilizing the Google Material Design for my project, altrering the components to my suite my projects visual theme and some other setbacks

Animation: I tried creating a custom animation for this project on After effects but wasn’t successful. I decided to use Figma I was better at but due to some reason the motion plugins on Figma were misbehaving. Eventually had to use multiple frames on Figma to pull it off

Learnings:

  • Documenting and revisiting my approach along the way would help me understand the reasons behind each stage and better articulate my design selections.
  • Conducting research and validating our assumptions are crucial parts of understanding and ultimately empathizing with our users.
  • Designing a mobile app on your system can lead to sizing errors. Hence I learnt to regularly use the Figma mirror app to have a good idea of what it really looks like

Next steps:

  • Design the dark mode
  • Work on an in-app pdf creator
  • Expand the apps from just assigment/solution sharing to academic resources sharing (class notes and text books)
All these ideas would be first validated by thorough research. The app is currently in development as at July 2022 and is set for launch in December 2022.

Videos

Splash Screen:

Up next

picture linking to am realty projectpicture linking to delivered project