Outreachy internship: Improve the UI/UX for activity and project creation features for ZubHub

[srish]

Learn more about the proposed project here #557 and share your ideas below.

⚠️ For any future applicants landing here, we would encourage you to use our chat channel to introduce yourselves https://unstructured.zulipchat.com/#narrow/stream/246561-general/topic/Introductions. Let's keep the issues and discussion threads on GitHub to the topic related to a specific task.

[wumionwheels]

For project creation, I will suggest breaking it into two steps(three steps, if there is still complain after testing). It will be indicated on top of the page that it is two steps in a fun way. this will users feel less overwhelmed about the procesd

[Temabo]

Yes, I agree with you. I feel breaking it into 3 steps would be better. Step 1 would contain the project details, like the name and description. Then step 2 would be to add multimedia while the last step would be for the materials used, category, tags and viewer setting. This would make it less overwhelming and make it easier for the kids to navigate.

[wumionwheels]

@Fidausym you can start by interacting with zubhub and posting ideas on how it can be improved, you can also back up your ideas with mockup

[wumionwheels]

@Temabo yeah, if two steps are still overwhelming, it can surely be changed to three steps

[Fidausym]

Thank you very much @wumionwheels

[hertafui]

In my opinion, since the form is not complex , I don't think we need to divide it into multiple steps. Keeping it as a single step would be more efficient. The current form appears to be a bit lengthy due to the narrow layout, and it could be further improved.

[wumionwheels]

I also noticed that there is no further action on what a user can do to create activities on the activities page, it will be great to have a CTA button on the activities page telling the user an action that can be made to create activities when there is none. Please let me know what you think @srish

[Mara-mma]

I also noticed it too and I like your suggestion

[judengaba]

You're right, @wumionwheels. We shouldn't make the user feel bad for not having created any activity.
Having a CTA button there would really be great.

[Boluwatifey1]

I would suggest that "others" option be added to the category list in the project creation page and there should be a textbox describe the category instead of choosing None @srish @tuxology

[wumionwheels]

True

[ferindesigns]

None can still be valuable as a user might not want to categorise the project

[ferindesigns]

And also for the categories, can't there be icons before each category to help in identification?

[Fidausym]

I agree, that would help make the process easier for users to understand.

[Boluwatifey1]

I also think that when videos are added to the project,the "a video has been added text" should be in a different color, red probably to make it noticeable to users and it should be a bit bolder than the other texts @srish @tuxology

[wumionwheels]

This is a good suggestion and don't you think green will go better since it indicate success

[Boluwatifey1]

Ohh yes green would be better

[jessjaey]

For the Project, I will suggest use a progress bar in the forms to break it down bit by bit and for the activity creation, there should be CTA like the "create a project" CTA for accessibility. @srish

[wumionwheels]

can we combine the image and video field since both are not a must with a note that they can add both if they want, it can be simplified to-
Add an image or video (you can add both)
@srish and other oureachy applicants, what do yu think?

[jessjaey]

Yes that's more convenient

[Boluwatifey1]

I wanted to say that too

[Fidausym]

Yes, I think that would be a better option

[Mara-mma]

I agree with this suggestion

[iamexousia]

yes, i tottally agree with you, it would just be a media field, which can eithr be video, image or even pdf or audio

[Boluwatifey1]

I don't know if this is a repeated question but are we to work on the mobile interface or web Interface? @srish @tuxology

[wumionwheels]

I think we should work on both

[emmanuellabubakar]

During the signup process on the Zubhub platform, I noticed a few things that can change to improve the UX. Firstly, I like the playful vibe it gives off, with good work on the UX, many children will be happy to use Zubhub.
Based on what I have seen, the ux writing can be worked on to reflect the playful tone the font is giving off and to resonate with the target audience more by choice of words and tone.
Also, at the end of the signup, a reverse mechanism was used regarding receiving updates from zubhub and that is not a very good practice as most people will automatically think that unchecking the box means they won't get updates. Most of our target audience are children, hence we want instructions to be as simple and familiar as possible.

[Mara-mma]

