Generate UX ideas and create wireframes and mockups to guide the development of ZubHub's new features

[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!

Through Outreachy, the two new projects we are promoting for ZubHub are about a) improving the user experience UI/UX for activity and project creation features. b) implementing UI/UX for new users and grouping feature. You can learn more about the requirements for each of the projects here: 1] Improve the UI/UX for activity and project creation features for ZubHub 2] Implement UX/UI for new users and grouping feature for ZubHub

As the designer, we want you to generate UX ideas and create wireframes and mockups to guide the development of ZubHub's new features. You could explore modern-day digital media platforms like Instagram, Snapchat, Instructables, Scratch, and DIY.org to gain some inspiration for suggested UI/UX. You will work with two developer interns who will implement the UX/UI that you will develop:

Relevant links: https://userguiding.com/blog/first-time-new-user-experience/ https://instagram.com/ https://www.snapchat.com/home https://www.instructables.com/
https://scratch.mit.edu/ https://diy.org/

Skills required: Wireframing, Rapid Prototyping, Research, Visual Communication, Familiarity with design tools such as Figma Mentors: @sethiastha, @srish, @tuxology Microtasks: Generate UX ideas and create wireframes and mockups for some of the small features shared in #557, #559 Join the discussion: XXXXXXX

[srish]

If you have any questions, want to share ideas, or take part in the discussion, join here: https://github.com/unstructuredstudio/zubhub/discussions/562

[OSETIEMORIA]

Hi there @srish and everyone, I'm Osetiemoria Ebelubhuhi, UI/UX Designer from Abuja, Nigeria. I'm an Outreachy contributor for May 2023 Internship round. I'm passionate about learning and education and excited to contribute to this project.

Looking forward to getting acquainted and collaborating with everyone on the generation of UX ideas, wireframes & mockups to guide the development of ZubHub's new features.

[Rosietta-UIUX]

Hello @srish and everyone, I am Busola, an Outreachy Contributor, Looking forward to collaborating with everyone on the generation of UX ideas, wireframes & mockups to guide the development of ZubHub's new features.

[ghost]

Hello @srish @sethiastha @tuxology, I am Mansi from India. I'm an Outreachy contributor for May 2023 cohort. I am very excited to learn and collaborate with everyone to generate UX ideas, wireframes and mockups for ZubHub. I am interested in this project and wanted to know more about how I can make a contribution and what type of contribution I should make in the contribution period.

[Fidausym]

Hello @srish and everyone. I’m Fidausi Mohammed, A junior UI/Ux designer from Nigeria. I’m an outreachy contributor for the May 2023 internship cohort. I’m passionate about creating user friendly solutions to user problems. I’d love to be of help by contributing to the brainstorming and creation of wireframes and hi-fi mock-ups which would help improve the overall experience for ZubHub’s users

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

[andreasSune]

Hello i am Andreas Sune, UI/UX designer. I am an outreachy contributor for may 2023 cohort and i'm so excited to contribute on this project.

[emteehi]

I decided to work on the issue adding multiple creators. I took sometime to understand why there is a need for adding co creators in the first place. After reviewing the need for adding multiple creators to Zubhub, I discovered several reasons why this feature would be beneficial. Initially, I assumed that creators and co-creators would be working together from scratch. However, upon examining the current create project feature, I realized that users are able to upload videos or images of projects they have already worked on. This indicates that Zubhub is being used as a platform for showcasing completed works as a portfolio. I concluded that: The addition of multiple creators allows users to properly credit all contributors involved in a project. This promotes transparency and collaboration, and also makes it easier for creators to showcase their work and collaborations in Zubhub.

Overall, by adding the multiple creators feature to Zubhub, creators can gain recognition for their work and build their brand through increased visibility and collaboration.

After making my own research, i decided to reach out to an art educator to confirm if this is an actual problem, so i can come up with appropriate solutions.

