PORTFOLIO ANCA TRIF

OVERVIEW

UX/UI/WEB DESIGN
PHOTOGRAPHY ONLINE PORTFOLIO // 1 - 3

BARBER SHOP WEBSITE // 4 - 6

FINANCIAL SERVICES WEBSITE // 7 - 9

GARDENING SERVICES WEBSITE // 10 - 12

INTERACTION DESIGN
iOS APP INTERFACE: TRACK REPORT // 13-14

MOBILE APP: MAIN MENU REDESIGN // 15-16

MOBILE APP: POINT INFORMATION // 17-18

MARKETING & DESIGN

UPGRADE TO PRO IN-APP BANNER // 19

GOOGLE ADWORDS IN-APP BANNER // 20

WEBSITE MARKETING BANNER // 21

PORTFOLIO ANCA TRIF
UX/UI/WEB DESIGN

PHOTOGRAPHY ONLINE PORTFOLIO

Request: The client needed a simple and clean online portfolio

for desktop and mobile devices. They also required an integrated
order form for books and a request form for ne art prints.

Solution: After discussing the brief with the client, I built the
main framework of the website and decided on the most import-
ant funtionalities. Emphasis had to be placed on photos and pho-
tography collections.
PORTFOLIO ANCA TRIF
UX/UI/WEB DESIGN

The design had to be minimal and the information well struc-

tured. On mobile, the form module would need to appear in a
pop-up window, because the small space would not allow an
arrangement similar to the desktop version.

2
PORTFOLIO ANCA TRIF
UX/UI/WEB DESIGN

Desktop version vs mobile screen: a hamburger icon was neces-

sary to hide the main menu options in the mobile version. This
way, the homepage background image stays in focus. The typog-
raphy choice of Courier New font was mainly based on the need
to nd a simple, neat and rather industrial design solution.

3
PORTFOLIO ANCA TRIF
UX/UI/WEB DESIGN

BARBER SHOP WEBSITE

Request: The customer needed a presentation website of their

new hair salon in Munich. They delivered the color palette and
the font choice before the start of the project. A price list was also
available and needed to be integrated in the design.

Solution: I tried to integrate the already available materials, fonts

and design elements into the new design, in order to maintain
corporate identity guidelines. Also, new photography was avail-
able and had to be emphasized. The hamburger menu on the
homepage replaces the usual header menu, in favor of more
space and more focus on images.

4
PORTFOLIO ANCA TRIF
UX/UI/WEB DESIGN

The customer decided on very little content and more focus on

photography with the newly-designed salon. This makes the web-
site simple, but ecient, by oering the customer the necessary
information from the rst clicks.

5
PORTFOLIO ANCA TRIF
UX/UI/WEB DESIGN

The mobile version of the website needed to focus more on con-

tact information. The Call and Email buttons were designed to be
accessible to the user at any time. Because of the landscape
photos available for presentation, the gallery had to be organized
vertically, as oposed to the horizontal arrangement on desktop.

6
PORTFOLIO ANCA TRIF
UX/UI/WEB DESIGN

FINANCIAL SERVICES WEBSITE

Request: A simple presentation portfolio was requested by the

customer, a nancial brokerage rm. Their old website needed to
be brought up-to-date with the new web technologies and a new
fresh look was requested.

Solution: After discussing the brief with the client, the conclusion
was that the website needed an integrated nancial info widget, a
live chat function, a newsletter and blog functions. Also, a respon-
sive approach was also in focus, with desktop, tablet and mobile
display versions.

7
PORTFOLIO ANCA TRIF
UX/UI/WEB DESIGN

The previous website solution was less focused on services and

there was a general lack of clarity in what regards the types of
services the rm oers. I had to make sure that this situation
does not repeat and that the users understand exactly what this
company oers.

8
PORTFOLIO ANCA TRIF
UX/UI/WEB DESIGN

A blog funtion needed to be integrated in the website and the

tablet and mobile responsive versions were to be the main focus.
A clear structure and a user-friendly interface were the most
important characteristics.

9
PORTFOLIO ANCA TRIF
UX/UI/WEB DESIGN

GARDENING SERVICES WEBSITE

Request: The client requested an online portfolio for their gar-

dening services in the Munich area. The structure was discussed
with the client and a brief was necessary, in order to pin down the
most prominent client needs: focus on portfolio, service structure
and an easy access to contact data.

Solution: A one-pager structure resulted from the discussion with

the customer. Simple lines and at design, as well as mobile and
tablet responsiveness were mainly considered. As the customer
delivered the main framework, I had to make sure that good
design embraces a clear and simple functionality.