What you said about the reverse mechanism is true, I also left the box unchecked at first thinking that it means I won't get updates, before I had to read it again to and checked the box

[Fidausym]

I saw this whist creating an account too. I had to go through it twice to understand what I needed to do

[Fidausym]

I looked into it. What do you think about this? @tuxology @srish @emmanuellabubakar

[emmanuellabubakar]

Hi @Fidausym, i like the flow, and the updates rewording is definitely an improvement. Welldone!

[funmbiroyal]

Hi everyone! as i got to the landing page, I saw that the top colors are too shouty. A cool color will do and be palatable to the eyes. instead of Red.

[tuxology]

New color palette suggestions are more than welcome 🙏 feel free to submit mockups and variations! 🙌

[wumionwheels]

yeah, a new palette will be cool

[Omotayo1990]

Hi @srish
While going through ZubHub's website I noticed that the "Creative Challenge 2023" block is clickable but a lot of people might not know that even with the "New Stuff!" obviously indicating to it that it is a CTA. It might just look like a design to visitors.
I created an animation below to capture visitors' attention and direct them to take an action on the "Creative Challenge 2023" block.

[Fidausym]

This was very thoughtful.Good work 👏🏽

[Omotayo1990]

thank you very much @Fidausym

[ferindesigns]

Hi @srish
How about these for the project creation form?

[wumionwheels]

this is cool

[Mara-mma]

Yes it is

[Kingjhenny]

Hello @srish @tuxology
I am Jennifer Obuseri, a UX designer who would like to contribute to generating UX ideas and creating wireframes and mockups for the following issue: Improve the UI/UX for activity and project creation features for ZubHub.

I loaded the Zubhub website and I found the UI fun, playful and exciting.

I went into Figma to tweak it and see what I can come up with, without changing the theme of the website.

GOAL

My goal was to make the website more eye-catching than it already was while trying not to make any drastic changes to the website and this is what I came up with.

CHANGES

• I adjusted the placement of the header texts from more of a center-ish placement to align more with the left side of the website.
• I also changed the style of the bottoms from a rounded style to a less rounded and more boxy look while keeping the edge curves, I also changed some of the icon colors to make them more visible and easier on the eyes.
• I also decided to give the banner a bit of a 3D perspective instead of the original 2D look.

I am very open to your opinions and I am very interested in your feedback.
Thank you.

p.s: I posted this on a different threat

[comfy96]

Good idea but I think the shadow given to the 'CREATIVE CHALLENGE CARD' is too much/obvious, try to reduce the X value and the blur, and make it look calm. I also noticed that some of the texts in the buttons look doubled layered thank you.

[Ami112-sketch]

@Emmanuella abubakar
I agree with you, the text copy should be friendly,sound human and has engaging tone" Let's create an account first " sounds too formal for learning based since our target audience (children) . I think we can have something like create an account, join friends and upload project(text copy) just to make it more engaging.
I also noticed that on the signup page the input fields are not consistent and the hierarchy of the text below the bio should be increase(the font size)

[emmanuellabubakar]

Exactly, something enticing to children.

[Ami112-sketch]

@Emmanuella abubakar I agree with you, the text copy should be friendly,sound human and has engaging tone" Let's create an account first " sounds too formal for learning based since our target audience (children) . I think we can have something like create an account, join friends and upload project(text copy) just to make it more engaging. I also noticed that on the signup page the input fields are not consistent and the hierarchy of the text below the bio should be increase(the font size)

@srish @tuxology

Backing up my point is a signup page for both the mobile and web, because i noticed the signup page of zubhub is not responsive on a mobile( alignment of the text is not well placed)
https://www.figma.com/file/qKo6YuKkTagoNyUBXgv3qb/Zubhub-Sign-up-page(Mobile-and-Desktop)?node-id=0%3A1&t=GDuFBh5qN2AwpSzm-1,
This is the figma link

[Ami112-sketch]

@ferindesigns
Nice project form, looks visually appealing
But I think we can make it better by making the text color of back button different(by reducing the opacity) from the submit button. That gives the children a better UX and their attention will be on the submit button, not the two buttons calling for attention at the same time