1. Could you tell me a little about yourself and your experience with creating educational content? Ans: I am a 27 year old artist and i teach people how to draw. I have been creating art contents on my youtube for 3 years now.
2. How do you currently collaborate with other creators or educators when creating content? Ans: I have never collaborated on a content before, but if i am to do that it will be with someone that has same passion and beliefs as me.
3. What tools or platforms do you typically use to manage collaborations? Ans: I would still use youtube if i am to do any collaborations at the moment because i understand how it works
4. Have you ever faced any challenges or limitations when collaborating on a content? Ans: There is usually no clear communication, that is why i dont do it.
5. How do you typically give credit to other creators or educators you work with on a project? Ans: By giving a shout out to the person or tagging them in my youtube.
6. How would you feel about a feature that allows you to add multiple creators to a project on Zubhub? Do you think you would use it? Ans: I think that is nice, it gives both the users credit.
7. What benefits do you see in being able to credit multiple creators on a project in Zubhub? Ans: It will increase our audience reach, that means increasing the impact we have on kids ready to learn.
8. Are there any additional features you would like to see in Zubhub that would further facilitate collaboration on educational content? Ans: I don’t know
9. Is there anything else you would like to add or any suggestions you would like to give for improving Zubhub? Ans: For now, no

Brainstorming and sketching: I decided to brainstorm ideas on what the screen should look like and i came up with three variations. N:B; the create project still have a lot of work to be done and i am currently working on adding progress bars and making useful corrections. Design variation 1: I added the "add multiple creators" feature at the top. When a user clicks on add multiple creator, it shows this popup

Design variation 2: I added the add creators feature at the top corner of the form When a user clicks on add multiple creator, it also shows this popup

Design variation 3: I added the add creators feature in the form, so that when a user finishes inputting all the necessary information, they can add co creators if they want to and then publish the project. When the user adds a co creator it shows this screen

What Next for me? I will conduct interviews to be able to choose a design I will then design the hifi fidelity and prototypes After then I would move on to work on the other features.

My thoughts; The create project page needs to be redesigned and progress bars should be added, which I am currently working on. I am also opened to ideas on how to make this design feature better @srish

[emteehi]

@tuxology can you check this out?

[amogbe-esther]

My ux contribution for an auto save feature,I took my time to understand the process of auto save feauture and its impact on users. giving users a top notch experience helps retaining users and sharing the good experience about the product. Zubhub creators require an experience with zero anxiety or fear of losing their progress infusing the backend feature into the user interface design helps the creator to

Reduce the anxiety of losing their work progress It gives users an assurance that their work progress is being saved. It gives peace that whatever interruption occurs the progress is still intact.

So i carried out a user research on the auto save feature by asking this questions

Will the auto save features be helpful? As a creator would you like to have a feature that auto saves your progress? When creating content have you lost your progress due to it not being saved manually? Was it a good experience or a bad experience? How did you feel about it? How important is it for you to have an autosave feature in the application you are using? What time interval do you expect your work to be saved automatically? Should it be every few seconds or minutes? Would you prefer to have control access to the autosave features or would you prefer it runs automatically without user intervention.
What type of feedback or confirmation do you expect to see when the auto save feature is running or when your work has been saved? Are there any specific concerns you have about auto save, such as data privacy or data loss prevention? How do you think the auto save feature should be integrated into the user interface? Should it be visible or hidden from view? Do you have any suggestions or ideas for how the auto save feature could be improved or enhanced to better meet your needs? From my research I was able to find out that creators would like to have an autosave feature that is accessible to them, having a user control of the autosave features whereby they have the flexibility and access control. Having a visible autosave feature that gives an assurance that their work has been saved.

Infusing the autosave feature can come on board on the user interface as draft and history, For the creators, it saves as draft. The content is being uploaded that way it saves the process to avoid any loss of progress. For viewers, it is saved as history and the content you are watching can be returned without any difficulty.

Having this auto save in this order gives the user an assurance that their progress has been saved without anxiety of lost work or wasted effort.

With this research I was able to come up with a sketch and wireframe on how to input the auto save feature in the design and accessible to users.

@srish would appreciate if you can check this out. Thank you.

