Outreachy internship: Activities Integration Design Ideas

[souad988]

[souad988]

for the facilitation tips we can consider it as attribute in the activity class and use a WYSWYG tools like react quill to get the content from the user

[tuxology]

This is a good approach 👍 We already have quill I think that we are using for description already for the Projects : https://github.com/unstructuredstudio/zubhub/blob/master/zubhub_frontend/zubhub/src/views/project_details/ProjectDetails.jsx#L8 so this fits quite well!

[tuxology]

Thanks for this effort @souad988 So I have a few suggestions before we move on to the ERD phase of work. We need to do a few things before a complete feature like activities integration is built in ZubHub - a feature that involves multiple UX and will have a dedicated UI as well. For this I suggest we have at least 70% knowledge and coverage on:

1. Requirement Specifications, which tells us what we are building and certain high level things the users can expect to see. Much of this we already know and is not unknown.
2. Annotated Mockups/Wireframes, that explain how the feature will look. It will have different screens. The sketches can be rough, hand-drawn, and have all things annotated so we have some idea of how each component element will work :)
3. Functional Specifications, that explain how all the small components are going to function. They should also list limitations, caveats, corner cases etc.
4. Implementation details explained very briefly at this stage, which help us guide our implementation.

An example of a successful project we had before and the initial work we spent is something like this: https://meta.wikimedia.org/wiki/WikiContrib/Proposed_implementation Even though the UI evolved eventually, the process of thinking about it made a lot of things clear. The ERD you created will be somewhere in the efforts spent for point 4 above. Lets also do the other parts in parallel as well!

[souad988]

I started by activities screen that will be rendered to any user after clicking Explore Ideas button in home page:

we can use figma to agree about the design:
https://www.figma.com/file/jEy3xfgLKa7VGaJgf4Bwmx/create-activity-button?node-id=4%3A31

https://www.figma.com/file/jEy3xfgLKa7VGaJgf4Bwmx/create-activity-button?node-id=0%3A1

[tuxology]

This is great stuff. I added quite a few comments for you @souad988 on the Figma links after a review and discussion with @srish. The remaining components from the view above is the card view for each activity. Here are some general comments on it - not specifically on each UI component (we can refine it later):

• The activity cardmay not have comments in it. We are thinking that Activity is more like an instructional material created by experts and educators so they might not need a lot of public discussion. In the individual activity page, we can keep a UI element which says "Submit Feedback" - with just a simple input box. Anyone can submit feedback there for the activity which is anonymously sent to the Activity author (viewable on backend/notification)
• I feel the "Projects Created" and from a given activity is a very important number - this is a good indicator of activity's reach and popularity. So we should make it quire prominent.
• The Category Pill is not needed. Instead we can replace it by "tags" added to activity as part of its creation. This is similar to the pills we have on https://kriti.unstructured.studio
• Only title and description is needed for activity. We can remove learning goals.
• There are two more interactions needed in a card via buttons. We can replace the like you have with "Save Activity" and "Make this Project"
• Also, maybe lets aim for having 2 activities in each row instead of 3. This UI change will also help in differentiating the project a bit and also show some more info to the young creators and nudge them towards creating new activities.
• Lets keep pagination instead of infinite scroll, its simpler for now to implement
• Below the pagination and above footer, we should have some sort of single line form to capture suggestions from all users (staff/educator/creators). Maybe it can be a Suggest a new Activity Idea section with a simple input box where anyone can submit idea text to us which we can browse from backend.

[souad988]

Hi @tuxology & @srish
would you please check this diagram and let me know what i have to change (comments can be named creators_suggestions), I need your opinion to start creating the models and also for creating activity creation forms mockup.

[tuxology]

So this one is a tough question. Generally, the ERD looks ok to me - but I think we will only learn more in detail as we begin creating individual components. I would say, we have thought this enough to begin now - the ERD is logically related to the latest mockups 👍 So lets go with this. Also, lets keep activity_comments we will use them either for suggestions or as full fledged comments as we approach the final development phases.

[souad988]

Hi @tuxology & @srish ,
I added the missing sections to activity details mockup on figma and updated the activity cards as mentioned by tiffany last Friday, would you please check and let me know your opinion.
this feedback is also crucial for the creation form for exemple making steps in the mockup i opted for the simpler case but some activities have making steps with subgoups, so in the form do we give them the option to group them or create a simple list of steps?
and the design of the activity creation form should i follow same design as for project and profile forms or do something different?
figma file

[tuxology]

Thanks a lot for a very thorough redesign and review! This is looking great. I left some comments on the design. I believe we can do all of the things in the design!

[souad988]

Hello @tuxology and @srish
first draft of Activity Creation Form
I opted for a different design for the form so users can easily feel the difference and won't be confused, please let me know if you prefer that i follow the project creation form design, and i also commented on the sections we didn't agree yet about

[tuxology]

This one is looking great as well! i've left some comments - apart from that all seems good!