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

[srish]

Learn more about the proposed project here #561 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.

[Ananya2003Gupta]

I would love to work upon this issue. My question is how should I share my design and approach?
Should I share here itself or is there any community discussion group where I can share and discuss about the same.
Regards
Ananya Gupta

[tuxology]

We will be discussing idea related to the project here. We also have Zulip channel at https://unstructured.zulipchat.com/ which you can join and start discussing 👍

[comfy96]

@tuxology so we are sharing our ideas publicly?

[sethiastha]

@comfy96 Yes, you have to share your ideas in this discussion group.

[comfy96]

Thank you @sethiastha

[aparna-bhatt]

Also is there any online platform to discuss issues, ideas?
If not I would like to suggest Zulip for the same, as it is free and have topic like structure for discussion which is very convenient.

[tuxology]

We will be discussing idea related to the project here. We also have Zulip channel at https://unstructured.zulipchat.com which you can join and start discussing 👍

[Ananya2003Gupta]

@srish and @tuxology
I found some web designs on dribble which goes with the ZubHub's theme.
These designs will appeal equally to kids and teenagers.

Design Links:

bit.ly/webdesignidea1
bit.ly/webdesignidea2
bit.ly/webdesignidea3

As the website is down currently, I wasn't able to experience the current web platform myself. But I would study it whenever the website is up and running again.
Meanwhile, I believe these designs can serve as a base for UI/UX development.

I would really appreciate your views on the same.

[tuxology]

Website is up already, you are welcome to suggest ideas. We would welcome concrete UX designs and discussions around them in Figma or some other online platform of your choice!

[aparna-bhatt]

@srish @tuxology are we planning to work on the color scheme of the website?

[sethiastha]

@aparna-bhatt Feel free to suggest and let us know if you have any ideas. We will be open to exploring new color schemes.

[srish]

Hi all! This task is reserved for Outreachy internship. The contribution period will begin on March 6th. You can come back after this date to start contributing to the discussion.

[Fidausym]

@srish Hello, are we going to work on the color palette?

[sethiastha]

@Fidausym Yes, along with what's mentioned for this task, new color palette ideas are also welcome. Feel free to share it here.

[Fidausym]

@sethiastha Hello, please what are the other tasks we are to work on for this project? Aside the color palette, what other features are we to develop?

[tuxology]

You can post your suggestions here itself along with descriptions etc. Figma (or some other online sketching tool) designs are also welcome 👍

[Boluwatifey1]

Hi @tuxology can I drop figma links here to backup my suggestions?

[sethiastha]

Yes. Sure. Feel free to drop the links here.

[Kingjhenny]

Im sorry if this is a repeated question but, where would we be able to share and discuss our approach of our design and would we be able to drop links to our work .

[comfy96]

@Kingjhenny you can drop your approach, links and designs here .

[Critic-A]

Hi @srish @tuxology
I am Kritika. I am a UI/UX designer and I want 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 #557 which was listed as a microtask in #561

I interacted with the ZubHub interface and analyzed the current flow to identify some UI/UX issues. I have compiled them and suggested a few ideas to improve the same.
Link to figma file: https://www.figma.com/file/hJX7FxxbwfWoZDNmwy1vVd/Outreachy%2FZubHub%2F%23562?node-id=0%3A1&t=Z4s1mTPk3jdlVOrr-1

They are under the following heads:

• Improving individual field
• Making the form shorter and form filling process smoother
• Making the form more interactive and user friendly (especially younger audience)

I'd really like to hear your views and inputs and then work upon improving my suggestions and creating mockups.

Cheers✌️

[Critic-A]

I also noticed that there are open issues like #200 which overlap with the UI/UX issues I found and made subsequent suggestions for.
I'd like to work on them if anybody else has not already been assigned.

Thanks

[Fidausym]

Hello @tuxology can we scout for issues on the website and create our solutions in design or sketches or are we to work collectively on work given to us?

[iamexousia]

I think the best approach is to try and solve the UX issues around the listed projects. I believe Zubhub has some specific projects listed for outreachy contribution.

[sethiastha]

Hello Kritika. You have identified some critical issues, but the Figma link you shared needs to be fixed. Could you try sharing the link again?

[Faridah-ux]

Hello @srish when I was going through ZubHub's website I noticed a mix-up, which might be confusing to users. When a user who isn't logged in or doesn't have an account try to Share a project by clicking the "Share a project button", a screen pops up, which is the one below