[wumionwheels]

Please use 'and' when contributing to a person's idea, that will mean you acknowledge them, and you are just to the novel idea they proposed which will help to promote a healthy communication. You made a good suggestion

[ferindesigns]

Thanks, @Ami112-sketch. Will work on it

[Ami112-sketch]

Please use 'and' when contributing to a person's idea, that will mean you acknowledge them, and you are just to the novel idea they proposed which will help to promote a healthy communication. You made a good suggestion

My bad,thank you for pointing that out

[Ami112-sketch]

Please use 'and' when contributing to a person's idea, that will mean you acknowledge them, and you are just to the novel idea they proposed which will help to promote a healthy communication. You made a good suggestion

My bad,thank you for pointing that out

but i did tag her

[wumionwheels]

Yes, you did and you made a nice suggestion too

[Ami112-sketch]

After interacting with the mobile version of zubhub interface. Getting to the landing page,this are few things I noticed and ways to make it better
-All the CTA buttons are calling for attention at the same time and the text copy used doesn't sound personalized

We can make the user experience better with the CTA buttons by:

-Simply the CTA text(text copy):revising the text to be more action oriented. Become our ambassador can be become an ambassador,share your project and explore ideas
Reason is that users love to feel they are in control and personalized to them

• Prioritizing the CTA's buttons by making one of the button more prominent color than the rest of the buttons and also placing then based on their important since they are stacked up on each other on mobile view

[iamexousia]

Good day @srish @tuxology

PROJECT CATEGORIZATION ON HOMEPAGE

Curently, on the homepage, there is no way for the user to select a particular projcet category they want to view. Currently all the projects are shown to the user. As a user, i might be looking for a particular category of projects and i dont want to scroll through different projects, i should be either be able to search for the project or select the project category.

SOLUTION

I redesigned the Project section ofthe homepage to include a category filter, i also color-coded the categories and included them on the project cards, that way a user can easily rcognize either by color or by text which project category they want to view.



Looking forward to your feedback on this @srish @tuxology . Thanks

[comfy96]

I like this idea, infact I thought of implementing it😜, why not list out the categories instead of dropdown so users can click and scroll sideways, plus its well functional on mobile too, see example below

Yeah, this would be great too

[iamexousia]

Nice, would send in the iteration today. Thanks @OloladeOdus

[iamexousia]

Good Evening @srish @tuxology i iterated on the project category feature on the homepage. i researched recent UI practices on categorization on a website and came up with two design styles for the feature.

1. Color-Coded Categories: I color coded the categories n such a way that it aligns with the category color code on the project card. The user cclicks on the category they want and the category gets highlighted and projects under the category are populated on the screen. This color variations adds to the cherfulness of the page and entices the primary users which are kids.

2. Text-based Categories:
   

[Ami112-sketch]

@iamexousia This is a really nice idea,welldone

[emmanuellabubakar]

Good day @srish @tuxology

PROJECT CATEGORIZATION ON HOMEPAGE

Curently, on the homepage, there is no way for the user to select a particular projcet category they want to view. Currently all the projects are shown to the user. As a user, i might be looking for a particular category of projects and i dont want to scroll through different projects, i should be either be able to search for the project or select the project category.

SOLUTION

I redesigned the Project section ofthe homepage to include a category filter, i also color-coded the categories and included them on the project cards, that way a user can easily rcognize either by color or by text which project category they want to view. Looking forward to your feedback on this @srish @tuxology . Thanks

This is very nice @iamexousia , the use of whitespace makes it less overwhelming and more welcoming. Welldone!

[Ololad-e]

@srish @tuxology
I redesigned the options dropdown

[iamexousia]

I like this. welldone.. just one suggestion, can you show the flow for bookmarking, so anyone seeing this addition to the options dropdown can fully understand your thought process..

[Ami112-sketch]

Good day @srish @tuxology

ACTIVITY PAGE

Currently, on the activity creation page, there is no activity uploaded and there is no way for the user to go back to the homepage or a button to tell them what to do/what action to take.
SOLUTION

