Portfolio UX / UI 2019

Portfolio

Product Design

|

UX

|

UI

|

Extras

viokayla@gmail.com

Violeta Cejas About me Product designer, UX / UI I love building tech- based, usercentered products. I have pretty cool visual and tech skills, combined with a strong understanding of the business models and user needs. That's why I am the perfect link between developer team and other departments.

I improve my knowledge and skills by attending and organizing events through many tech and design communities.

Experience 2014 Freepik My first job was feeding Freepik vector marketplace as illustrator and graphic designer.

2016 Nosolosoftware Into this consultant I was formed in product design and agile methodologies. I worked in products for Bankia, La Liga or Securitas Direct.

2018 Fontown I worked on fonts catalogue in order to offer an entire web experience for users.

Telegram: @violetacejas +34 606 28 75 70

Skills UX / UI

Project management

2015 Fonoma

Architecture information

Leadership

In Fonoma I learnt about a startup necessities: from marketing, analytic tools or support, to my first steps with visual and product design.

User flows

Agile methodologies

Metrics

Technology

Research

2017 Genially As lead product designer, I leaded the implementation of their first design system, optimizing this way UI maintenance and taking advantage of all React potential.

Interest & Others

Prototyping

Entrepreneurship

Visual design

Business

HTML / CSS

Events

QA

English

Portfolio

Projects

01

Fontown

04

Siifacil

02

Genially Panel

05

Vector illustration

03

Genially Editor

06

Branding

Violeta Cejas

01 Context

Summary

Client

Problem

Font catalogue in the cloud managed by a desktop app.

Users didn't understand exactly what the product was and how to quickly find the right font. Neither could they consult the font catalogue without downloading the desktop app.

Team Product owner, product designer, tech engineer.

My role

These hypotheses were corroborated and analysed using tools such as Amplitude (user journeys and metrics) and HotJar (user behaviour recorders).

Product designer, UX, UI and QA.

My contribution Low fidelity prototypes in order to identify user pains and try some solutions.

Analyze solutions found by competitors in order solve similar problems.

Prioritize most important requirements / goals with tech department.

Design system adaptation to new website necessities.

Buyer persona

Solution

Sebas, a freelance graphic designer, invests a lot of time choosing fonts for his projects and a lot of money buying font licenses.

Be able to consume the font catalogue from the web (consult, test and install fonts). In this way the user's expectations are controlled much better before downloading the desktop app.

Interfaces and final arts to be consumed by developers.

QA tasks: functional and design implementation testing.

04

Font catalogue

Catalogue in web By making consumible the font catalogue in web, several problems are solved at the same time:

The Fontown idea is better to be understood when you can interact with product as the way you do it at Desktop app.

Users can find the right font as soon as possible by filtering, using intelligent search, trying custom text, etc.

The download friction point is reduced, because trying main functionality users can expect similar behaviour in desktop app.

05

Filters After surveying graphic designers about how much time they spent choosing a font for a project, and what aspects they relied on for that decision, we decided to make some changes that would make finding a font faster and easier: Placing the filters by project type and style at first, are the most useful for users.

Make more visual the filters of typography's characteristics (weight, size, length...).

Add free / premium filter, it is an important decision about licensing that graphic designers need to know.

06

Smart search Searching with intelligent suggestions also helps to solve the problem of find quickly and easily the right typeface.

07

Processes Design product team sessions

Low fidelity prototype

User flows and interface design

User pains and product improvements, were defined analyzing data and putting it in common with team. Final requirements and solutions became by different points of view.

Solutions were tested with some buyer personas that were interviewed and recorded interacting with the prototype. The feedback was applied to final interfaces.

Finally, all data, feedback and knowledge about frictions was carefully painted in user interfaces for the public version of Fontown catalogue.

08

02

Panel Context

Summary

Client

Problem

Web app to create and share interactive content. New generation Power Point.

(1) The choice of creation type and the choice of template were confusing because users made both in the same place.

Team Product owner, creative director, customer experience lead, product designer.

My role

(2) Managing more than 20 creations was very difficult.

(3) There was a complex web of plans, but users couldn't compare prices and features.

