PORTFOLIOmartinahapavel.com/wp-content/uploads/2020/05/Portfolio2020MJovic.pdfject, I made track of...

Martina Jovic / Hapavel

Visual / UI/UX designer

PORTFOLIO

May 2020

2Martina Jovic , Portfolio 2020

CO NTE NTS

B2B SaaS Solution for Risk Management 3

Bioenergy And Food Security OLT 13

TENEST - Branding 20

NeoBank App 26

Omni Lån - Logo 29

American Credit Web 34

” Secure.

Modernize.

Empower.

Work at Rencore as Visual and UI/UX Designer

2017/18, Germany

Rencore is a B2B SaaS company providing award-winning solutions essential to the SharePoint and

Office 365 space. They empower your organization to extend SharePoint securely through Share-

Point applications. SharePoint and Office 365 needs to be expanded to accommodate more effective

collaboration but it increases the potentials risks. Applications that are custom-built expose organi-

zations to risks. The Rencore platform (SPCAF, SPTrans- formator, Analysis Cloud) helps to analyze

and manage applications to discover and resolve any risks before they become a problem.

RESPONSIBILITIES

Branding, Publications, User Research, Wireframes, Flow charts, Visual/UI/UX Design, Web application,

Desktop application, HTML/CSS/JS

B2B SaaS Solution for Risk Management


Introduction

Analysis Cloud is a B2B SaaS tool for a Risk Assessment of different kinds of environments in the

Cloud like Sharepoint, Sandbox and so on. The main purpose of the tool is to discover, access and

mitigate the potential risks in the business environment to prevent them from becoming a bigger

problem like data leaks. End users are company administrators as well as managers or company ex-

ternal consultants.

Tools: Sketch, Illustrator, InVision, SendGrid, WebStorm, Visual Studio, Git, HTML/CSS/LEES/JS

The team behind the product

With Tobias Zimmergren as an excellent Product owner and Torsten Mandelkow as an awesome

CTO, I worked closely within the product team. The development was organised using an Agile meth-

od with Jira as a tool, defined epics, user stories and so on. Part of the team members worked remote-

ly but we had good communication via Slack and Zoom. I did not felt that I was missing something.

I found that the 2-week sprints were very motivated, more than just a list of tasks that we needed

to do and were a good way to track progress. To speed up the Frontend Development I also helped

by adding design style and features as HTML/CSS/Less changes directly into the code via Webstorm

and Visual Studio.


My responsibilities on the project

• Assistance with User research, Competitive research

• Branding

• Definition of a Design System

• Taxonomy, Iconography, Color definition, Typography

• UX / Flows / Mapping the solutions / Blueprint journey

• Visual Design / UI / Prototype

• HTML/CSS/LESS/JS

• Constant Improvement

We had several iterations of an overview page aligning it with end-users feedback based on 1on1

interviews. The feedback was that we had overwhelming data, it was not clear what that data meant

and at the end what can the end-user do about it and how can he fix the problem. The decision was

made to create a less overwhelming overview page with only relevant information that is described

so that even a manager can understand the meaning and the status and then they can dive deeper

to find out more. From the perspective of the user to show the most critical issues and guide them on

how to solve it. The goal was for the user to come back regularly and solve potential issues that could

cause them data leaks.

To make the end-user feel better we decided to move away from Risk as the main KPY towards the

calculation based on different factors. As an outcome, we got the general health of an environment as

the main KPI and defined the sentences that describe the current status. Since all the environments

were not equally important we also added a relevance factor as important metrics.

Registratio

screens at

Rencore Cloud


First screen,

list of all environ-

ments


Management of

environment

User Preferences

Steps in starting a new risk assessment


Environment Overview screen Detailed view of a specific items


Suggestion for new features



After an interview with a top demanding end-user, it was clearer what a delightful product could look

like: End-user would like to be able to customize the overview page according to his own needs. He

would also like to save tracking and messaging to him as he pleases daily, defined by subject, defined

by risk level, and so on. Since the budget was not covering that feature. So I have proposed a compro-

mise that at least we could do is to save the last searches and filters so that end users can easily check

where they left off that last time.

Summary

Interviewing the end-users we got extremely valuable feedback, but I wish we had done then earlier

in the ideation phase to cut down the development costs. It was also important for us to learn the

importance of creating the MVP product that is upgradable with additional features depending on

the end-users needs. On this project, I have learned to work in an agile environment with high-quality

people developing B2B SaaS software. After this experience, I realised that I do not wish to go back to

Marketing departments cause I feel more comfortable in the Product team because it is more struc-

tural and exciting for me to solve the complex problems to make end-users feel delighted reaching

