Gitcoin Quests Landing Page Refresh

[PixelantDesign]

Job Story

When I'm considering participating in Gitcoin Quests, I want to easily understand what Quests are about and how I can learn about web3, so that I know how to complete or create quests on Gitcoin.

Why Is this Needed

The Gitcoin Quests page doesn't reflect the new brand and the information architecture needs an update to make the page clear for potential learners to easily navigate and understand.

Description

Create a Quests page that shows the most important information to convey to meet the Jobs to Be Done to enable users of Gitcoin to learn about web3 or blockchain.

Please see the Quest core jobs under the Learn page

Assumptions

• Visitors are interested and excited to get started learning through Quests.
• A quest creator is excited about creating a Quest and wants to understand where to begin and how.
• No major technical/architecture changes to Quests themselves, the scope is for the landing page ux/ui work.

Current Behavior

https://gitcoin.co/quests

Expected Behavior

A new Quests landing page that conveys a compelling story about why Quests with improved Ux/Ui/Interaction designed to meet our goals of increasing participation and creation.

Definition of Done

• Provide an approach to telling the above story
• Create a wireframe of your new Quest proposal
• Please retain the Quests leaderboard
• Consider animated interactions for emotion
• Create an on brand following our design system
• Design for both responsive and web views
• Propose CTAs to drive to our core businesses actions of participating or creating quests, where relevant

Deliverable

• Wireframe
• Designs created in Figma, clickable prototype would be great
• Development specs defined in Figma
• Responsive views defined in Figma
• Animated SVGs and illustrations

Success Indicators

• We receive community feedback that the Quests page is very clear, looks great, and easy to digest.
• Potential Quest participants are excited and encouraged to play Quests and Create Quests

Additional Information

Please use Gitcoin Design System styles

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

Workers have applied to start work.

These users each claimed they can complete the work by 264 years, 1 month from now.
Please review their action plans below:

1) chiragbadhe has applied to start work (Funders only: approve worker | reject worker).

I would like to create prototype in figma with animations, custom svgs and built it using Nuxt js and Tailwind css
2) squazher has applied to start work (Funders only: approve worker | reject worker).

With the use Of Figma, i can create a very educative and attractive Landing page.
3) jordan-nerison has applied to start work (Funders only: approve worker | reject worker).

To redesign this page, I want to spend a little bit of time interviewing current users what they believe can be improved about the quests page (I would want maybe 6-10 one on one interviews, no longer than 15 minutes each). From there, I would begin to wireframe a content strategy for the page, that includes a roadmap of what kind of onboarding info, and explanations are missing. Once this wireframe is approved, I could swiftly move into the design phase and use the existing brand library to develop high fidelity designs.

The current bounty is not big enough for me to also include illustration and animation. However, both of those could be provided through a seperate engagement (I have illustration chops). I would need more information from your team about the best way to animate, since I could provide assets in .SVG and you could either develop them with code OR host lightweight gifs. Whichever route we choose, I have colleagues who are good at both that I could bring on to help me bring these illustrations to life.
4) hunter696969 has applied to start work (Funders only: approve worker | reject worker).

I am from Mexico and I am really interestend in crypto world and the bounties
5) chimdalu-ofoegbu has applied to start work (Funders only: approve worker | reject worker).

First, I'll note down usability issues on the website from my view as a user. Then I'll conduct a structured open-ended user survey that is bound to get the required or needed input (I know this because I've tested it on a trust wallet case study I'm to carry out as a personal project).

After this is done, I'll restructure the Information Architecture of the website to display the most important info for users on the platform and easy navigation. Also, design a site map in respect to this, and effect the changes as needed.

When I initially came across the website, I knew something was wrong with the way the quests were displayed, alongside the length of the entire website, overwhelming me as a user and all. I believe from here I can then explore how best to improve the experience of the website and the interface in general to meet the goals of this bounty (also that of the users as well).

Thanks,
Chimdalu.
6) giorgiothegood has applied to start work (Funders only: approve worker | reject worker).

I can do it. Is this job task alive? I would like to colaborate creating a functional prototype on Figma. This is my expertise.

Learn more on the Gitcoin Issue Details page.