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