Outreachy internship: Implement UX/UI for new users and grouping feature for ZubHub

[srish]

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

[kodervine]

For the sign up form, we can make it more engaging by using gamification elements like progress bars, pop-ups, or badges to keep users motivated during the sign-up process.

[Ananya2003Gupta]

If I am getting it right, we would like a feature where ZubHub recommends students to groups and groups to students.
Also we would like an interface where the group heads or coordinators can manage the group invitations with a click or so right ?

Suggestion:

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

[darechan]

Potential Changes

So here is a list of the things, I'd love have a constructive discussion for (this list isn't exhaustive and totally open for addition to ideas)

1. Updating the Login & Sign Up Page

Sign up page

As soon as a new user enters the website and try to sign up, they get bombarded with a lot of questions which clearly isn't a good practice.

• A minimalistic sign-up page with only the necessary fields like username , email/mobile number in one textfield and password
• Getting directed to login page after successfully signing up
• Adding the terms & conditions review for the users

Login page:

The textbox shouldn't be side by side rather following the convention of having the username textbox up and password textbox down below.

• Changing the position of the textbox
• Adding a hotkey for clicking the on the login button (As soon as Enter button is pressed the user gets logged into the dashboard)
• Remember me condition for security purpose

2. Adding a tutorial page/animation after logging in for first time

Once the user enters the page for the first time it would be great to to have a proper step by step tutorial to get familiar with the entire website explaining them where they can find which button and how they can create a demo project.
Also under this tutorial we can add a button to skip the tutorial incase the user does not wish to go along with that.
It would be more efficient if we add the part of adding the bio and country as part of the tutorial instead of the sign up page.
We can also set up a tutorial video for better guidance of people and future reference.

3. Adding tooltips

Having a tooltip for each button always comes in handy, it will not only guide a first time user on the website but also help them out with figuring what they can do!
Also, it will be a good practice as when the website scales up this will also help in new comers.

[tuxology]

I like some of these ideas! Maybe follow-up with some sketches as well? You can use Figma or any other online tool of your choice 👍

[darechan]

@tuxology sorry, for a delay in reply. Yes I can use figma I'll create a UI Mock and ping you again asap.

[darechan]

My approach: easy to complex

@tuxology this is my first preview idea for the LOGIN Page

1. Having a simple login card:

2. Integrating a Featured Panel

The website's primary audience is young people, and engaging them is key to keeping them coming back. One effective strategy for achieving this goal is to showcase their contributions on the site using a featured image or video. Not only does this provide value to the users, who feel recognized and appreciated, but it can also increase overall activity on the website. By highlighting user-generated content, you can create a sense of community and encourage others to participate, which can ultimately benefit both the users and the website itself.

(I am working on other parts of these suggests and will continue this thread with all the mockups. I currently have my semester end exams going on so the progress is slower than usual, my apologies.)

[darechan]

After going through various UI designs uploaded by other aspirants for tutorial page, I found this one to be the most easy to approach and user-friendly: #618 (comment) by @Rosietta-UIUX

[Rosietta-UIUX]

I'm also working on a new interface and a grouping feature, will share the Figma/prototype file here soon

[fiona-byte]

@tuxology, here is a list of things I noticed on the login page

1. The font for the "welcome to Zubhub" should be bolder because research shows that heavy font increases the ease of reading and directs attention of users.
2. According to font psychology, aside headlines and headings, you can also point out different elements to the user using the hierarchy technique which is setting the font size of elements in order of their importance. Most of the font sizes of the element on the login page do not follow this technique and this creates confusion for the user on what content to focus on first.
3. The placeholder text for each input field should be smaller and the color a little lighter.
4. Using a white text on the teal background fails accessibility test hence some users might suffer to see the text on that button.
5. The size of the sign up button is too big. I think making it smaller than the sign in button would be better

I attached an image with sketch I made highlighting the things I noticed.

[Boluwatifey1]

Hi @tuxology @srish here are some of the things I noticed on the landing page/ login on signup page

1. As a new user when you try to click on projects or become an ambassador it takes you to a page that tells you to sign in or signup
   I think you should be redirected to the signup page or CTA button called "let's get you started " to make the process easier for new users
