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

[srish]

⚠️ 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.

ZubHub is an open-source, documentation & collaboration tool for activity-based learning. It is available for custom use for schools, libraries, hackerspaces, educational organizations, etc. Imagine your own online community built around your educational activities!

ZubHub allows educators and children to upload an educational activity or project via a form. This process is lengthy; many fields in both forms require lots of information. Overall, it has room for significant improvements on the user experience and design front. Our educators' feedback was that a "5th-grade student will not be able to input as much information as a 10th-grade student". Keeping this super valuable feedback in mind, we want to simplify the design so that students of any age can feel engaged. Some examples of how we plan to achieve this - are reducing the fields, allowing for more visual or audio input (e.g., voice clips) rather than words via the form, having a step-by-step, wizard-like form rather than a single one, providing prompts for adding multiple small video clips for project demo that the software itself can then stitch to generate a final video. A few new features to incorporate would be adding multiple creators to a project, an auto-save feature, and various project-sharing options (registered users, non-registered users, etc.). You can explore the project creation by signing up and logging into ZubHub here https://zubhub.unstructured.studio/projects/create.

Similarly, for educators, we have a form that is very lengthy and designed to port specific activities like Unstructured Studio developed https://kriti.unstructured.studio/ to ZubHub. After a few user interviews with educators, we also want to simplify the activity creation process and make it concise. One educator shared: "When I conduct activities with my children, I just pose a challenge question, show them some demo videos and inspiring examples and encourage them to get started".

For this project, you will work closely with a designer who will help generate ideas for how the UX/UI will look and develop wireframes and mockups. Your task will be to code and implement them. You will be doing full-stack development and testing on both the frontend and backend web application.

Skills required: Python, Django, React, Javascript, HTML, CSS,
Mentors: @tuxology, @srish
Microtasks: https://github.com/unstructuredstudio/zubhub/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22 (non-ux issues only)
Join the discussion: #558

[srish]

If you have any questions, want to share ideas, or take part in the discussion, join here: #558

[srish]

Hi all! Thanks for introducing yourselves. 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.

[ferindesigns]

Hi @srish Could we suggest new features that can be added?

[tuxology]

@ferindesigns Yes, please join discussion at #558

[Ololad-e]

Hello @srish
I'm Ololade, an outreachy applicant. I'm excited to make contributions to Zubhub!!

After registering on Zubhub, I created a post to experience the existing user interface for creating a project, I was able to brainstorm some ideas to improve the experience.

Here are the ideas I came up with for the interface of project creation page and I offer explanations below
I created a side navigation menu to make the experience seamless and phases easily accessible to users,
I shortened the phases to 4 including the preview page
I added colours and background illustrations to the interface to make it look more interesting
I also did some content writing by tweaking the contents in some sections (its open to improvements).

PHASES

1. This is the first page of the project creation.
   Features:
   Side Nav menu: enables the visitor access and view all the steps to create a new project at once without scrolling.
   Also a brief explanation is offered on what each phase/ step entail even before the user opens it.
   The text and form to fill to enter a preferred project name, at the press of enter, the user will be directed to the next page which
   

2. The second page is the Description of project which I nested with picking Project Category; this was done to enable user easily access the category selection when describing the project without having to juggle through pages, and also incase the user changes his mind to post a different project instead.
   Features:
   Side Nav Bar
   Buttons:
   Back btn; to navigate back to home page previous page
   Proceed btn; to proceed to the next page
   *Form; to fill description of the project and editing components.
   AND for selection of project category
   

3. Add Visuals
   In this page, I compressed all the available ways of uploading a visual and inputting material used for creating the project
   NEW!!
   a. I noticed most website now have the drag and drop feature which is not present in Zubhub, so I decided to included it, to make the experience easier.
   b. While uploading, I noticed I couldn't see how the file is being uploaded, and I felt displeased because the file I was uploading was quite heavy and I didn't know the estimated time for it to be completely uploaded.
   I also noticed that I didn't see a preview of the file and I could not remove it and also I could not upload more than one file (even images); so I designed a feature to preview when the file is being uploaded, when uploaded and it can be removed.