their goal.

” Initial Screening Of

Specific Bioenergy Projects

To Assess The Projects’

Environmental, Social And

Economic Performance

Informel, Ltd.

2016/17, Croatia / EU

The main purpose of the BEFS OLT (crop and livestock residues) is to perform an initial screening of

specific bioenergy projects to assess the projects’ environmental, social and economic performance.

Hence, it is a tool that provides an indication of projects’ strengths and weaknesses and supports de-

cision making and at the same time raises awareness on sustainability performance among the users.

RESPONSIBILITIES

Icons, Illustrations, UI Design, Bootstrap, HTML, CSS, Limesurvey Template, Testing User Experience, Form

Design, Testing, Visual Studio, Eclipse, JasperSoft Studio, Design and Code documentation

Bioenergy And Food Security OLT


Introduction

The Bioenergy and Food Security Operator Level Tool (BEFS OLT) (crop and livestock residues) was

developed within the project “Supporting Public and Private Sector Capacities in Sustainable Agri-

cultural and Bioenergy Investments”, under the collaborative agreement between the Food and Ag-

riculture Organization of the United Nations (UN FAO) and the European Bank for Reconstruction

and Development (EBRD).

Purpose of the tool

The main purpose of the BEFS OLT (crop and livestock residues) is to perform an initial screening of

specific bioenergy projects to assess the projects’ environmental, social and economic performance.

Hence, it is a tool that provides an indication of projects’ strengths and weaknesses and supports de-

cision making and at the same time raises awareness on sustainability performance among the users.

By accomplishing all aforementioned, business climate can be improved and the development and

implementation of projects utilizing biomass residues can be facilitated.

Two bioenergy pathways considered are Crop residue and Livestock residue pathway that involves

the utilization of crop and/or livestock residues for energy production. Each pathway consists of sev-

eral components which can be assessed as a stand-alone project or as a part of the whole.


Who is it for

This tool is publicly available, a web-based tool that can be used by various groups of users such as:

• Investors interested in implementing specific bioenergy project

• Financial institutions (banks, funds etc.)

• Public institutions (ministries, agencies, academic institutions etc.)

• Farmers and farmer associations

• Non-governmental organizations

• All other bioenergy market players

The team behind the project

Energy Institute Hrvoje Požar created the questionnaire and documentation for an application. Pro-

ject manager Krešimir Vrhovcak PM and Development Lead was responsible for the development of

an application. As a designer in a team, I was responsible for research and all visuals, also I styled the

template for Limesurvey and at the end designed a final report for Jasper studio. One of the nicest

parts was creating pixel perfect icons and infographics for two chains of production. During the pro-

ject, I made track of all visual design guidelines created and code (HTML&CSS) documentation for

further usage and sustainability of an application. And it was nice to keep the team of students and

part-time workers altogether.

This international project was tested in Egypt and now it is in use all across Europe. It was a pleasure

to be a part of such a significant project.

• Food and Agriculture Organization of the United Nations (UN FAO)

• European Bank for Reconstruction and Development (EBRD)

• Energy Institute Hrvoje Požar, www.eihp.hr

• Krešimir Vrhovcak – Development Lead


My role

As a designer in a team, I was responsible for the following:

• Competitive Research, refining the roles of the end-users, Solution diagram, roadmap definition

and possible paths of a product, Wireframes, Flows

• Visual / UI UX design, typography, iconography, design documentation, handover package

• Creation of HTML/CSS templates for Limesurvey Questionnaire of Assessment.

• Design Report in PDF A4 version of the Questionnaire of Assessment that can be printed out

and signed out using Visual Studio, Eclipse and JasperSoft Studio.

• Qualitative research / Interviews 1on1 / Test and improve

• Assistance with creating documentation for the project for end-users in cooperation with EIHP

and PM, documenting libraries, taxonomy design and code

• Coordination of students and externals

Apart from competitive research of similar tools, of and all visuals, I also styled the template for Lime-

survey and at the end designed a final report in PDF A4 version of the Questionnaire of Assessment

that can be printed out and signed out using Visual Studio, Eclipse and JasperSoft Studio.

Most challenging was creating a structural approach to a short summary and score for each indicator

of an assessment on only one page, the current status of the project is clear for each category of an

end-user and the final score. One of the nicest parts was creating pixel-perfect icons for each process

and infographics for two chains of production that are usable in colour but also when printed in gray-

scale. My role was also to coordinate and motivate the team of students and part-time contractors

altogether to finish the project on time.


Summary

This international project was tested in Egypt and now it is in use all across Europe. It was a pleasure