2. I think there should be an option to sign up or login with Google instead of using password all the time
3. The hero page is too colorful and texts are to big(poor heirachy)
4. The color choice needs to revamped
5. We can combine but the phone number and email field since it's only one of it that's required
   I would like to back up my ideas with designs if you think this ideas should be implemented

[iamexousia]

Hi @srish @tuxology Kindly find below some of my observations and recommendations for the New user feature,

1. The sign up process can be improved upon by making the Copy more engaging and interesting to align with the playful nature of the interface.
2. After a Succesfull sign up, The user should be given a mini tour to show them what they can do on the platform. This mini-tour can be optional.
3. For a user that is yet to create a project, upon their subsequent sign-in, there should be a prompt to remind them to create a project and also to interact with other projects in the community.

[iamexousia]

After sign up, the user should be taken on a mini-tour of the platform to help them get familiar with the platform. The tour is optional and can be terminated at any point. @srish would love to get your feedback on these.

[Vic-Orlands]

I like this. Since it is a platform for schools and educational organizations, a tour will help onboard them easily and faster

[SafeEHA]

Hello @srish
I noticed that when a new user creates their first post, there's just this as a pop-up notification

I would like to suggest this

and this

To pop up immediately the post has been made successfully, then disappear to the newly made post page.
From research, I found that this level of interactivity makes the user experience better.

The design is subject to improvement as I am not a designer, however I am frontend developer and I can implement this feature