I designed the activity page for the educators with detailed steps, materials, learning goals, and links to other readings that can help the educator in making learning easier for users/students. Also in a case where there is no activity uploaded, users get the option of either going back to the homepage or creating an activity(that gives users a better experience with the website)

[funmbiroyal]

Hi all. I have not been here for a while now. I broke down. But I am getting myself back now. I don't know if it's too late, The only thing I did 2 weeks ago was the cloning of the project. I don't even know where to start again, as I am been overwhelmed right now

[funmbiroyal]

Thanks, @Wondaland, I appreciate it. I think I remembered laying my hands on the first task. by reviewing the design or something. I saw issues/bugs too. but seems many of them have been assigned and I am careful not to start working on what someone has done or is doing

[yaya-mamoudou]

Hi @funmbiroyal
Sorry about that. Happy to hear that you are strong now ☺️

[iamexousia]

@funmbiroyal im so sorry about your ill-health, i am happy you are getting back on your feet. Dont be overwhelemed, just go through the Zubhub website and im sure you would see areas that you can provide UX solutions to. Also you can check out the 2 major projects open to Contribution.

[Ololad-e]

@funmbiroyal so sorry to hear that, there are two contributions that you can make under Zubhub (Outreachy)

1. Implement UX/UI for new users and grouping feature for ZubHub #559,
   drop your contributions here Outreachy internship: Implement UX/UI for new users and grouping feature for ZubHub #560 (comment)
   2. Improve the UI/UX for activity and project creation features for ZubHub #557
   drop your contribution in this page particularly.

[emmanuellabubakar]

Hi @funmbiroyal sorry about your health, good to have you back here.

[Ololad-e]

@srish @tuxology
My contribution today involved the redesigning of the project creation features from the design I formerly made, It was initially 5 steps but I educed it to 4 steps, starting from the

1. Project Topic or Title: It can be types in using the keyboard or using the mic
   

2. The Add Some Visuals: Visuals may be videos or images,
   Users can add their project description as well as upload a visual in this page
   I iterated using the project features mentioned in Improve the UI/UX for activity and project creation features for ZubHub #557 and added features where "users can add multiple creators to a project" by clicking on the "who else joined in creating", after which Users can search and tag (Add) for registered creators on their project in ZubHub.
   

I choose this format to promote familiarity, as users are already used to tagging features designs.

I also added a feature where users can "add multiple small video clips for project demo that the software itself can then stitch to generate a final video." using the "EDIT VIDEO BUTTON" which leads them to the next page

4. Here users are presented with the next page, where they can add a new video clip from their gadget, and stitch it with the first, and perform other video editing functions like trim video, deleting a clip, splitting clips, redo, undo and more.
   
   

[sethiastha]

@OloladeOdus Very detailed and apt. It will be helpful to add numbers to the categories 1 to 4 (from 'Name the project' to 'Complete').

[Ololad-e]

@sethiastha I can do that, thanks for the feedback

[Ololad-e]

@sethiastha here I made the amendments and labelled the categories in numbers

[comfy96]

Hi, @srish @tuxology @sethiastha What's your take on this?

Problem statement
Improve the UI/UX for activity and project creation features in ZubHub #558. From our feedback, we realized that a fifth-grade student may not be able to input as much information as a tenth-grade student. The goal is to design the form in a way that allows children in the 5th grade to go about their learning activities unsupervised.
Design Thinking.
Empathise and Define :
As a result of the timeframe awarded to this project, I was unable to conduct user research, but I did secondary research by observing other activity-learning software and how children interact with these tools. Some feedbacks include

1. Animation: to engage children while they learn.

2. Songs or sounds: Introduce kids to a range of musical styles, sounds, and themes. kids will love to sing along.

3. Progress tracking: It’s easy to see how much progress a user is making in addition to the display of the total number of activities completed in each category.

4. Customizable Avatar: A character that a kid can choose to represent him or her on the website.

5. Stories: Inspiring prompts and story creation that spark imaginations.