4. Settings (As I've called it)
   This page is contains the tag selection and selecting who can view the project
   I also redesigned the tag output as the existing UI, doesn't look user friendly when many tags are entered.
   

5. Complete: this page does not initially exist, I came up with it due to my experience when experiencing the UI. after selecting my pictures, I clicked enter and automatically my project was posted, even when I hadn't finished setting up project contents, I didn't like it (but luckily edit button saved the day); this is my inspiration for creating a complete page to make the user see a preview of what the contents would look like and opportunity of proof-checking & editing before proceeding to post.
   

I plan to have users test the existing project creation form and mine to get more feedbacks on how to improve it!

This is the summary of my ideas, I'm open to feedbacks and having discussions on how to make the UX better!
Please let me know when you are available to have discussions with me.
That was a really long one (smiles) CaNt FiNd EmOjIs. Thanks for reading through

[Fidausym]

@OloladeOdus . Hey, I love your work process. This actually made the account creation process more easier and understandable. I love the Side Nav bar feature and how it simply swallows all the clutter. Good work👏🏽👏🏽👏🏽

[Ololad-e]

@OloladeOdus . Hey, I love your work process. This actually made the account creation process more easier and understandable. I love the Side Nav bar feature and how it simply swallows all the clutter. Good work👏🏽👏🏽👏🏽

Thanks, there's more to improve

[tuxology]

@OloladeOdus Thanks for very nice suggestions and the whole process of rethinking this flow. Nice approach 🎉 Can you post this on #558 as well so we can track this there? Also, feel free to create a new discussion group for #603 so we can brainstorm there before creating an issue!

[Isi-Irabor]

Website Issues I noticed:

1. I noticed a lot of padding issues on the website, especially the sign up and log in buttons at the top.

2. The button colours should be more consistent and the "Be our ambassador" button is a bit hard to read because of the colour contrast

3. The creator names could sometimes be extremely long and there is a lack of uniformity between actual names and emails. Also, the "creator" buttons can sometimes be squished with very long names, so i suggest it should be moved below to join the other buttons so it doesn't look compressed.

4. The padding and text aligment is also off here, so that needs to also be changed.

5. The title and creator names are a bit awkwardly placed, so I intend to work on that too

These are just a few things i have noticed that need to be worked on and i will make a few mockups and send the png here for review. Thank you @srish @tuxology

[Fidausym]

Hello @srish @tuxology and everyone. I looked into the project creation feature and these are what I noticed.

• I felt the page was too overwhelming as it had a lot of content on a single page.
• I also noticed some confusion with the add video and add picture features. It wasn’t clearly stated if these were optional or not.

So based on these issues I decided to redesign the pages. I made use of a progress bar to help indicate the progress and steps involved in the project creation, which I had created based on similarity and priority.

First page: Project detail. I picked every question related to the project detail and fixed them under here.

Second page: Add video and photo page. Here I decided to add a cover photo feature were users get to decide the thumbnail for their project. I also used simple words to explain each step. To make it more easier for users I joined the add video and photo together and also added an optional cue beside it

Third page: Add tags page. As I said I created each step based on priority and similarity. After explaining each feature I added optional cues

Fourth page: Project visibility page. This page was created to give more focus and thought on the option of choice. Still using the sites format, I explained the feature and how it would work,

Fifth page: The congratulatory page. The goal was also to make the page more friendlier and interactive. I decided to use an illustration, a congratulatory text and a “review project” option and a “back to homepage” option for users.

Thank you for going through this. I’m looking forward to your feedbacks as that would help me build better solutions.
What do you think about it @srish @tuxology

[KramStyles]

I love your design @Fidausym . Great work.. Can there be more space in the Browse Activities section? it's a bit too close to the edges..

[Fidausym]

I love your design @Fidausym . Great work.. Can there be more space in the Browse Activities section? it's a bit too close to the edges..

@KramStyles thank you so much for your feedback. I’ll work on it😊

[Faridah-ux]

Hello @srish @tuxology
From the problem statement given, I was able to come with a few User Stories for two users

1. As an Educator in a big school with a busy schedule, I want to be able fill forms and post projects as fast as possible, so that I can attend to other urgent matters.

With that being stated I was able to design a few screen that could help solve the user's problem with the use of an assistive technology called Speech to text. Where Users compose text by speaking into their phones or computers and the voice recording is automatically turned into text. This helps users fill forms as soon as possible.

2. As a student who has been given a group project, I want to be able to add my remaining group members to a project, so that it appears on their dashboard and my teacher knows we worked together.

With that User story I was able to design a field on the create a project form from Users to add other creators, so that everyone who worked on the project is included, this improves the User's experience and keeps them on a happy path.

Based on the problem statement I was also able to add an auto save feature on the form, so that everything a user has filled on the form automatically saves and goes to the draft even if they haven't published it yet.

I improved the UI to make it a bit more calm compared what the current ZubHub's website has.
As seen in the design I added a few features to the screen like the Auto-save feature, add multiple creators or co-creators, a speech to text assistive technology for users with disabilities. I also added suggestion tags to improve the User experience

I also broke down the form into three steps to make it less strenuous for Users when filling the form. Also added an add more photos or more videos button incase users want to add more pictures and videos or even delete a picture before publishing it.

The screen above has a preview project button to help users preview the form before publishing to avoid mistakes.

When a user selects the preview project button, the just completed form previews. Here users still have a chance to edit whichever segment they want before finally publishing it, with an edit button on each segment.

What do you all think? Please I'm open to suggestions and corrections. Thank you.

Regards,
Faridah Ejibunu

[khallow7]

Great concept @OloladeOdus

Here are a couple of UI fixes that you might want to incorporate in your design.

Always make sure to check contrast for accessibility

The contrast level of input fields is low, and it would be hard for users with bad eyesight to see them.

Adding a secondary “Save to Draft” button near the main CTA button will be best, even if the auto-save option is available, so that users won't have to worry about not knowing. We can replace the back button text to a back icon and shift it's place.

I hope these things are helpful to you!

[Ololad-e]

Great concept @OloladeOdus

Here are a couple of UI fixes that you might want to incorporate in your design.

Always make sure to check contrast for accessibility

The contrast level of input fields is low, and it would be hard for users with bad eyesight to see them.

Adding a secondary “Save to Draft” button near the main CTA button will be best, even if the auto-save option is available, so that users won't have to worry about not knowing. We can replace the back button text to a back icon and shift it's place.

I hope these things are helpful to you!

Thanks, noted

[comfy96]

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

Problem statement
Improve the UI/UX for activity and project creation features in ZubHub #557. 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

• Animation: to engage children while they learn.

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

• 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.

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

• 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.

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 colour(like reducing the opacity of each colour 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 as a wireframe.

Wireframes:
Prototype:

These are my approach to the problem statement, I'm open to discussions and feedback. thank you.

[SafeEHA]

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

Problem statement Improve the UI/UX for activity and project creation features in ZubHub #557. 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

• Animation: to engage children while they learn.
• Songs or sounds: Introduce kids to a range of musical styles, sounds and themes. kids will love to sing along.
• 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.
• Customizable Avatar: A character that a kid can choose to represent him or her on the website.
• 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.

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 colour(like reducing the opacity of each colour 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 as a wireframe.

Wireframes: Prototype:

These are my approach to the problem statement, I'm open to discussions and feedback. thank you.

Hi @comfy96
Your designs are great, I would love to implement them @srish please can you assign the implementation to me

[Fedybee]

Hello @srish @tuxology
Good day, My name is Ufedo, I am an outreachy applicant. I'm excited to make contributions to the Zubhub project.
After going through the requirement of the given task, I familiarized myself with the current user interface for project creation and was able to generate some ideas to enhance the overall user experience.
"After considering the interface for project creation, I developed several ideas for improvement, which are explained below:

To create a seamless user experience,

I created a top navigation menu that allows users to easily see and access different phases of the project.
To make the interface more visually engaging, I added colors, attractive pictures, and background illustrations.
I opted to depart from the original color scheme utilized on the zubhub landing page and instead, incorporated soothing yet captivating colors to create a relaxed atmosphere for my design. However, I made sure to retain certain elements such as the logo and icons.
I tweaked the content in some sections to improve user understanding, though I'm open to further improvements in this area.
I also noticed there wasn't a social media contact on the original design and I made sure it was included in mine.
Below are my designs I'm open to feedback and having discussions on how to make the UX better! Thank you

Create project page

Be our ambassador page

@srish @tuxology Please check out my design. your advice and corrections will be highly appreciated. Thanks

[emmanuellabubakar]

EDESIGNING THE VIDEO SCREENING @srish @tuxology On suggestions from @darechan

My thought process when designing was to create a minimal page for screening videos. I decided to put all the components in the hero part of the page, so users do not need to scroll for them to see all the video part entails (even though I was planned to put video suggestions or similar videos down the page, this can increase retention time as users would juggle through the videos, they spend more time, it doesn't exist on the page as of now) Then the video for the model page is from a youtube link, so I'd think the video format is youtube generated (let me know if its not). The lower part of the left section contains details about the video (title, who uploaded, when uploaded, how many have seen the video, likes or clap (I personally wanted to change the icon to like icon but i just decided to go with the clap since users might be used to that already). It also have buttons like share (which leads to a modal window, where users can copy link or share on social media like Facebook or Whatsapp; I included Instagram. also the bookmark btn and more btn ( which opens report option)

The Left side contains The description, materials used category tags and comments PROTOTYPE VIDEO https://user-images.githubusercontent.com/64203558/225087827-b404af9b-9f61-413d-909e-ebda6e9b3deb.mp4

@darechan

@srish @tuxology I redesigned the dropdown Options

Hi @OloladeOdus I really like your design. That "start video from "1:20", brilliant!
Few suggestions though. Can you look for a darker shade of yellow that contrast with the white better as I have observed from the design I am working on now that the white on yellow does not meet accessibility standards . Also can you use more of secondary buttons for actions that are not very crucial to the task at hand so they don't call unnecessary attention and distract the children.

[Ololad-e]

REDESIGNING THE VIDEO SCREENING @srish @tuxology On suggestions from @darechan

My thought process when designing was to create a minimal page for screening videos. I decided to put all the components in the hero part of the page, so users do not need to scroll for them to see all the video part entails (even though I was planned to put video suggestions or similar videos down the page, this can increase retention time as users would juggle through the videos, they spend more time, it doesn't exist on the page as of now) Then the video for the model page is from a youtube link, so I'd think the video format is youtube generated (let me know if its not). The lower part of the left section contains details about the video (title, who uploaded, when uploaded, how many have seen the video, likes or clap (I personally wanted to change the icon to like icon but i just decided to go with the clap since users might be used to that already). It also have buttons like share (which leads to a modal window, where users can copy link or share on social media like Facebook or Whatsapp; I included Instagram. also the bookmark btn and more btn ( which opens report option)

The Left side contains The description, materials used category tags and comments PROTOTYPE VIDEO https://user-images.githubusercontent.com/64203558/225087827-b404af9b-9f61-413d-909e-ebda6e9b3deb.mp4

@darechan createproject createproject2

@srish @tuxology I redesigned the dropdown Options dropdown

Hi @OloladeOdus I really like your design. That "start video from "1:20", brilliant!
Few suggestions though. Can you look for a darker shade of yellow that contrast with the white better as I have observed from the design I am working on now that the white on yellow does not meet accessibility standards . Also can you use more of secondary buttons for actions that are not very crucial to the task at hand so they don't call unnecessary attention and distract the children.

@emmanuellabubakar thanks so much for the feedback, can you text the yellow colour code here so i can try it, by secondary colour, do you mean the yellow?

[robotdiner]

Hi, I'm Nandini! These are my ideations for the Activity creation. I thought a lot about making something fun, engaging and not tedious

1,2. What if the robot overlord of Zubhub took you through the activity creation process? What if they gave you instructions, confirmed when your steps were saved?

A similarly interactive way, with a listed steps bar so you can see how far you've some, almost ready to finish so that you're eager to complete everything

What if your process was like a moving pathway/tree that moved further and further as you went? Plus simple illustrations along with it

What if we had a short video of how to do each step (for example, uploading pictures) so they know how to do what they need?

A progress bar that shows you how far you've come along would keep you engaged with the process

Going through ideation, I realised that an interactive, step-by-step wizard like design (as the brief mentioned) would be ideal for users to understand how to go through the entire process. A character that helps you through the process, tells you what to do next and what not to do, would help them not get intimidated. Thus, I set off to make prototypes

[robotdiner]

To support this idea, I made quick doodles of a little friendly character called Zubby that would be your creation companion!

Here, Zubby is shocked because there was some mistake (for example, the images may not have been uploaded. It can also be used to say "wow! that's really good work")

Here, Zubby has a thumbs up to say "good job! your work is uploaded"

Here, Zubby says hi to users to get them started

[robotdiner]

Here are my iterations for the project screens.

I was very inspired by Typeform's interactive form filling for this. The left is Zubby's space, where you get instructions and feedback, and the text entry on the right. A little progress bar tells you how far you're coming along. Clicking Enter scrolls you ahead to the next step. Another iteration of this

Going into the tree branch idea, I made a little platform with an illustration marking the step, and as you finish one step it moves down to the next step of the tree. This would help give a sense of progress

The tree branch remains, but Zubby makes a comeback here and helps you through everything.

Thanks for going through all this, please share your thoughts with me, I'd love to hear what you think, like or dislike. Excited to design this further :) I intend to fixate on one and polish it further

[robotdiner]

I made a prototype for project creation, please do check out the gif below:
https://giphy.com/gifs/KyiVRNx1zkb2rx0YjX

I'd really love to hear your thoughts, the good and the bad. Thank you.

[robotdiner]

Post this, I wanted to try out a user flow that would feel shorter than the existing one. Currently, the project creation is designed as a list, which involves a lot of scrolling and feels lengthy. Here, the project creation format is similar to, say, a social media feature, where you can quickly upload content, add a caption, tags and done! The category and materials option is still placed here, but they can be optional or removed entirely to help the process.

I started off with sketching out some possible iterations, where it could be a full screen post creation or an overlay screen. Since my goal here was to create a quick and simple experience, I chose an overlay design in the end

Instead of starting off with writing text, you add the highlight of it all, the visuals(images and video).

Once uploaded, the images and videos get highlighted in your post editor, which you can scroll through to check that you've uploaded the right content.
The description and tags are the secondary tasks, done once you've uploaded all tasks. Note the "save as draft" button before the Next button. Instead of having to go right at the end to save it as a draft, you can save it here itself and get back to it later.

Finally, the details. Here you can add a description, the category is designed as a tag which you can scroll through and select.

(Updated screen)Finally, an acknowledgement that your work has been shared with the community.

[robotdiner]

Hi @Fedybee, I like your addition of visuals, it adds a nice humanness to the site!

There's some alignment issues in the search bar, the projects dropdown and search text should be center aligned to the search bar. Also, in the post creation page, I think a flow state where the current stage is highlighted would be really helpful too. I hope this helps :)

[Fedybee]

Hi @Fedybee, I like your addition of visuals, it adds a nice humanness to the site!

There's some alignment issues in the search bar, the projects dropdown and search text should be center aligned to the search bar. Also, in the post creation page, I think a flow state where the current stage is highlighted would be really helpful too. I hope this helps :)

Ok thank you so much @robotdiner noted I will make adjustments to the designs.

[Fedybee]

Hi, my name is Ufedo,
Here's the adjusted version of my design. I worked on the alignment as mentioned by @robotdiner and I came up with a better-aligned design. I hope to come up with more pages. thanks, @srish @tuxology Please what's your take, I am open to corrections. Thanks

[Fedybee]

[Fedybee]

Here is the link to the prototype of my design.

https://www.figma.com/proto/YgRpogDOMai96ZGCHyaGLs/Untitled?page-id=0%3A1&node-id=1-432&viewport=170%2C201%2C0.23&scaling=scale-down&starting-point-node-id=1%3A658

[Fedybee]

@srish @sethiastha @tuxology Please I have a question, what date should I fill on the outreachy dashboard, as the date on which my contribution was accepted or merged.

[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 harmonious 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.

[srish]

This project is almost complete. Any remaining bits and pieces will be promoted as tasks via next round of Outreachy.