But the text on the screen says "Oops!! You are not logged in. Click on the signin button to get started", but the call to action buttons on the screen both read LOGIN or SIGN-UP.
I suggest the text on the screen should be corrected to either "Oops!! You are not logged in. Click on the Login button to get started" or "Oops!! You are not logged in. Click on the Sign-up button to get started" to eliminate all confusions.
Can you help?

Regards
Faridah Ejibunu

[sethiastha]

@Faridah-ux Thank you for noticing this. The messaging should be clear if the user is not logged in. And yes, it should be either Sign in or Sign up to be able to share projects.

[Faridah-ux]

Hello @srish something else I noticed on ZubHub's website is that not all the Call to action buttons have an hover state or as some would call it, a mouse over effect, all they have is an active state and clicked state without the hover state.

I noticed the following buttons on the homepage do not have a hover state- which are the "EXPLORE IDEAS button" and the "BE OUR AMBASSADOR button", while the other call to action buttons have this hover state or mouse over effect. An hover state for all the call the action buttons is necessary not just for uniformity among all buttons but it helps capture the users attention and lets them know that the text or button is clickable which in turn improves the users experience.
For a better understanding, this is a screen recording of what I'm talking about:

Untitled.mov

Can you help please?

Regards
Faridah Ejibunu

[sethiastha]

@Faridah-ux Thanks for the screen recording to make the point clear. As a part of forming a new design style guide, we will ensure consistency across all the CTAs listed across the pages. I agree with your idea on the hover state to capture attention and act as a visual cue simultaneously.

[Helen-Otowo]

Hello @tuxology and @srish I have created a style guide for ZubHub project and also shared some idea on my Figma file
Attached is the link to them
Please let me know your comment, so that I can create a wireframe
Thank You
https://www.figma.com/file/XDBvtWuBK3CXV0vCJ5AeXy/UX-Ideas-for-ZubHub?node-id=105%3A1266&t=2moNc9kC3v4K3OGF-1
Link to style guide
https://www.figma.com/file/XDBvtWuBK3CXV0vCJ5AeXy/UX-Ideas-for-ZubHub?node-id=105%3A3118&t=2moNc9kC3v4K3OGF-1
Link to UX ideas

[Kingjhenny]

This looks great!

[Fidausym]

This is well detailed and curated. Good work 👏🏽

[sethiastha]

@Helen-Otowo Great work. I love the details in the style guide. The ideas you mentioned under the grouping feature for educators and organizations are relevant. You can go ahead and share the wireframe you're talking about.

[iamexousia]

Hello @srish @tuxology @sethiastha

I went through the documentation for the user grouping feature.

PROBLEM STATEMENT: Currently, a grouping feature on ZubHub allows organizations to create group accounts and add and remove members to them. But all this happens presently from the backend, and there is no user interface. The second part of this project would be to design a user interface to support the grouping feature for educators or organizations. They should be able to promote a group account from the backend; after that, an organization should be able to add multiple accounts under them as group members from the front end and view the list from their profile page.

PROPOSED SOLUTIONS.

1. Organizations, Educators should be able to create an account.
2. There should be a distinction in the profile dropdown to indicate if an account is individual or organization 9organization covers educators, schools).
3. An Organization should be able to create multiple groups
4. An organization's profile page would be a dashboard that shows the groups an organization has.
5. The groups would be carded which on click would show a pop-up to display the group details and members of the group.
6. The Organization should be able to add and remove members from a group

SIGN UP.
The user should be able to select which type of account they want to create.

PROJECT CATEGORIZATION ON HOMEPAGE
On the Homepage, currently, all the projects are displayed, categorizing the projects would make decision making easier for the user and reduce the user journey.
Also, The Profile dropdown was redesigned to include the type of account ( Individual or organization)

ORGANIZATION PROFILE/DASHBOARD

The organization has a profile page would include the groups the organization has created, their members and also the projects created by the organization.
Default screen

Screen showing groups and projects

GROUP DETAILS
The details of eaach group can be viewed by clicking on the group card. it shows the members in the group, and also the organization's admin can either add a member by username or send a group link for the member to join. Also, the Admin can change the status of a member to Admin or Member.

GROUP CREATION
The Organization's Admin can create a new group, name the group and add members to the group.

Ill be glad to get your feedback and advice on how to make it better. @sethiastha @tuxology

[sethiastha]

@iamexousia Great work. Loved the idea of how you started the user flow - join as Individual & Organization. This concept is super relevant. Keep exploring.

[iamexousia]

Thanks for the feedback @sethiastha

[iamexousia]