10
PORTFOLIO ANCA TRIF
UX/UI/WEB DESIGN

One of the diculties I encountered was the long description that

was necessary for each service. Initially, this description was to
appear on mouse-over, but it soon turned out that the text might
take more space than initially assumed it would. Solution: a
pup-up window that permits navigation through all services.

11
PORTFOLIO ANCA TRIF
UX/UI/WEB DESIGN

The service module takes dierent formats when scaled on small-

er devices. The project required a very good communication with
the web developer in order to achieve these results.

12
PORTFOLIO ANCA TRIF
INTERACTION DESIGN

iOS APP INTERFACE: TRACK REPORT

Request: The product owner requested the integration of a new

functionality for a geo app: the possibility to download a report
of a track with all its subtracks, images, texts, tags and statistics
as PDF. The user can afterwards save it for their collection or
share it with a friend.

Solution: My job was to discuss the framework and the informa-

tion structure and organize it neatly, so that the user ow is natu-
ral and intuitive.

13
PORTFOLIO ANCA TRIF
INTERACTION DESIGN

The report had to display content vertically from the most rele-
vant to the least relevant details. Depending on how much the
user wanted to extend the report, they could either show or hide
information. The order of importance or relevance is the follow-
ing: track information - subtrack information - point information.

14
PORTFOLIO ANCA TRIF
INTERACTION DESIGN

MOBILE APP: MAIN MENU REDESIGN

Request: The customer requested the restructuring and reorgan-

zation of the main menu structure of a mobile app. In time, after
new features were added, the menu became more complicated
and less optimal from the esthetic, but also from the functionality
point of view.

Solution: My main task was to restructure the menu items and

reorganize hierarchy. Another decision was to replace the collec-
tion of menu icons, which became inconsistent with each other
and a lack of visual identity was noticed.

15
PORTFOLIO ANCA TRIF
INTERACTION DESIGN

Once the structure was recreated and discussed with the custom-
er, a compromise was made regarding the items that were still
relevant and the ones that needed to be removed or changed. An
overall visual identity was achieved and more consistency was
created in general, without altering the initial purpose of the
menu and its main functions.

16
PORTFOLIO ANCA TRIF
INTERACTION DESIGN

MOBILE APP: POINT INFORMATION

Request: One of the customer requests on the geo app develop-

ment project was the reorganization and design of the point
information menu. Once tapping on a certain point on a track, an
app user can access point information like photos, tags, statistics,
texts connected with that point

Solution: I created a preview and a full-view version of the point

information menu. The preview would prioritize photos and sta-
tistics, whereas the full-view would show all available point data.
This would make navigation between points easier, with the pos-
sibility to also access the most relevant point data, without enter-
ing the full-view mode all the time.

17
PORTFOLIO ANCA TRIF
INTERACTION DESIGN

The full-view menu would also allow the user to interact with
point information, to add photos and tags and to write texts for
each point relevant to the user - the so-called favorite points.
The challenge was to nd the simplest solution that would also
respect the apps visual identity and the color pallette. Because
the app is very colorful, another challenge was to avoid using too
many colors that would make visual identity too complex and
thus cause the user to lose focus.

18
PORTFOLIO ANCA TRIF
MARKETING & DESIGN

UPGRADE TO PRO IN-APP BANNER

Request: The customer needed to introduce an in-app purchase

banner to remind the customer of the benets that they have by
updating their app to the PRO version.

Solution: A simple, structured, at-design banner was the

agreed-upon solution for this request. An illustration needed to
be created and integrated into the design, that would help the
user get the feeling of more freedom of action, once the update is
made.

19
PORTFOLIO ANCA TRIF
MARKETING & DESIGN

GOOGLE ADWORDS IN-APP BANNER

Request: The client requested a collection of call-to-action Google

Ads banners of dierent standard sizes for various devices. The
ads were meant to attract the attention of potential users
through Google Ads campaigns.

Solution: I chose to use as primary color the app blue and

screenshots of the app. In a few words, I tried to dene a slogan
that would give the users a general idea about what the app does.
I also chose to place the call-to-action button in the right lower
corner, for visual balance.

20
PORTFOLIO ANCA TRIF
MARKETING & DESIGN

WEBSITE MARKETING BANNERS

Request: The client requested call-to-action banners for their app

presentation website. They had the purpose to present the user
the main purpose of the app and to raise their interest to down-
load it.

Solution: Similarly to the in-app banners, visual identity also had

to be respected in this case. Content and call-to-action buttons
are adapted to the desktop users, but the idea is the same: use
relevant information and images to attract potential app users.

21