Product designer, project manager and QA. Solution Buyer persona Carolina, as a young teacher with Microsoft Office background, needs attractive resources to support her classes.

Hector, as graphic designer in a communication company, needs to make interactive media content very quickly.

(1) Create a genially in two steps: choose type of creation at first and choose a template after.

(2) Efficient file management using folders.

(3) Detailed description of educational and professional plans with comparative table.

My contribution Part of the buyer persona identification process.

Prioritize most important requirements / goals with tech department.

Build and implementation of the first design system in order to make interface scalable.

Redesign of all interfaces, make final arts to be consumed by developers.

Project manager tasks: coordinate translations resources and copy, support tools implementation as Zendesk, GDPR implementation and other digital services.

QA tasks: functional and design implementation testing in different browsers and devices.

09

Step by step The most important decisions in Genially are: what kind of creation am I going to make and what template am I going to use.

Before redesign, users took both decisions at the same page, into a very ornate interface and without focus over the election.

Solution was to build different worlds for each step: A categories gallery distributed by the use of creations (to present, to interact, to explain, to share).

Templates

A template gallery where users can filter, search and focusing in template design election.

Categories

Creations control panel

Everything in place Before the redesign, all creations were placed on a single page and users needed to make infinite scroll to find them.

Folders were essential to manage around 20 creations or more. Also, the ability of moving and deleting from inside and outside the folders was important. And for being extra effective, we decided that creations could be moved from main page to folders by drag&drop.

11

Compare and analyze Genially has a complex web of premium characteristics that wasn’t detailed in pricing page in order to compare prices and features.

The entire product team made a hard work ordering and describing features one by one.

12

COLORS

TYPEFACE

primaryLight1 #F497BB

primary #ED518D

primaryLight2 #FBDCE8

gray1 #232323

gray2 #747474

gray3 #A3A2A2

success #6CC4CC

warning #F68E62

danger #F36274

cocktail

limelight

sunset

SETTINGS Base Size: 1rem = 16px Line Height: 1.7

gray4 #D3D3D3

SPACING

LAYOUT

quarter - 5.5px

.25x

third - 7.33px

.33x

double - 44px triple - 66px quadruple - 88px X 1.375rem 22px

white #FFFFFF

afternoon

space - 22px

GRID

Genially is the product where I’ve been got the opportunity to build a strong design system from zero.

Grid and size unities have been consistent through the three apps Genially has got (control panel, editor and viewer).

PARAGRAPH

halve - 11px

Scale: 1.4

Design system

secondary #B075DB

quintuple - 110px

2x

.5x X 2x 3x 4x 5x

9x

1034px \ 12 columns \ gutter width = 22 \ column width = 66 100%

13

03

Editor Context

Summary

Client

Problem

Web app to create and share interactive content. New generation Power Point.

(1) Recurring users did not make the most of the tool due to very poor usability.

Team Product owner, creative director, tech engineer, product designer.

(2) Non-professional users were overwhelmed with too many options.

(3) For professional users Genially looked like an amateur product.

My role Product designer, project manager and QA. Buyer persona Carolina, as a young teacher with Microsoft Office background, needs attractive resources to support her classes.

Hector, as graphic designer in a communication company, needs to make interactive media content very quickly.

Solution (1) Navigation through layers of information, leaving the simplest functionality at hand and complex options in the background.

(2) Interface redesign looking for a cleaner, simpler and more professional look being intuitive at the same time.

(3) Performance and design improvement of core functionality -add interactivity to an itemintegrating a paid text editor.

My contribution Supporting digital services decisions.

Prioritize most important requirements / goals with tech department.

To be consistent with design system defined in Genially Panel project.

Redesign of all interfaces, make final arts to be consumed by developers.

Project manager tasks: coordinate translations resources and copy.

QA tasks: functional and design implementation testing in different browsers and devices.

14

Clear and simplicity Genially is a drag&drop editor which can look like quite simple. Almost features are included in the switch left sidebar and in the toolbar which appears when some item is selected.