Through this, I was able to improve the interface of the design by making changes to the form and adding a progress tracker, animations, and a video on how to fill the form before going ahead to fill the form etc.

Ideation and possible solutions.
To reduce the number of hours or minutes spent filling out the form, you need to make the onboarding exciting and engaging from the start.
This includes adding accessibility features during the onboarding phase. This could include a screen reader, Free sign up, interactive walkthroughs etc
For the forms, I decided to create an interactive card with the questions flowing and auto-save feature. This helps to ignite a level of excitement in kids through the use of animations. It also helps to improve the user experience with the help of progress tracking at the top that shows how many questions have been answered and how many are left, it also reflects the question you are currently on. For each question, they get to watch a tutorial video on how to answer the question, this makes it easier for the kids to navigate through each screen and answer questions without the help of their parents or guardians.
Another improvement was using suggestion tags with answers to make it easier for users who cannot spell and are without parental supervision and also make it easy to remember the materials they use for their projects just by viewing the suggestion tags. Also, I noticed most of the buttons on the screen are all calling for attention, so the use of a mild color (like reducing the opacity of each color on the screen) for the buttons or making some of the buttons outline buttons will be better.
The rest of the solution is included below;

@sethiastha I shared the wireframes with you last week, these are the designs. let me know what you think. Thank you!

[emmanuellabubakar]

Hi everyone, from the last post I made about carrying out user testing on Zubhub platform (including project and activity creation). I went on to create a UI design from one of the pain points solutions that were listed. I had been tinkering on it to make it functional and aesthetically pleasing and that has been slowing the process for me.

I would really like feedback on it so I can iterate and improve it. Also, they are several ideas on how to tackle the project creation problem which can be found via this LINK but I have decided to go with the idea of "Reducing form fields to project name, caption (brief description), video/image, tags" for this post.

I gained inspiration from Instagram and tiktok as suggested in the project description. I removed some form fields which I felt were optional to reduce the length of the form. In retrospect, I realize that this may affect the content of the post when it is being viewed on the platform. I will love to hear takes on this as well.

@sethiastha @srish @tuxology I would really appreciate feedback, thank you!

[Ololad-e]

@sethiastha @srish @tuxology
This is just me contributing to the interface of the projects page.
I'd like to propose a new feature "lazy loading" its common in creative websites where it is assumed there's no ending to the project displayed just as in Zubhub's projects page.
so I made a quick prototype to describe how it is expected to work.
spec: Its a modernized way to load screen, it reduce number of clicks (instead of clicking on next to view next page always), its intended to be not-ending.

Please check the video below and let me know what you think?

Page.1.-.Zubhub.Contribution.-.Figma.2023-03-23.14-53-12.mp4

[Faridah-ux]

Hey @sethiastha @tuxology @srish Based off, of the problem statement I came up with a screen for the home page, that emphasises on signing up.

What do you guys think ?

[Faridah-ux]

Hey @sethiastha @tuxology @srish , everyone.

With ZubHub needing a User Interface for their grouping feature that allows organizations to create group accounts and add and remove members to them. I came up with a design that could support this feature.

SIGN UP SCREENS FOR ORGANIZATIONS

PROFILE PAGE FOR ORGANIZATIONS
Once a User who is an organization signs up, this is what their profile page would look like. Their profile has an Icon which shows their an organization next to their username.

Below is what their profile would look like when they haven't created any groups.

Below is what what their profile would look like when they have created groups and added members.

INVITE AND REMOVE GROUP MEMBERS SCREEN
One benefit of having an Organization account is the ability for organizations to add and remove members from groups through their profile.

CREATE NEW GROUP SCREEN

HOMEPAGE FOR ORGANIZATIONS WITH PROFILE DROPDOWN

What do you guys think?

[Temabo]

