{"id":538,"date":"2019-04-01T20:09:33","date_gmt":"2019-04-01T20:09:33","guid":{"rendered":"http:\/\/miguelbarrero.es\/?post_type=portfolio&p=538"},"modified":"2025-03-07T11:16:30","modified_gmt":"2025-03-07T11:16:30","slug":"tribo","status":"publish","type":"portfolio","link":"https:\/\/miguelbarrerodesign.com\/index.php\/portfolio\/tribo\/","title":{"rendered":"Tribo"},"content":{"rendered":"[vc_row thb_divider_position=”bottom” el_class=”align-center” css=”.vc_custom_1554114219756{padding-top: 10vh !important;padding-bottom: 10vh !important;}”][vc_column offset=”vc_col-lg-9 vc_col-md-10″ css=”.vc_custom_1554114159103{border-radius: 10px !important;}”][vc_row_inner][vc_column_inner width=”3\/6″][vc_column_text animation=”animation bottom-to-top”]\n

A project management web app for a new business generation<\/span><\/h2>\n

Tribo is a Project management web app that wants to satisfy new business generation of dynamic teams, freelancers and Startups. Different User experience design technics were used in order to know which oportunities have the market for digital project management, which target have biger needs and what products should the web app include for satisfying the target.\u00a0 A visual identity and complete interface for desktop, tablet and mobile must be also designed.<\/span><\/p>\n[\/vc_column_text][\/vc_column_inner][vc_column_inner width=”1\/6″][\/vc_column_inner][vc_column_inner width=”2\/6″][vc_empty_space height=”40px”]\t\t\t

\n\t\t\t\t\t\t
Client:<\/strong> Tribo<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\tMy role: <\/strong>\n\t\t\t\t\t\t\t\t\t\t\t\t\tLead Art Direction
UX\/UI Design
Digital Product Design
Conception
Branding
Creative Direction\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t[\/vc_column_inner][\/vc_row_inner][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom” el_class=”align-center”][vc_column offset=”vc_col-lg-9 vc_col-md-10″]\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t[vc_empty_space][vc_column_text]\n

Solution<\/strong><\/h4>\n[\/vc_column_text][vc_column_text]\n

Innovative features and design based on our users’ needs.<\/span><\/h2>\n[\/vc_column_text][vc_row_inner][vc_column_inner width=”1\/2″ animation=”animation left-to-right”][vc_column_text]\n

UX Design technics were used to create features that cover our user needs. These solutions were a functional virtual office for an optimal workflow, optimally big data volumes handling, interactive project’s tracking tool and functional networking features like an accurate candidates search tool or a useful professional pool feature to check their availability, portfolio, ratings and contact them easily. All these products can improve the collaboration between teams helping them to deliver successful projects.<\/p>\n[\/vc_column_text][\/vc_column_inner][vc_column_inner width=”1\/2″ animation=”animation right-to-left”][vc_column_text]These UX technics were applied in process: Competitors Analysis, Surveys, Interviews, define Personas, Task modeling, Emotional Journey, Usability Testing with Paper Prototypes, wireframes and high fidelity design<\/span>.<\/p>\n

As result Tribo is a compelling task management tool for a dynamic team, with a minimalist design and the complete features created and tested to improve the collaboration between the team delivering a successful product.<\/span>[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_empty_space height=”60px”][\/vc_column][\/vc_row][vc_row thb_full_width=”true” content_placement=”middle” bg_gradient_direction=”-90″ thb_divider_position=”bottom” el_class=”align-center” css=”.vc_custom_1619523287328{background-color: #1e355a !important;}”][vc_column offset=”vc_col-lg-9 vc_col-md-10″ css=”.vc_custom_1619522481731{background-color: #1d3559 !important;}”]\t

\n\t\t\t
\n\t\t\t\"\"\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t[\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom” el_class=”align-center”][vc_column animation=”animation bottom-to-top” offset=”vc_col-lg-9 vc_col-md-10″][vc_empty_space height=”105px”][vc_column_text]\n

Features for a dynamic and collaborative workflow<\/strong><\/span><\/h4>\n

After a market research, surveys, interviews and usability testing with wireframes was possible to identify the Tribo pain points and opportunities to cover the needs of our future market. This is an aexample of some products created for Tribo.<\/p>\n[\/vc_column_text][vc_empty_space height=”80px”][vc_row_inner][vc_column_inner width=”3\/6″][vc_empty_space height=”25px”]\t

\n\t\t\t
\n\t\t\t\"\"\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t[\/vc_column_inner][vc_column_inner width=”3\/6″][vc_column_text]\n

Find efficiently the ideal professional<\/strong><\/span><\/h4>\n

Make more effective the search of the ideal professional to help in\u00a0a project<\/span><\/span> thanks to features like a search bar to type more <\/span>intuitively by names, role, career, cleints, etc. It\u00b4s possible also to check availability, see ratings, have a quick view of their portfolio, make a video call and chat with all<\/span> the professionals available in Tribo web app.<\/span><\/p>\n[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_empty_space height=”80px”][vc_row_inner][vc_column_inner width=”1\/3″][vc_empty_space height=”30px”][vc_column_text]\n

Customizable dashboard\u00a0<\/strong><\/span><\/h4>\n

User can move and change easily feature boxes position in endless navigation from\u00a0 side to side. Customize your dashboard by just dragging boxes that intuitively adapting to space.<\/span><\/p>\n[\/vc_column_text][\/vc_column_inner][vc_column_inner width=”1\/3″]\t

\n\t\t\t
\n\t\t\t\"\"\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t[\/vc_column_inner][vc_column_inner width=”1\/3″]\t
\n\t\t\t
\n\t\t\t\"\"\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t[\/vc_column_inner][\/vc_row_inner][vc_empty_space height=”120px”][vc_row_inner][vc_column_inner width=”1\/2″ css=”.vc_custom_1584400410846{margin-right: 25px !important;margin-left: 15px !important;}”][vc_empty_space height=”25px”]\t
\n\t\t\t
\n\t\t\t\"\"\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t[\/vc_column_inner][vc_column_inner width=”1\/2″ css=”.vc_custom_1584824626748{margin-top: 10px !important;}”][vc_column_text css=”.vc_custom_1584457215566{margin-right: 15px !important;margin-left: 25px !important;}”]\n

Get your projects under control<\/strong><\/span><\/h4>\n

Have a better overview and management of your projects thanks to the easy to manage the calendar. Be aware of deadlines with the reminders and manage the task more efficient with the tracking projects and the team scheduling view.<\/span>[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_empty_space height=”110px”][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom” el_class=”align-center”][vc_column offset=”vc_col-lg-9 vc_col-md-10″][vc_separator color=”custom” border_width=”2″ accent_color=”#c1c1c1″][vc_empty_space height=”60px”][vc_column_text]\n

The process<\/span><\/h1>\n

<\/h1>\n[\/vc_column_text][vc_empty_space height=”20px”][vc_column_text]The process starts with a competitors research, a survey were run to affirm assumptions about possible targets and their needs with digital organization tools products. After get the results was poosible to define better\u00a0 the oportunities in the market for a new project management app. The process continue with interviews to potential customer that helps to defined better our Personas and set a list with the core features and powerful potential features to cover actual user needs.[\/vc_column_text][vc_empty_space height=”30px”][\/vc_column][\/vc_row][vc_row content_placement=”middle” thb_divider_position=”bottom” el_class=”align-center”][vc_column]\t
\n\t\t\t
\n\t\t\t\"\"\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t[\/vc_column][\/vc_row][vc_row content_placement=”middle” thb_divider_position=”bottom” el_class=”align-center”][vc_column]\t
\n\t\t\t
\n\t\t\t\"\"\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t[\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom” el_class=”align-center”][vc_column width=”1\/6″ offset=”vc_col-lg-9 vc_col-md-10″][vc_empty_space height=”50px”][vc_column_text]\n

User Personas<\/strong><\/span><\/h4>\n

In order to focus on the needs of our target group and represent our key audience, we created three Personas were created. They will be used as a reference when creating the layout and structure of your web app.<\/p>\n[\/vc_column_text][vc_empty_space height=”20px”]\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t[vc_empty_space height=”60px”][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom”][vc_column width=”1\/6″ css=”.vc_custom_1584462734359{margin: 40px !important;}”][\/vc_column][vc_column width=”4\/6″][vc_empty_space height=”60px”][vc_separator color=”custom” accent_color=”#c1c1c1″][vc_empty_space height=”60px”][vc_column_text]I performed a task modeling and a customer emotional map to see possible new needs of the user, confirm the solutions created in the list and get new ones.[\/vc_column_text][vc_column_text css=”.vc_custom_1584458637647{background-color: #ffffff !important;}”]\n

Customer emotional journey<\/strong><\/span><\/h4>\n[\/vc_column_text]\t
\n\t\t\t
\n\t\t\t\"\"\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t[vc_column_text css=”.vc_custom_1669203056471{background-color: #ffffff !important;}”]\n

Task modelling<\/strong><\/span><\/h4>\n[\/vc_column_text]\t
\n\t\t\t
\n\t\t\t\"\"\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t[\/vc_column][vc_column width=”1\/6″][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom” el_class=”align-center”][vc_column offset=”vc_col-lg-9 vc_col-md-10″ css=”.vc_custom_1584381212424{background-color: #ffffff !important;}”][vc_empty_space height=”100px”][vc_column_text]\n

Usability testing<\/strong><\/span><\/h4>\n

Usability tests with digital and analog prototypes were used to obtain the best optimization for the web application. The test was done to potential users of Tribo. After gathering the information we got, such as where the participants got more troubles (pain points) or suggestions for improvements, the features for better usability of the web application were improved.<\/p>\n[\/vc_column_text][vc_empty_space height=”60px”][vc_column_text css=”.vc_custom_1669204102989{background-color: #ffffff !important;}”]\n

Usability testing with paper prototypes<\/strong><\/span><\/h2>\n[\/vc_column_text]\t
\n\t\t\t
\n\t\t\t\"\"\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t
\n\t\t\t
\n\t\t\t\"\"\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t[vc_empty_space height=”100px”][\/vc_column][\/vc_row][vc_row thb_full_width=”true” thb_divider_position=”bottom” css=”.vc_custom_1669203552192{margin-bottom: 10% !important;background-color: #f2f2f2 !important;}”][vc_column][vc_empty_space height=”30px”][vc_column_text]\n

Usability testing with wireframes<\/strong><\/span><\/h2>\n[\/vc_column_text]\t
\n\t\t\t
\n\t\t\t\"\"\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t[vc_empty_space height=”50px”][vc_empty_space height=”40px”]\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t[\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom”][vc_column][vc_empty_space height=”95px”][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom” el_class=”align-center”][vc_column offset=”vc_col-lg-9 vc_col-md-10″][vc_column_text]\n

Branding<\/strong><\/span><\/h4>\n

The branding was designed as well as a concept that helps Tribo to stablish a brand identity on the market. Tribo is about the feeling of unity and belonging of a team working together for the same project. The team speaks its language and develop a unique identity different from others. That\u2019s why the design must be customizable, colorful and minimalist. All the elements created for Tribo like the logo or icons help to find the Tribo personality and communicate the character of community and colaboration that the brand identity.<\/p>\n[\/vc_column_text][vc_empty_space height=”60px”][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom”][vc_column]\t

\n\t\t\t
\n\t\t\t\"\"\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t[vc_empty_space height=”120px”][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom”][vc_column width=”1\/6″][\/vc_column][vc_column parallax=”content-moving” width=”4\/6″][vc_column_text]\n

The final product<\/strong><\/span><\/h4>\n

With the results obtained in the usability tests, the wirefirames were improved. The finals high-fidelity wireframes was designed with the visual identity created for Tribo.<\/span><\/p>\n

A final product were created with optimal solutions for our target and an appealing modern visual identity with a concept that communicates the values of the brand in the market.<\/span><\/p>\n[\/vc_column_text][vc_empty_space height=”30px”]\t

\n\t\t\t
\n\t\t\t\"\"\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t[\/vc_column][vc_column width=”1\/6″][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom”][vc_column][vc_empty_space height=”220px”][\/vc_column][\/vc_row]\n","protected":false},"excerpt":{"rendered":"

[vc_row thb_divider_position=”bottom” el_class=”align-center” css=”.vc_custom_1554114219756{padding-top: 10vh !important;padding-bottom: 10vh !important;}”][vc_column offset=”vc_col-lg-9 vc_col-md-10″ css=”.vc_custom_1554114159103{border-radius: 10px !important;}”][vc_row_inner][vc_column_inner width=”3\/6″][vc_column_text animation=”animation bottom-to-top”] A project management web app for a new business generation Tribo is a Project management web app that wants to satisfy new business generation of dynamic teams, freelancers and Startups. Different User experience design technics were used in order…<\/p>\n","protected":false},"author":1,"featured_media":2789,"comment_status":"closed","ping_status":"closed","template":"","tags":[],"_links":{"self":[{"href":"https:\/\/miguelbarrerodesign.com\/index.php\/wp-json\/wp\/v2\/portfolio\/538"}],"collection":[{"href":"https:\/\/miguelbarrerodesign.com\/index.php\/wp-json\/wp\/v2\/portfolio"}],"about":[{"href":"https:\/\/miguelbarrerodesign.com\/index.php\/wp-json\/wp\/v2\/types\/portfolio"}],"author":[{"embeddable":true,"href":"https:\/\/miguelbarrerodesign.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/miguelbarrerodesign.com\/index.php\/wp-json\/wp\/v2\/comments?post=538"}],"version-history":[{"count":235,"href":"https:\/\/miguelbarrerodesign.com\/index.php\/wp-json\/wp\/v2\/portfolio\/538\/revisions"}],"predecessor-version":[{"id":3959,"href":"https:\/\/miguelbarrerodesign.com\/index.php\/wp-json\/wp\/v2\/portfolio\/538\/revisions\/3959"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/miguelbarrerodesign.com\/index.php\/wp-json\/wp\/v2\/media\/2789"}],"wp:attachment":[{"href":"https:\/\/miguelbarrerodesign.com\/index.php\/wp-json\/wp\/v2\/media?parent=538"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/miguelbarrerodesign.com\/index.php\/wp-json\/wp\/v2\/tags?post=538"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}