to be a part of such a significant project that makes a difference and assists users to track and ac-

cess their specific bioenergy projects on different levels of responsibility. During the project, I made

documentation of all visual/UX/UI design patterns, taxonomy, iconography, HTML&CSS library and

created guidelines for handover and further usage and sustainability of an application. My role was

also to coordinate and motivate the team of students and part-time contractors altogether to finish

the project on time. Besides the Visual/UI/UX design work, It was interesting to learn new tools like

Limesurvey and JasperStudio.

” My brain is only

a receiver, in the

Universe there is a core

from which we obtain

knowledge, strength

and inspiration.

Nikola Tesla

TESLA Luxury Resort is next-generation, ecologically-minded resort, perfect for Summer escapes

amongst the lakes and forests and Winter activities amidst idyllic snow-scapes, guests can choose

from 70 luxurious ‘Villas’. A showcase of the very best cuisine, local craftsmanship, Croatian art, in-

genuity and natural beauty. The name ‘TENEST’ is inspired by the great world innovator Nikola Tesla,

who originated from the neighbouring town Smiljan.

RESPONSIBILITIES

Logo Design, Stationery, Brochure, Giveaways

Concept for a tourist project

2019, Croatia

TENEST Branding

Dynamic + Hightech + Nature + Harmony + Mystery + Calmness + Elegance


TENEST PRIMARNA SREDSTVA KOMUNIKACIJE 12


TENEST LOGO 4

CMYK: 0 20 0 85

HEX: #493F43

COLORS

TYPOGRAPHY

Lato Regular

ABCĆDEFGHIJKLMNOPQRSŠTUVWXYZŽabcć-defghijklmnopqrsštuvwxyzž1234567890‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*

https://fonts.google.com/specimen/Lato

CMYK: 55 0 85 0

HEX: #86bd34

CMYK: 0 0 8 10

HEX: #EDEFEC

” Concept based on my work at Fidor Solutions

2019/20, GermanyHow to Meet The

Financial Challenges of

Millennials NeoBank concept web and mobile application is the way for the user to monitor and administer

hers/his banking services and track/manage their finances. Everything is on the palm of the user with

rich user experience and in real-time. Users can manage all of their personal data, accounts details,

track expenses across aggregated banking accounts as well ass make transactions, get insights on

account, cards or loans and get related reports. Applications also suggest a user create/manage a

budget with an engaging user interface, easy to manage and adjust the budget during the month/

week/year.

RESPONSIBILITIES

Logo, Typography, User Research, Web & Mobile App, User Interface, User Experience

NeoBank App

” We know how mortgage

or private loan business

works and how consumers

can optimize their chances

of finding the right one.

Omni Lan Co., Ltd.

2019, Sweden

Best comparison dependable site for private loans for bästalåneförmedlaren.se

and mortgage loans for bättrebolån.se that forward traffic to banks and loan brokers mainly contain-

ing information about trustworthy private financials.

RESPONSIBILITIES

Logo, Typography, Colors

Omni Lån Logo


Infinity mark stands for every loan offers that you can find out there, and form that huge amount of offers OMNI LAN helps you to choose your own.


OMNI LÅN

FONT

ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖabcdefghijklmnopqrstuvwxyzåäö1234567890

MADE Evolve Sans EVO BoldABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖabcdefghijklmnopqrstuvwxyzåäö1234567890

MADE Evolve Sans Bold

MADE Evolve Sans Font Familyhttps://befonts.com/made-evolve-sans-font-family.html


The basic idea for private loans logo is the crown, Swedish money. The basic idea for mortgage loans logo is two outlined overlaping houses

” The difference

you can trust.

AMERICAN CREDIT knows how quickly a small business has to respond to its markets and oppor-

tunities, they are a Fintech platform dedicated to fast secured business loans in California. Website

is in theporcess of redesign and this was a suggestion. Project is still in progress.

RESPONSIBILITIES

Content strategy, UX and Web Design

Competition on Crowdsprings for freelancers

May 2020, 5 days project

American Credit Web

Homepage About Us Product Page FAQ


Martina Jovic / Hapavel

Visual UI/UX designer

Munich, Germany // Zagreb, Croatia

hr.linkedin.com/in/martinajovic

xing.com/proile/Martina_Jovic

[email protected]

THANK YOU!

martinahapavel.com


PORTFOLIOmartinahapavel.com/wp-content/uploads/2020/05/Portfolio2020MJovic.pdfject, I made track of...

Documents

Transcript of PORTFOLIOmartinahapavel.com/wp-content/uploads/2020/05/Portfolio2020MJovic.pdfject, I made track of...