Hi @srish @tuxology , I have been unable to contribute for a while now since my laptop has been bad. I came up with ideas on how to solve this issue but i couldn't send it earlier.
I have simplified the process of uploading an educational activity or project on ZubHub to improve the user experience for both educators and children. I have created a wizard-like form that guides users through four easy-to-follow screens, making it easy for students of any age to feel engaged. The first screen allows users to name their project, add a cover image, and project details. The second screen is for media uploads, where they can add videos, pictures, and a list of materials used to create the project. The third screen allows users to choose a category, add tags, and set privacy settings for their post. The fourth and final screen is for previewing and uploading the project, allowing users to preview the information they have entered and make any necessary edits before submitting.

Screen 1: "Name Project"

• Add a cover image
• Enter project name
• Add project details
  

Screen 2: "Media Upload"

• Add videos
• Add pictures
• List materials used
  

Screen 3: "Choose Category"

• Select category
• Add tags
• Set privacy settings
  

Screen 4: "Preview and Upload"

• Preview project information
• Edit if necessary
• Submit project for upload
  

Screen 5:
The Profile where they see their posts and profile details.

Figma Link: https://www.figma.com/proto/A1GYQtENXSmPUzB63MTgPj/outreachy?node-id=201-1200&scaling=scale-down-width&page-id=46%3A387&starting-point-node-id=192%3A554

[Fidausym]

I love the auto save feature, it’d help users a lot.... great work 👏🏽

[waju-ire]

Hi @sethiastha @tuxology I created a sign up process that will engage users from start to finish from the sign up page to email verification to completing profile. The reason I went along with creating a profile completion page as a different element from the sign up was to ensure new users had a short time to register and the option of choosing to complete their profile or not after registration. This way they could move on to other activities like creating projects or adding up collaborators and fill in their details later.

You can interact with the full prototype here:
https://www.figma.com/proto/8Vh5ThipbNMuMuO7A6jd4H/Zubhub-Iterations?page-id=27%3A2752&node-id=87-2620&viewport=-505%2C530%2C0.09&scaling=min-zoom&starting-point-node-id=87%3A2620

[Faridah-ux]

Hey @sethiastha @srish @tuxology ,everyone.
After brainstorming solutions to the problem statement, to help keep users engaged by following up with them via email with next steps if they leave without creating a project and to share with them some activity ideas. Sending them a notification whenever someone liked their project, left a comment on it, or when they earned a badge. I came up Newsletters as a solution, to avoid users from thinking we used deceptive patterns or infringed on their privacy by sending them emails or notifications when they didn't sign up for any of that.

I included a Newsletter section on the homepage, for users to subscribe too, so they get latest tips and updates on ZubHub through their emails. These emails would include sending users next steps if they leave without creating a project and sharing with them some activity ideas and tips on how they could earn badges.

What do you guys think?

[khallow7]

Hey @tuxology @srish @sethiastha
I apologize for submitting my contribution at the last moment. Recently, I underwent a surgery, and I am recovering from it. It's late, but it's better than giving up, and I would rather not give up and miss this one.

Reimagining Zubhub.

I overhauled the home page because there were many issues and came up with a complete new design that solved a lot of the issues.

Introduced new font's that better aligned with the target audience. Tone down the colors and introduced some new harmonous colors.

Take a look at the prototype of the homepage here: http://bit.ly/3m12O3U

My design decisions were based on a heuristic evaluation of the website's design against a set of best practices and usability principles.

Browse the file here: http://bit.ly/3nKv5wo

I also improved the signup flow
Take a look at the prototype here : http://bit.ly/3m3fJT2

Improved the project creation phase. Simplified the overall flow of the project creation process
Take a look at the prototype here : http://bit.ly/41eqqBl

And at last browse through the process and files: http://bit.ly/3zrTHMN
I was unable to contribute the way I wanted due to unforeseen circumstances. But I hope these designs will be helpful.

[Ololad-e]

@srish @tuxology @sethiastha

• I redesigned the profile page, with the idea of making it look like a dashboard.
• The existing design has a confusing tabs like the comment section which I redesigned as "what's on your mind?"
• I also rethought the following, followers and projects section, and its still clickable as indicated in blue colour.
• I added a direct button to create a project to the project section, since no project has been uploaded (I actually removed the button from the top nav bar)
• I also added a button to create an activity directly from the profile page.
• I redesigned the edit profile button as well as the badge.