Sprint 01 - Wireframes (Homepage, About and FAQ)

[tania-pires]

Sprint 01.zip Hello!

We’re creating this issue to share the initial wireframes for the Homepage, About and FAQ’s pages. You can checkout the inVisions here:

Assumptions:

• We want the Tasking Manager to be more connected with OSM than reflect HOT website
• We want to make it clear how it works and how you can participate
• We want to humanize and create more empathy towards specific causes, showing the real impact of mapping

Homepage (HOT Version | White Labeled Version)

Our goal was to increase user awareness, engagement and conversions by answering the following questions: what is the tasking manager, how does it work, and how can I contribute or be parter. What we did:

• Make it clear that you’re helping other people by mapping
• Improved the metrics shown making them more tangible for newbies
• Made copy a bit more friendly and easier to understand
• Added organizations that are using the TM and testimonials for social proof
• Created CTA’s for mappers and organizations to boost conversions
• Added featured projects and events to help speed up some of the efforts by community

About

We wanted to build trust and credibility by better explaining what TM does:

• Added the causes that are impacted by mapping
• Made connection to OSM a bit more visible
• Added metrics about real campaigns/projects impact to create more emotional connection
• Added a small section regarding the different users of TM and how we help them

FAQ’s

We wanted to make it easier to scale the FAQ section and help different users find content faster:

• Added tabs that will filter questions by the audience
• Made questions/answers expandable to make it easier to scan for what you’re looking for
• Added a CTA for getting in touch with the support team
• Added links to OSM wiki and LearnOSM

Feedback we would like to receive:

• Is the content on each page adequate in order to reach our goals?
• Do all the sections make sense?
• Is there any information missing on the pages?
• Regarding the white labeled versions, we can add or remove sections from the HOT version, but it should be simpler in general

What we’ll be working on next:

While you review and compile feedback until next Wednesday, we’ll be working on contribute and project page wireframes. Initially we said we’d move on to high-fidelities, but until we are surer that we have the right content and structure, we prefer to move forward in this way.

Ps: Feel free to leave notes and comments directly in inVision.

[pantierra]

Thank you @hotosm/major for this first input! I went over the wireframes and they are visualizing well the improvements we have been discovering together with you over the last weeks. I'm very happy about the content and first approach.

It is great to have a styled and white-labeled version - taking into consideration other installations of the Tasking Manager, of our partners. Probably the "We are creating change" section on the About page will not be shown on other organizations' instances (white-labeled version), or change in wording.

The current TM's FAQs and "Whats new" sections are guided by a strong assumption of people knowing TM2 and go now into TM3. Moving this in a more general direction, with "Updates" and a new FAQ page is a good step forward. Not sure, whether we want to have another blog and "bother" users with version information around a software/service. It is just an idea I want to through into the ring, whether we might want to consider to omit the "Updates" section, entirely!?

The FAQ behaviour as envisioned by the wireframes let the page to appear much more structured and readable.

A bit more work on the technical side, I could expect for the functionality to display stats based on projects (km mapped, buildings mapped). And I see this as good input for us to have a concrete use case of OSM stats coming into the TM.

Just for the record: The events section is introducing a new functionality.

[leihla]

Just a follow up on our feedback meeting today.

Open discussions:

• Should we have the events section. If we do, we might want to create a "Events" page on the main nav. This would mean that we would need to create a workflow for pulling events from meetup/eventbrite or having a submission for different organizations to submit this data.
• Homepage is now more promotional and geared towards new users. That means that once the user logs in we want to create a new homepage that acts as a user dashboard.
• OSM registration, we're waiting to know if it's possible to do the entire process on TM and them pass info to OSM in the background

Major Next Steps:

• Review main nav - update links and nomenclature + design logged in version
• Remove "Update" from main nav and combine it in FAQ's page
• Homepage - bring featured projects up on the page
• Onboarding - we'll design a version using the current registration workflow on OSM, but create a way to capture the user email on TM website. We'll also design a version where the entire process is done on TM and the integration with OSM is done in the background
• Mapping workflow - we're designing a version assuming that tasks will be randomly selected for beginner users. But, for experienced mappers and validators, having the ability to manually select a task from the map is still needed. @xamanu suggested having a "expert mode" toggle on the user profile to select between this different flows.

[TylerRadford]

Hi all looking great. I like the idea of logos within each task block/tile. I believe those would be the logo of the requesting Organization (right now I see OSM and MissingMaps logos but think it would be the humanitarian partner instead - e.g. Red Cross, MSF, etc.) If so that would be cool and also let users get a better idea of which organization they want to support through mapping.

If this feedback should go in Invision or somewhere else please let me know!