But the UX and UI problems are considerably harder in a single page app. Two best milestones in this redesign were: Hide secondary features because they added noise to nonprofessionals,. This way users who want to explore more, can do it by layers of information, and users who want to use main functions can work without distraction.

To achieve a more professional aspect that remembers Adobe interface design.

Add text to creation

15

Professional options in background

ELEMENTO

An example of professional use of Genially is the advanced item editing.

SVG SVG

Users can find and activate this feature in settings, the window does not have to stay visible when application runs, only when an advanced user requires it.

CAPAS

Texto

Professional editing options

ELEMENTO

Contenido enrique…

CAPAS

Grupo Mantener proporciones

Alto

Ancho

180

180|

Posición X 11.25

Posición Y 99.06

Rotación (º) 0

APLICAR CAMBIOS

16

Interactividad

Better services and performance Genially's value proposition is to add interactivity to elements. However, the interactivity editor had very poor performance and did not look like the rest of application.

Integrating Froala editor, we were able to maintain functionality, improve performance and make the interface completely custom.

Interactivity editor

Components A good frontend technology election, as React, was essential to build components structure and make fly the development.

18

04 Context

Summary

Client

Problem

Invoice manager for freelancers with personal assessor access.

High complexity management of invoices and finances for non-professionals.

Operations director, product owner (client), product designer, tech engineer.

Lack of centralization of all tasks related to invoicing: control of income and expenses, invoicing generation, presentation of taxes and contact with an assessor.

My role

Solution

Product designer, UX, UI and project manager.

Centralized web platform with the following functionality:

Team

Buyer persona Fernando, a freelance graphic designer, invests too much time and money organizing his income and expenses to declare his taxes.

Simple invoice management service and online advice via chat.

Presentation of taxes within the same platform.

My contribution Product definition with client from zero.

High fidelity prototypes in order to show info architecture and data distribution to client, also to estimate with developers team.

Analyze solutions found by competitors in order solve similar problems.

Prioritize most important requirements / goals with operations director.

App logo and look’n’feel.

Design system implementation.

Interfaces and final arts to be consumed by developers.

Fast digitalization of invoices using OCR technology.

19

Manage your invoices easily Siifacil born from necessity of having a centralized management of invoices for freelancers. Usually, they pay for advice services because payment taxes processes are so hard.

The main goals to achieve designing Siifacil were:

Organizing numbers and data in a way that could be consumed by a non-professional user.

To create an invoice as simple and fast as possible.

Integrate the application with SII public system to have available the option to declare taxes online and legally.

To make friendly all these frightening processes.

User dashboard

Online assessor To have a place where ask to your assessor comfortably, share files and make invoicement monitoring was essential.

This way, users can receive advice about their invoices and finances and be sure their documents are being declared correctly to tax office.

Conversations and shared files with assesor

21

Presenting taxes To follow up the invoices declaration, was very important design a visual system that showed the state of each invoicement in real time.

Clie nte

Draft Pending validation Validated by assessor Declined by assessor Validated by SII Errors by SII Declined by SII

Invoices table

22

05 Vector illustration During my step in Freepik I made tons of illustrations in many different ways.

By my fine art formation, is not difficult for me adapting in every style: iconographic, realistic, polygonal, hand-drawn, flat, isometric‌ Here you have only two works. My two best vector creations.

23

Violeta Cejas

06 Branding Although this portfolio is based in digital products, I’ve wanted to show this area for a reason: I'll aways be very consistent with the look and feel in any way, digital or not.

In fact, I love materials and printings, I take care of them the same way than a pixel perfect icon.

25

Logofolio As graphic designer I’ve had the opportunity to approach mainly two kinds of marks: Software products or services as Flaranda, Videoma, Salmorejo, Siifacil, Wannatol and Nosolosoftware.

And tech communities as Devs&Dungeons -videogames developers- and Cosfera coworking space-.

But the best concept on this gallery is for Autismo. The only one logo which doesn’t belong to tech area. Autismo put its accent on the absence of T feet, which symbolize the mystery of mental disabilities, science hasn't got resolved the origin of many of them.

26

Thanks for watching

viokayla@gmail.com

|

Telegram: @violetacejas

|

+34 606 28 75 70