[$150] Connect-1219:024: Join/Decline Buttons Design

[mahestro]

Format

• Size: Medium.
• Payment: $150.
• Deadline: December 27 | 06:00 AM UTC-4.

Summary

Join/decline buttons in the projects listing page are occupying a considerable amount of space, it cab be optimized: https://take.ms/fbuhU

Screen/Features Details

• Current behavior: after clicking any of the buttons, a spinner loader shows up. When the background process is done, a left-bottom notification is displayed. This workflow won't change.
• We show join/decline button for the invited users on the listing page, which takes a lot of space on the project bar and even after accepting/decline the inviting space still stays occupied for those buttons. The goal is to reduce the space occupied by the buttons, maybe using some smaller user actionable icons.
• Final layout should look like in the provided screenshots in the summary.
• Both list and grid pages are required.

Screen Specifications

• Desktop: 1280px width. Height as much as needed.

Design Assets

• https://share.goabstract.com/d38028bb-76c2-4b72-b227-142432a32abf?sha=bb1fe2d9ce2aba263f07015a4e7814e79ad17931
• Create new artboards for join/decline work.

Final Deliverables

• Abstract
  • New branch with the updated design.
  • All original source files.
  • Files should be created in Sketch.
• Marvel Prototype
  • Project: https://marvelapp.com/project/4621904/
  • We need you to upload your screens to Marvel App.
  • Provide clickable spots (hotzones) to link your screens and showcase the flow of the solution.

[Dara-K]

Contest https://www.topcoder.com/challenges/30111739 has been created for this ticket.

This is an automated message for darak via Topcoder X

[Dara-K]

Contest https://www.topcoder.com/challenges/30111739 has been updated - it has been assigned to PereViki.

This is an automated message for darak via Topcoder X

[PereViki]

@mahestro Hey Luis,

I haven't seen this screen yet in Connect. As far as I understand, the workflow is as follows:

1. The user is a regular Connect user. He gets invited to a project or two.
2. He opens up Connect, and sees all his projects, incl. the ones he is already working on / already joined to and the ones he has just been invited.
3. He needs to take action on the invites, either join the projects or decline from joining. Let me add that the copilot assignment might need a different flow as well, as now I have to join to be able to decide if I want to take the project, and then I cannot leave.
4. Once he took action, the project card doesn't show the actions any more.

What you need now is only the 2 views (grid and list) for point 2, right?

Thanks, Viki

[mahestro]

Hi @PereViki, you caught up the workflow quite nice.

The user for this scenario is PMs and CAs who receive lots of invites (8-12 per week) even for projects that are just proposal reviews. Workflow for copilot assignment, and even this one, will need adjustment since they are not optimal. For this exercise (speed purposes), we're focusing on integrating the buttons within the branding and reducing the space the occupy (using icons instead maybe?).

The workflow you described is accurate as it behaves now in dev 👍🏽

What you need now is only the 2 views (grid and list) for point 2, right?

• Correct.

Thanks!

[PereViki]

@mahestro Hey Luis,

2 questions/suggestions if I may:

• Could you consider working on a wider canvas for Connect? If I use 1280, I have to shrink my browser window (though I use a 13" device), which causes some columns to disappear in the list view of the project listing page. In addition, if I check my design on Marvel it looks silly if that window is 100% wide.
• Please, please, please, let's recreate the live design in Sketch, so when we work on small tweaks we don't have to recreate the environment, which takes more time than the actual task. In a perfect world we should have another global library that we share and also use version control on, right?

Thank you, Viki

[mahestro]

Hi Viki,

Great suggestions (welcomed here). It's ok working on a larger canvas.

It's true it takes time recreating the scenario, it's a shame we don't have this at our disposal yet. If you think, for this task, we can sort it out (just using the table while ignoring the header, side etc?) without recreating the whole scenario that would be great; otherwise, you can recreate it now, I'll make sure to compensate for the work.

[Dara-K]

Payment task has been updated: https://software.topcoder.com/review/actions/ViewProjectDetails?pid=30111739

This is an automated message for darak via Topcoder X