[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

[Ololad-e]

@amogbe-esther nice idea on the auto save project feature, it'd better create trust in the user as they're sure to never lose a file they're trying to upload. I have more ideas on how to improve that, I would inbox you, I hope to collaborate with you to better improve the idea

[Atinukepamper1]

@tuxology @srish please kindly look at my observation and wireframes for zubhub features After going through the documentation for "Implement UIUX design for new users and grouping feature for zubhub" I was able to deduce some key features on the first part of ZubHub website which are stated

1. Tutorial guide on what Zubhub is all about, how it works and how to use

2. Zubhub user is sectioned into individual ( children and adult) and organization ( group or team)

3. follow up email/message to users

4. notification for project comment and clap

5. individual and organization sign up

6. organization being able to add/remove members I came up with a few solutions for these and designed a few sketches to show it

7. when new users open the ZubHub website, a tutorial guide/video is displayed on the right side of the hero section can be watched to give user a full description of what the website is all about and also showing the navigation process

8. When user clicks on the "sign up" CTA, this will take user to a screen where where they get to choose if they are signing up as an individual or as an organization. This is to make the sign up process smooth

9. The individual sign up process of zubhub website is too chocked up with field in one screen, i changed in into a step-by-step process in other to engage user and also added some fields option that is not on sign up page

10. The organization sign up process of zubhub website is is added so that organization can an interactive sign up process, this is also a step-by-step process in other to engage them

11. a CTA "add members" is added on the dashboard page of an organization profile. when clicked a form where organization can add team members by inviting them through mail and a cancel button to remove a team member

These are few suggestion and wireframes sketches i came up with, please i am open to correction, feedback and task issues assignment.

[Faridah-ux]

@amogbe-esther nice idea on the auto save project feature, it'd better create trust in the user as they're sure to never lose a file they're trying to upload. I have more ideas on how to improve that, I would inbox you, I hope to collaborate with you to better improve the idea

Yeah sure, I'm willing to collaborate to better improve the User experience

[amogbe-esther]

@amogbe-esther nice idea on the auto save project feature, it'd better create trust in the user as they're sure to never lose a file they're trying to upload. I have more ideas on how to improve that, I would inbox you, I hope to collaborate with you to better improve the idea

Alright

[amogbe-esther]

@amogbe-esther nice idea on the auto save project feature, it'd better create trust in the user as they're sure to never lose a file they're trying to upload. I have more ideas on how to improve that, I would inbox you, I hope to collaborate with you to better improve the idea

Yeah sure, I'm willing to collaborate to better improve the User experience

Thank you

[amogbe-esther]

@amogbe-esther nice idea on the auto save project feature, it'd better create trust in the user as they're sure to never lose a file they're trying to upload. I have more ideas on how to improve that, I would inbox you, I hope to collaborate with you to better improve the idea

Yeah sure, I'm willing to collaborate to better improve the User experience

Thank you, Alright.

[Faridah-ux]

@amogbe-esther nice idea on the auto save project feature, it'd better create trust in the user as they're sure to never lose a file they're trying to upload. I have more ideas on how to improve that, I would inbox you, I hope to collaborate with you to better improve the idea

Yeah sure, I'm willing to collaborate to better improve the User experience

Thank you, Alright.

I'd send you an email shortly

[blessingpeters]

@tuxology @srish please kindly look at my observation and wireframes for zubhub features After going through the documentation for "Implement UIUX design for new users and grouping feature for zubhub" I was able to deduce some key features on the first part of ZubHub website which are stated

1. Tutorial guide on what Zubhub is all about, how it works and how to use
2. Zubhub user is sectioned into individual ( children and adult) and organization ( group or team)
3. follow up email/message to users
4. notification for project comment and clap
5. individual and organization sign up
6. organization being able to add/remove members I came up with a few solutions for these and designed a few sketches to show it
7. when new users open the ZubHub website, a tutorial guide/video is displayed on the right side of the hero section can be watched to give user a full description of what the website is all about and also showing the navigation process
8. When user clicks on the "sign up" CTA, this will take user to a screen where where they get to choose if they are signing up as an individual or as an organization. This is to make the sign up process smooth
9. The individual sign up process of zubhub website is too chocked up with field in one screen, i changed in into a step-by-step process in other to engage user and also added some fields option that is not on sign up page
10. The organization sign up process of zubhub website is is added so that organization can an interactive sign up process, this is also a step-by-step process in other to engage them
11. a CTA "add members" is added on the dashboard page of an organization profile. when clicked a form where organization can add team members by inviting them through mail and a cancel button to remove a team member

These are few suggestion and wireframes sketches i came up with, please i am open to correction, feedback and task issues assignment.

This Looks really good. @tuxology I'm an Outreachy applicant and would love to implement this UI. can you assign this to me?

[amogbe-esther]

My ux contribution for an auto save feature,I took my time to understand the process of auto save feauture and its impact on users. giving users a top notch experience helps retaining users and sharing the good experience about the product. Zubhub creators require an experience with zero anxiety or fear of losing their progress infusing the backend feature into the user interface design helps the creator to

Reduce the anxiety of losing their work progress It gives users an assurance that their work progress is being saved. It gives peace that whatever interruption occurs the progress is still intact.

So i carried out a user research on the auto save feature by asking this questions

Will the auto save features be helpful? As a creator would you like to have a feature that auto saves your progress? When creating content have you lost your progress due to it not being saved manually? Was it a good experience or a bad experience? How did you feel about it? How important is it for you to have an autosave feature in the application you are using? What time interval do you expect your work to be saved automatically? Should it be every few seconds or minutes? Would you prefer to have control access to the autosave features or would you prefer it runs automatically without user intervention. What type of feedback or confirmation do you expect to see when the auto save feature is running or when your work has been saved? Are there any specific concerns you have about auto save, such as data privacy or data loss prevention? How do you think the auto save feature should be integrated into the user interface? Should it be visible or hidden from view? Do you have any suggestions or ideas for how the auto save feature could be improved or enhanced to better meet your needs? From my research I was able to find out that creators would like to have an autosave feature that is accessible to them, having a user control of the autosave features whereby they have the flexibility and access control. Having a visible autosave feature that gives an assurance that their work has been saved.

Infusing the autosave feature can come on board on the user interface as draft and history, For the creators, it saves as draft. The content is being uploaded that way it saves the process to avoid any loss of progress. For viewers, it is saved as history and the content you are watching can be returned without any difficulty.

Having this auto save in this order gives the user an assurance that their progress has been saved without anxiety of lost work or wasted effort.

With this research I was able to come up with a sketch and wireframe on how to input the auto save feature in the design and accessible to users.

@srish would appreciate if you can check this out. Thank you.

@srish @tuxology kindly check this out. Thank you.

[waju-ire]

Hi @srish @tuxology with the component library contributed in #617, I recreated the landing page with a few UX improvements: a) Nav bar: decided to include elements within a nav bar so users are aware of content they can navigate when they land on the page. Created a "For Communities" section in the nav bar cos Zubhub is a community orientated platform but there's no indication currently for new users (will be expanding on that later) Emphasizing the primary CTA cos in a brief, new users find it hard to start an action. With a few changes in the UX writing and highlighting the primary CTA, I believe new users will have no hesitation taking an action.

b. Creating a "what is in store for you" category on the landing page: I believe giving visiting users an insight as to how Zubhub works. This way they have an inkling of what they sign up for: creative inspiration, sharing their work and community. Also this part highlights the primary CTA and get more user registration.

c. "What's New" - I took this from the "what's new" on the website which isn't so detectable as a button. This section allows users to scroll through curated works from new creators on the website

You can view full page prototype via : https://www.figma.com/proto/8Vh5ThipbNMuMuO7A6jd4H/Zubhub-Iterations?page-id=27%3A2752&node-id=85-492&viewport=756%2C517%2C0.15&scaling=min-zoom

[waju-ire]

Hi @srish @tuxology in the outreachy brief, Zubhub is described as a platform that can host communities and aid collaboration between members but currently, it isn't so evident on the website. So I thought to create an additional section "For Communities" that informs the public about the benefits of signing up as a community.

Also, I included a sign up process for communities that might be interested as well as an "Add Collaborators" section as part of the onboarding process.

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

Hi @srish @tuxology with the component library contributed in #617, I recreated the landing page with a few UX improvements: a) Nav bar: decided to include elements within a nav bar so users are aware of content they can navigate when they land on the page. Created a "For Communities" section in the nav bar cos Zubhub is a community orientated platform but there's no indication currently for new users (will be expanding on that later) Emphasizing the primary CTA cos in a brief, new users find it hard to start an action. With a few changes in the UX writing and highlighting the primary CTA, I believe new users will have no hesitation taking an action.

b. Creating a "what is in store for you" category on the landing page: I believe giving visiting users an insight as to how Zubhub works. This way they have an inkling of what they sign up for: creative inspiration, sharing their work and community. Also this part highlights the primary CTA and get more user registration.

c. "What's New" - I took this from the "what's new" on the website which isn't so detectable as a button. This section allows users to scroll through curated works from new creators on the website

You can view full page prototype via : https://www.figma.com/proto/8Vh5ThipbNMuMuO7A6jd4H/Zubhub-Iterations?page-id=27%3A2752&node-id=85-492&viewport=756%2C517%2C0.15&scaling=min-zoom

[srish]

This project is now complete via #Outreachy.