Hi @sethiastha i iterated and explored further on the "GROUPING FEATURE" above and came up with the following add-ons and flows for the grouping feature.

1. Improved the UI of the Organization dashboard, i made the "Add" button on the group card more visible so the user can easily see it when they want to add a new memeber to the group.
   

2. ADD MEMBER
   i redesigned the UX of the Add Member flow to make it easy to add a new member either by their username or their email ( for non-zubhub users). For Non-Zuhub users, an email is sent to them with a link to create an account.
   

3. GROUP DETAILS
   i redesigned the flow of the group details to show the details about the group such as, members, projects, and "Pending Approval" lists.
   

4. PENDING APPROVALS
   When a user is added via their email, and they do not have a Zubhub account, an email is sent to them prompting them to create an account and when they do, they are sent to the group as "Waiting Approval". The Admin can either decide to accept or decline the request.
   

5. ACCEPT INVITATION
   When a user is added via their username, they get a notification on their account asking them to either accept to join the group or decline.
   

6. PROJECT VIEW
   on the "Group Details" Page, the user (organization) is able to view projects created by the groups.
   

ill be exploring the Group Project Creation flow next and would update. Thanks
would appreciate your feedback on this updates @sethiastha . Thanks.

[sethiastha]

@iamexousia Amazing work. This is such a clean UI. Good to see how you have explored the project categories in detail. It would be great if you could focus on the 'create project' section, which can act as both a preview of the final project and a stepwise process. I am attaching a sketch for reference. Let me know if you have any questions.

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

[Fidausym]

I love your work. The emphasis you placed on users “signing up” and the sign up option for organizations👏🏽

[sethiastha]

@Faridah-ux Awesome. Loved the drafts section in the project space. It would be great if you could focus on the 'create project' section, which can act as both a preview of the final project and a stepwise process. I am attaching a sketch for reference. Let me know if you have any questions.

[Faridah-ux]

Thanks for the feedback, but the sketch is a little confusing. Do you mean the Create project Section on the profile page?
I'm confused

@sethiastha Thanks for the feedback, but the sketch is a little confusing. Do you mean the Create project Section on the profile page?
I'm confused

[Faridah-ux]

@Faridah-ux Awesome. Loved the drafts section in the project space. It would be great if you could focus on the 'create project' section, which can act as both a preview of the final project and a stepwise process. I am attaching a sketch for reference. Let me know if you have any questions.

@sethiastha

CREATE PROJECT SECTION

1. Project Details screen that comprises of the Project's name, Project's description and Co-creators if they are.

2. Project Features screen, its an extension of Project Details screen, it contains Project's categories, Tags that describe the project, these tags make it easy for users to find your project and materials used.

3. Add photos and videos screen and project visibility. Here users can add multiple small video clips for project demo that the software itself can then stitch to generate a final video.

4. Project preview screen, users can preview and edit their projects information before publishing it.

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

[sethiastha]

@Faridah-ux Absolutely, noted. Newsletters are an excellent solution to keep our users engaged. Thank you for this amazing design.

[Faridah-ux]

@Faridah-ux Absolutely, noted. Newsletters are an excellent solution to keep our users engaged. Thank you for this amazing design.

Thank you

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

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

Here's the link to the prototype 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

[sethiastha]

@Fedybee Amazing work. It would be great if you could focus on the 'create project' section, which can act as both a preview of the final project and a stepwise process. I am attaching a sketch for you to look over. Let me know if you have any questions.

[Fedybee]

@Fedybee Amazing work. It would be great if you could focus on the 'create project' section, which can act as both a preview of the final project and a stepwise process. I am attaching a sketch for you to look over. Let me know if you have any questions.

@sethiastha OK noted, Thank you, ma'am, I will implement the correction as soon as possible.

[Fedybee]

@Fedybee Amazing work. It would be great if you could focus on the 'create project' section, which can act as both a preview of the final project and a stepwise process. I am attaching a sketch for you to look over. Let me know if you have any questions.

@sethiastha @srish @tuxology Good day all, so I was told by @sethiastha to focus on the "create project" section which can act as both a preview of the final work and a step-wise process. and she sent this wireframe for me to use
Below are the designs I came up with using the wireframe given to me.
The create project starts with the first page which is the "Description page" where the user gives an idea of what they will like to create.

The second page is the "Project Feature" where the user gives more detailed information about the project they want to create

The third page is the "Add photos and video page" where users can add images, videos, and documents used for the project.

And the last stage is the "Preview stage" where the user can see all inputs at a go and decides to edit any field or publish.