[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

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

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

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

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

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

[Rosietta-UIUX]

Hi @srish @tuxology @darechan @sethiastha

I worked on a grouping/Room User interface on ZubHub that allows users to create a group and add or remove members, making the room public or private.

Figma file: https://www.figma.com/file/znHmUthh7VmGk5W9StISSc/ZubHub-Project?node-id=236%3A25&t=N56ogQ9wscGvd3fc-0

Prototype Link: https://www.figma.com/proto/znHmUthh7VmGk5W9StISSc/ZubHub-Project?node-id=236%3A26&scaling=scale-down-width&page-id=236%3A25&hide-ui=1&starting-point-node-id=236%3A26

Proposed Landing Page

After Login

Find Room/Groups

Create Room/Group

Chat Interface

[Temabo]

Nice work👍🏾 went through the prototype. I like the perspective of your idea

[Rosietta-UIUX]

Thank you @Temabo

[Mara-mma]

This is very nice @Rosietta-UIUX and I also like the idea perspective and would explore it

[Wondaland]

I love the chat room idea, great work

[Ami112-sketch]

@Rosietta-UIUX
This is a nice idea, I love this
I think it would be a nice idea to have tags/category for the room/group based on skills or topics, I'll be implementing this idea in a design

[Mara-mma]

Hello everyone! @tuxology, @srish I, and @Temabo have been working on the user interface for the grouping feature in Zubhub. As part of our brainstorming process, we researched how other platforms have implemented similar features and used our findings to create low-fidelity wireframes for the group account creation process. We would greatly appreciate any feedback from the community and are also open to collaborating with others on creating more UI screens for this feature.

[iamexousia]

nicely done, here are a few things i feel you can consider,

1. SIGN UP: Instead of having to create a personal account first befor moving to oragaisation details, why not make the organization details the required Data.
2. You can have a have on the sign u screen a way that users can choose eithe they are creating an individual account or organizational account.
3. Do you think the Email verification code thig is neccesary? its taking off the seamlessnesss of the registeration.
4. you can look at includng a "batch addition" or Multiple Users addition feature for adding group members.

These are just my observations hat i feel would make your work smoother. I believe the mentors would also give you better feedback. Welldone

[Mara-mma]

Thank you for the feedback @iamexousia, will iterate on it

[Mara-mma]

Hi, @srish and @tuxology I want to know if my understanding of the grouping feature is correct with these user stories
a. As an educator, I want to be able to create a group account where I can manage my students(i.e add or remove members)
b. As an educator, I want to be able to create a group account where I can create challenges just for my group members and see their
progress
c. As an educator, I want to be able to create a group account so I can assign activities to my students.

[Boluwatifey1]

hi @srish and @tuxology please i have been unable to paste my designs on here, please i need assistance on how to

[iamexousia]

Hi @Boluwatifey1 What are the exact errors you are experiencing, im not a mentor, but i feel i can be of assistance in my own little way

[darechan]

If you have a UI mockup made on figma then just share the link with view as global or if they are image files then click on each file and copy them and then simply paste them here. If you are facing any other issue do let me know.

[Boluwatifey1]

ok thank you very much @darechan

[Boluwatifey1]

I made few changes to the landing page and signup page, i think the colors are too bright so i did a revamp, I also made the log in page and sign up page simple and easier this would enable new users to get started in a short period of time. i am working on the home page too @srish @tuxology i would appreciate your feedback

[Mara-mma]

Hi, @srish, @tuxology I went back and iterated on my previous design for the user interface of the ZubHub grouping feature, which allows users to create, add, or remove members. This is the result
Please assign this to me
Prototype link: https://www.figma.com/proto/s8Y8mUHvD5ShNhLvzCJ52l/OUTREACHY?page-id=167%3A1983&node-id=167%3A8814&viewport=1095%2C-167%2C0.14&scaling=min-zoom&starting-point-node-id=167%3A8466

outreachy.mp4

[iamexousia]

This is Good work. i Love how you made the group creation and details. just a quick question, are you exploring the individual creating a group option or having an organizational account option? i believe your leaving out the organizational flow. welldone

[Mara-mma]

Thanks, @iamexousia, I explored the individual creating a group. for the organization, I'm thinking of having the option where the group creator can add co-creators

[Rosietta-UIUX]

Nice. It's very similar to my idea the room/chat feature. You can also consider reducing the amount of buttons on the hero section.

[Mara-mma]

Thanks, @Rosietta-UIUX, yes i got the concept from your room/chat feature

[Ololad-e]

@srish @tuxology

Starting from the first problem statement,

“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

Some examples of keeping new users engaged through a guided experience would be emphasizing signing up”

I iterated a landing page which would act as user guide for a new user who is just visiting the website, they can quickly grasp what happens in the Hub, while as well emphasizing on signing up (with a clear CTA for signing up)

[Ololad-e]

@OloladeOdus this is so good, please where did you get your illustrations from?

from freepik and icon 8 plugin

[Mara-mma]

I love this @OloladeOdus, it has the fun feel

[darechan]

Interesting, I love this idea landing page idea

[sethiastha]

@OloladeOdus Unique and fresh design. The idea of guiding a new user looks very promising in your design. Keep exploring. Love it.

[Ololad-e]

@sethiastha thank you for the feedback

[Girish-Jangam]

Hello, I'm girish, I'm getting this error while setting up the backend, could you please help me out

[Ololad-e]

@srish @tuxology
In lieu of contributing to the new features of Zubhub, I have iterated on and design a three page screen for the gamification of the profile BADGES
This is a way to keep on making user interact and explore with the website. It is a gamification in form of tasks.
Please take a look at it, I'd love to hear feedbacks on it
This is the first screen in profile (New features include the progress bar, badge level, badge name, badge art, quests, xps)

I also made a prototype video on how it would work

Page.1.-.Zubhub.Contribution.-.Figma.2023-03-18.12-57-39.mp4

[sethiastha]

@OloladeOdus Wow, that's a great concept. I liked the artistic representation of the Hatchling badge. The quests are not very clear to me, and what's the difference between the new and the activity tab? Please elaborate on that.

[Ololad-e]

@sethiastha the new is the available quests that can be performed while the activity is for quests history(quests that has been performed and level up)

[Ololad-e]

@sethiastha the quests is to give users insights on what to do on the Website, more like a guide.
for example: if a quest is to like a post or post a project,
it also allows the user explore the project feature page and also the projects page in the website.

[comfy96]

I noticed the Zubhub website doesn't have a frequently asked question, so I carry out UX research on this. I asked some kids from ages 6-11 years old to use the website on their own, as new users, they are supposed to signup. in the process of signing up, they kept asking me questions like:

1. what is an Email?
2. What is a username?
3. I don't have a phone number, what should I do?
4. What do they mean by 'location'?
5. What is a 'BIO'?

I have to answer all of these questions for them. so I decided to come up with a FAQs page for the kids and also added some questions that parents are likely to ask before giving their kids access to the website. The FAQ is going to be at the footer of the website as a link(when a user clicks on it, it takes them to the FAQs page)
Below is the wireframe

FAQs Wireframe:

FAQs Design:

FAQ added as a link: At the footer

@sethiastha @tuxology @srish Please let me know what you think about this. Thank you

[ahmadadejumo]

Nice one there @comfy96 i think FAQ would really help them in having a more broader understanding of ZubHub and also the part where you can play a tutorial video on how you can create a project is going to aide in a very good user experience. But just a quick question tho, as a new user can't i be able to play a tutorial video on how to use the website before SignUp ?

[comfy96]

@ahmadadejumo Thank you!

Of course, as a new user, you can watch tutorials on how to use the website and navigate through each screen, I've done the wireframes for that, working on the design. I'd share that soon.

[comfy96]

@sethiastha @srish @tuxology
I'd like to know what you think about these signup screens for new users. Thank you!
I decided to make it easy for new users to signup in a fun and exciting way so they don't feel overwhelmed, so I redesigned the 'Signup Form' and made it to be in a card format, each screen will have an auto-save feature( once you attempt the first question, the next question pops up immediately). I used a playful and readable font for the texts called 'AMOVENO' and 'NUNITO'. Also reduced the opacity of each of the colors from the 'ZUBHUB' website so it can be pleasing to the eyes. Made some of the buttons outline and some actionable buttons filled buttons.
Also, I added some new features:

1. A progress bar to Keep track of the number of questions you have answered.
2. A 'Watch Tutorial' video for new users on how to use the website and also how to fill out the form.
3. An audio recorder for users who do not understand how to type using the keyboard or those users with poor writing skills.
4. A play audio icon for users who can't read fluently (once they click on it, it will read the questions out for the user) or those who can't see( this feature is for the purpose of accessibility).

you can see the wireframes below:

@ahmadadejumo These screens are for new users as requested in your comment on my previous post. Thank you

[robotdiner]

This will be a looong string(there's a long desktop page and a mobile page), thanks for getting through! When a user unknown to Zubhub gets on, there's an overwhelming number of new content that they cannot immediately understand or appreciate. Several action buttons, a creative challenge, "create a project", other people's posts... these are all completely new to this user and this can get really confusing. With that in mind, I set off to create a landing page that comes before all this, something that tells you about the primary, prominent features before they see what the site is.

So, I made doodle wireframes to understand what a landing page for Zubhub would need: should we have a simple one screen page with a blurb and a sign up? Hm, maybe a longer scrolling page would be ideal for that new user to see through everything. I also looked at other learning and activity platforms: Instructables, Duolingo, Khan Academy. Instructables emphasized a display of the cool work their users have done, Khan academy explained their features and goals, Duolingo had a prominent landing page with a sign up in focus but as you scrolled down you can see their features too.
I wanted to make the page catchy and make the primary features easy to understand. In the end, I decided to go ahead with the longer page as it would be important to express what Zubhub is as it's a new product that the users may not be fully aware of.

The default, student home page(you may be wondering what the organisation tab is doing here, i'll explain that next) starts with a little challenge: Are you a maker? to excite users. I used images for the background here because I was inspired by another contribution here and realised that real pictures would add a nice human touch, make the users feel a connection that may not be possible with little drawings. I added a wavy, fluid language to express the openness and creativity that Zubhub encourages.
Get Inspired, Tinker, Share: A simple explanation of what Zubhub is all about. I doodled these illustrations to express these words. This is all then followed by the highlighted works from users themselves, what Zubhub is all about. A simple quote from an existing user would help bring a relatable face to the page, a testimonial that this site is pretty cool and the user should try it out! After you've seen everything, do you want to see something yourself? Search it up or click on one of the categories we have on the site. Finally, it all ends with the sign up action button so you don't have to scroll back up.
!

The organisation page. Thinking about the grouping features and learning more about Zubhub, I realised that it would be good to have a full experience for the organisations themselves. This page is shorter than the students' page, more straight forward, explaining why Zubhub is a good product for organsations.

Finally, the mobile version of the Zubhub landing page! I realised (belatedly) that many users may not have ready access to a computer, especially students from under-served communities, and it would be important to have a responsive mobile browser experience to ensure accessibility to all people. Here's the mobile version of the landing page:

Next steps: Based on feedback, I'd like to improve this design further. I will work on the sign up page, as well as the new user's experience: how they can get badges, be inspired to make new things and be more creative. Thanks for going through all this!

[robotdiner]

Based on feedback I received on my post creation user experience, I designed an interactive sign up for Zubhub as well. A quick flow, here I once again decided to break down several text entry elements into smaller parts, so the user isn't overwhelmed.

I decided to simplify the sign up. It starts with the email entry field:

Then, you enter your username:

And it all ends with your bio. Users just coming onto the site may be confused about what to even write about themselves, so I provided a sample bio of things they could write about(their hobbies, favorite subjects and so on)

For the tour, I decided to use a simple callout box with Zubby, the tour guide explaining what each part of the site contains!

For user retention and bringing excitement about work, I was keen on exploring gamification, so here goes:
For the homepage, I chose to redesign the layout, giving space to personalised information about their achievements and their streaks. When a new user joins the site, we want them to be curious about the space, share their own work and gain these badges themselves, so we explain how to get their very first badge: start by sharing your work! Secondly, I thought about a "monthly streak", a way to encourage children to maintain their hobby of creation. Since projects can be time-consuming, I decided to make it monthly so they get the time to explore and not simply share something for the sake of it.
For the posts display, I chose a simpler layout and removed, for example, the post description so there is less information overload and the user would be curious to click the post and see what it's about

Furthermore, I noticed that currently, when someone shares their work, they aren't notified that they've been rewarded something. I think giving them that instant gratification for making the effort to explore educational projects could be a great opportunity to get them excited! So, here, when they achieve a badge, they get a pop that congratulates them for achieving the cool new reward.

Finally, the home page when you're an experienced user. Your past achievements are displayed, as well as what your next badge and what you should do to get it. Plus a mini view of the mobile version for accessibility

Once again, thanks for reading through this to the end, I really appreciate it. Please share your thoughts and any feedback you have!

[Ololad-e]

@srish @tuxology @sethiastha
After iterating on the grouping feature, I came up with some wireframes presented below.

The first frame shows the access point to grouping, A zubhub user can a group or belong to a group and view their groups through the side menu dropdown.

The second frame shows the group a user belongs to, and buttons like search, filters for all or favorited groups, as well as create a new group.

The third frame shows group creation process

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

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

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

[robotdiner]

Here's my attempt at the Grouping task for organisation admins. Here, I chose to create a simple single page screen, with all actions right in front of you.

The teams page - a place to see all teams and their details on a single page. On the left navbar, all teams listed with their profile picture. The callout arrow points at whichever team you're looking at, :

In the team members list, you can see everyone in the team, and you can search them on the search bar. On the right, you can add or update the team profile, add a password for new members to join, see the team size and even delete the team.

To add new members, you click on the invite button here:

For organisation admins, sometimes the number of members may be to many, and adding them could be a tedious task. For this, I added the option to add in a whole email mailing list group and even a public link option so that a single link can be shared with the teams and members can be added.

To create a new group, you can click right here and get started.

Give it a name and

Add members in(or, again, copy this group's link and share it with the organisation)

Just like that, the invited members will get an invite and they can get started(if they don't have a Zubhub account, they make an account first and get added in)
Thanks for reading through, please share any thoughts you have!

[robotdiner]

Conducting User Testing for Zubhub

So far I’ve made a few ideations and iterations based on the brief, feedback and my own hypotheses. What do users actually think? To begin understanding this, I set off to conducting an interview with one such potential user: a student. My interviewee(let’s call her Riya) is in 12th grade and is a sciences student.

I made an interview plan and created a Discussion Guide:

The interview would take place with the interviewee sharing their screen, sharing their thoughts out loud as they went through the Zubhub flows for the very first time.

My goals for the interview were to understand:

1. Students’ creative habits: Do schools and the general education system foster learning by doing activities? Do students currently hold an interest in such activities? Would my attempt at implementing gamification help students be more excited about it?
2. At first glance, how do users feel about Zubhub? What works, what doesn’t? What do they feel about the sign up and project creation experience? What about my redesign?
3. How do they feel about the robot Zubby and its tendency to guide you along the process?
4. Do they understand what Zubhub is about?

Here’s what I gathered:

1. Riya was not used to creating any such creative hands-on projects.

“I can learn by reading and writing notes, but I haven’t tried working on projects of this kind. I don’t think I’m good at cutting and pasting, or working with any physical items. I wouldn’t know what to do here”

Suggestion: We can emphasize guiding students with learning guides and tutorials for simple activities they can start with so they don’t feel lost about where to begin. While there is an existing “Explore Ideas” button, it would be ideal to integrate these learning resourves within the website.

Regarding my gamification solution: Riya said that while she liked the appearances of the badges, it felt a little superficial to her because the rewards were not “real”, just visual elements that wouldn’t feel good to have unless she was already passionate about making projects.

Suggestion: I can explore the concept of gamification further and understand how to genuinely help students enjoy creating and sharing, without it feeling superficial. How can we make this interest feel intrinsic? I'd like to look into this further.

2. The home page has all posts by all users in a single place. However, Riya said that it would be better if the home page highlighted her interests first. For example, she’s interested in technological projects, but has no interest in art, so she would like it if she could follow the “technology” tag and her page would be customised to showing tech projects first. This would help keep her interested and maintain retention. Another point of confusion was the languages: since she didn’t speak gujarati, some posts made no sense to her and took away from the flow of the platform.
   Suggestion: We could allow users to personalise their feed a little by having them select their areas of interest, for example during onboarding so that these appear first on the home page. Taking suggestions from 1. Ahead, we can also personalise their tutorials so they get to learn their favourite areas.

Suggestion: We could allow users to personalise their feed a little by having them select their areas of interest, for example during onboarding, so that these appear first. Taking suggestions from 1. Ahead, we can also personalise their tutorials so they get to learn their favourite areas primarily.

Riya enjoyed the existing sign up process. She found it simple and easy, but did find it feel a little too long by the end, and the bio especially felt annoying. “I don’t know what I should write about myself, suddenly my brain goes blank about my interests and personality” About my redesign, she liked the flow and transition of it, and she said it kept her from getting distracted because of the animated moving questions. The sample bio was especially helpful as she could use the template to write about herself, it gave her “a starting point”. For the project creation process, she said a similar “sample description” could be helpful

There is not a lot of scope for users to interact with each other beyond commenting. Riya said that, if she really likes someone’s work, she’d want to talk to them further, chat with them about what they like, how they worked on their projects, and so on.

Suggestion: A messaging feature between users could help brings users closer and bring a stronger sense of community

3. She liked the presence of Zubby, calling a "friendly sight".

4. In terms of clarity of information, she said that she had to scroll and read a lot to understand what she should do first and what the site was meant for. The “Creative Challenges” also did not seem relevant because she was still a new user and didn't feel ready. It seemed more appropriate for people who were well-versed with the platform and had a lot of experience with such projects.
   Suggestion: The Creative Challenges may be introduced to users after some usage of the platform and some experience creating projects. Or, alternatively, we could help new users feel ready to work on a challenge, helping them realise that it wasn't as intimidating as it seemed.

Quick Tour: She did not like the quick tour idea, saying that she always skips the tour as she prefers going through the site herself, even if it takes longer. Therefore, the information should simply be presented better.

Visual design Note: Riya said the yellow color did not look right, and it felt a little harsh to the eyes. This may be something to consider if it's a repeating issue amongst users.

This was only one interview, but it helped test a lot of hypotheses and ideas for me, and also relook into what makes Zubhub enjoyable and what can be improved. If you've read this far, thanks a lot, hope you also learned something from it!
Hi @sethiastha, if you some time, I'd love to hear what you think about my progress so far, if you have any feedback about my process in both this and other tasks, and the designs themselves. Thanks!

[Ololad-e]

@srish @tuxology @sethiastha
after rereading the design brief for group creation, I was able to come up with wireframes for organizations to create groups,

frame 1, is the variants for signup process for organizations

The verification link and confirmation for organization email address.

Account setup form for organization (a simple form to get details of the organization)

The group page chat with access points to group pinned messages, links shared on the group, members of the group (under which new members can be add either by username or email, group link invitation and qr code)

group members can also be remove, made admin, information or profile of each group members can be checked

other ideas that can be incorporated, include
meeting scheduling with in-website calls or linking to google meet or zoom
Task board for group members to work on and educator can track their progress.
Group upload for group projects (is a feature I came about on Behance where when a project is uploaded for a group it shows on all members profile)