Site and Platform UI and UX
WeServe is a yet to be launched platform for Civic Leaders. It’s main goal is to impact community and help crowd source and crowd fund projects and actions wherever something’s not right.
The platform works like a Kickstarter but for causes, people in need, civil rights workers, social leaders, community centers, and anyone who wants to take action and change something that isn’t right in your neighborhood, city, country, region, etc.
The main challenge was to organize all the massive amount of information that each project would require on its specific page. It supposed to be a humane mix of Wikipedia, Trello, Asana, Slack and LinkedIn, all of that been super simple for someone who’s never had contact with any of these project tools.
Each project had to show it’s:
• Name, Owner, Country, Location where this action is been required;
• The tasks that this project need to be completed;
• The amount of money to be funded OR all the professionals needed to source the solution.
• The history of the project, which is updated frequently by the owner and all the tasks progression.
The Home Page should be a really simple way to explain what the platform is and what it does.
I’ve separated all the usability into sections, so I could explain each one as simple as possible. I also designed some vector illustrations that represented each section. They should look seriousminding the serious and social approach of the platform.
The PROJECT page had to work as a Overview and a summary of all things happening on the project, showing it’s goals, tasks, the progression of each task and also have a menu to the inside pages of the project.
I’ve decided to use the header as a summary of the project, showing the project image, the owner and the project location, the title and the numbers we agreeded that were the most important, which are: Percentage funded, tasks completed, teammates that joined the project and ammount funded.
The PROJECT menu
After the header, I had to show the menu of the project, but since all the content is colaborative and anyone can edit it ( like Wikipedia ), I neede to have 2 menus: One for “the whole project” and one for each page the user is reading. My solution for that was separate the project in tabsm so the user doesn’t get los and the header remains on top all the time. Each tab having it’s own menu felt a lot more organized and eazy to understand.
The entire page
The Tasks page
The idea here was to the tasks be organized just like a Scrum board, with tasks separated in cards and showing it’s progress. Users can move cards and by clicking on each card, you see the Task details.
Clicking on a task you’ll see it’s details where there’s a description, comments, archives and the user can choose to Fund or DO a particular task.
Clicking on a Teammate, you can see he’s/her’s profile Page. In this case below, this is the Logged version of it.
Each user has it’s own dashboard, showing the overview of all his activities on the platform.
The notifications page shows all the interactions made on a Project that the user owns or a Project the user is participating ( Fundind or Doing ). It also shows the editing suggestions on the Projects, since anyone can edit a project.
The platform also has a messaging system.