Thank you for watching.
@srish @sethiastha @tuxology Please what is your take on it, I am open to corrections.

[Faridah-ux]

Hey @sethiastha @srish @tuxology , everyone.

Currently, it is hard for new users to immediately get an idea of what they are supposed to do when they first land on the website. One way of keeping new users engaged would be welcoming them with a quick tour of the platform.

Once a new user signs up, the quick tour feature appears, it gives new users a brief introduction of the platform so they understand the platform and feel welcomed, as opposed to being confused and unengaged.

QUICK TOUR FEATURE

Users who just signed up gets redirected to the homepage, with the option of a quick tour

When they start the tour, they begin to get an idea of how to use platform, here the user is being educated on how to create a project.

Likewise here, there are two ways to create projects on homepage.

The browse activities button's purpose was difficult for me to understand as a first-time user, but thanks to the quick tour option, users can obtain a better understanding of it.

As sharing and learning are at the heart of ZubHub, I decided to include the explore ideas button to the quick tour. This button functions like an encyclopedia of creativity, where creators may go to get inspiration from the available activities.

Most users prefer to be able to easily access their profile without having to search for it; this enhances the user experience as they believe the platform to be helpful and usable.

HERE THE LINK TO THE PROTOTYPE

https://www.figma.com/proto/B9ZVGgWjaLnlq1UuYxtQuc/ZubHub's-Create-project-form?node-id=237-228&scaling=scale-down&page-id=0%3A1&starting-point-node-id=237%3A228

What do you guys think?

[sethiastha]

@Faridah-ux Great work. You can continue building more scenarios (like how to interact with existing projects) for a quick tour.

[Faridah-ux]

@Faridah-ux Great work. You can continue building more scenarios (like how to interact with existing projects) for a quick tour.

Thank you for the feedback. Would work on that.

[Faridah-ux]

@Faridah-ux Great work. You can continue building more scenarios (like how to interact with existing projects) for a quick tour.

@sethiastha. Thanks for the feedback once again. I added two more scenarios for the quick tour, so I doesn't feel overwhelming.

QUICK TOUR FEATURE

A SCREEN THAT LEADS USERS TO WHERE EXITING PROJECTS ARE.

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

[Fidausym]

Hello @srish @tuxology @sethiastha
You had asked me to explore more color schemes that would complement the Zubhub logo and I came up with two more palettes.

1. First palette
   
   

2. Second palette
   
   

What do you think about this @srish, I’d appreciate the feedback everyone

[sethiastha]

@Fidausym Great exploration. I like these two options, but I feel there can be more colorful options to attract kids.

[Fidausym]

Hello @sethiastha, In reference to the change of color palette for Zubhub, I think we should consider a choice of illustrations or animation. I think we can use that to attract more kids. I feel it’ll take more than the color choice to attract kids.

What do you think about this colorful illustration;

[Wondaland]

Hello @sethiastha @srish @tuxology
The first time I visited the ZubHub website, I created some UI designs as well as made some UX suggestions and iterated them since I realized that the website required two separate sign-up pages for both types of users.

For the Group feature, I faced some challenges in coming up with ideas to implement the grouping feature in a seamless way, but eventually, I understood the requirements and suggested some UX ideas that would make the feature user-friendly. They include:

1. Easy access to the grouping CTA & important features
2. Creating add group form
3. Creating a familiar platform for the kids and educators to interact
4. Including a saved project
5. Including a video call and voice call

1. Easy access to the grouping CTA & important features

I added the group feature here in order for users to easily get access to it, I shared the features and made the important ones obvious so the users can get easy access to them. I also added icons to provide visual cues that quickly communicate actions and functionality without requiring users to read text.

2. Creating add group
The group feature was intended for educators to be able to have multiple students to whom they can pass their knowledge and the same goes for the individual users, I designed the group feature in a way that the users can get access to their groups from their profile. I also added a form for users who intend to create a new group.

3. Creating a familiar platform for the kids and educators to interact
Incorporating Fitts's Law in UX design, I opted to create interfaces that users are familiar with. This approach facilitates easy recognition and interaction with familiar elements, which can enhance the user experience by making it more intuitive and efficient. As a result, users can interact with the website more seamlessly and effectively.

4. Including a saved project
To facilitate users who just recently joined an existing group, I included a saved project feature in the group section. This feature presents users with a group description and previous projects saved by the group. By doing so, users can quickly and easily navigate through the group's activities.

5. Including a video call and voice call
I added a video and voice call feature, I aimed to improve interaction, personalize learning, build trust, monitor progress, and promote socialization. This feature creates a more engaging and immersive learning experience for both users and educators.

In my opinion, the inclusion of a group feature is highly advantageous for ZubHub. This feature can facilitate collaboration, community building, peer support, teacher monitoring, and personalization among kids, resulting in a more engaging and effective learning experience.

Prototype:

Untitled.mp4

I'd really appreciate your feedback. Thank you.

[Fedybee]

@sethiastha @srish @tuxology Good day all, so I was told by @sethiastha to focus on the "create project" section which can act as both a preview of the final work and a step-wise process. and she sent this wireframe for me to use

Below are the designs I came up with using the wireframe given to me.
The create project starts with the first page which is the "Description page" where the user gives an idea of what they will like to create.

The second page is the "Project Feature" where the user gives more detailed information about the project they want to create

The third page is the "Add photos and video page" where users can add images, videos, and documents used for the project.

And the last stage is the "Preview stage" where the user can see all inputs at a go and decides to edit any field or publish.

I also created a profile page for the user where they can add personal information about themselves.

Thank you for watching.
@srish @sethiastha @tuxology Please what is your take on it, I am open to corrections.

[Fidausym]

Great work @Wondaland. I love your create project flow 👏🏽

[iamexousia]

Hi @srish @sethiastha Based on your recommendation for the exploration of the "CREATE PROJECT" section to allow for Preview of Project and stepwise process. I explored the idea and came up with the following maintaining the current Zubhub design style and color.

1. Broke down the project creation Steps into 5. The user can save the project as a draft from any step of the project creation process by clicking on the "Save as draft" button. the user is able to come back to the project and continue from where they stopped.
   

2. The user can easily go back to a previous step by clicking on "Prev Step".

3. I also compressed the Add Photo and Add Video fields to Just "Media". Here, the user is able to add any media type (Image or Video) of choice .
   

4. Also, the project Materials, Categories and tags were grouped under documentation. for the mateials, the user is given suggested materials which is based on what they are typing,
   

5. Project Visibility
   

6. Preview Project.
   The last step in the project creation process is the preview project, here the user is able to View a live Demo of how their project is going to look after publishing and also they are able to view and edit any of the details they have provided for the project. when they click on "Edit" they are taken to the Step where the field they want to edit is.
   

I would be exploring the group project creation flow next. would appreciate your feedback on this. Thanks @sethiastha

[Fidausym]

Good work👏🏽

[iamexousia]

Thanks @Fidausym

[Fedybee]

Hello @srish @tuxology @sethiastha
Good day all, here are the links to my designs, wireframe, and mockup on Figma. I was able to come up with new pages and did the prototype.
https://www.figma.com/file/YgRpogDOMai96ZGCHyaGLs/zubhub-project-designs?node-id=0%3A1&t=l8gZqj0vo0rIcXnY-1
and the prototype link is https://www.figma.com/proto/YgRpogDOMai96ZGCHyaGLs/zubhub-project-designs?page-id=0%3A1&node-id=44-281&viewport=428%2C396%2C0.04&scaling=scale-down&starting-point-node-id=1%3A658&show-proto-sidebar=1

Here are my mid-fidelity








I also created some new pages like the welcome page where I redesigned it so the user can select which profile they want to sign up for either an. "individual user or a tutor

Below are some mockups I did for some of the pages.

Thank you for watching @sethiastha @srish @tuxology please what's your take on this? your feedback will be appreciated.

[Fidausym]

Awesome work @Fedybee

[Fedybee]

Thank you so much 🙏 @Fidausym

[Faridah-ux]

DESIGN CASE STUDY FOR THE QUICK TOUR FEATURE

[sethiastha]

Great work and very well documented.

[Faridah-ux]

Great work and very well documented.

Thank you

[Fidausym]

Please does anyone know the internship project timeline ?

[Fidausym]

Thank you so much, please I need more info on this, guidance precisely.

[comfy96]

Hi @Fidausym

Thank you so much, please I need more info on this, guidance precisely.

were you able to figure this out?

[iamexousia]

if its not too late, create breakdowns of what you intend to do, how much time you intend to spend on each tasks. you can do it weekly. Example, week 1: user research, week 2: wireframe.. etc @Fidausym @comfy96

[Fidausym]

Does it have to be this detailed ? I don’t have much time left .

[Fidausym]

Thank you very much….. it was so helpful

[Fedybee]

@Faridah-ux Congratulation’s dear 🎉🎉🎊