Karen Mera — Senior UX/UI Designer Portfolio

CONCEPTS · SYSTEMSHUMAN-CENTEREDINCLUSIVE DESIGNAI-POWERED

SENIOR UX/UI DESIGNER

MAKING DIGITAL
PRODUCTS MAKE
SENSE SINCE 2015.

VISUALLY COMPELLING, FUNCTIONAL, CONCEPT-DRIVEN.

ABOUT

Product Strategy · Product Discovery · UX Research · Information Architecture · Usability · Validation & Experimentation · Business Alignment

HI, I’M KAREN, A SENIOR UX/UI DESIGNER WITH OVER A DECADE IMMERSED IN THE EVOLUTION OF DIGITAL EXPERIENCES, WHERE METHODS MATURE, DISCIPLINES CONVERGE, AND NEW PERSPECTIVES CONTINUE TO UNFOLD.

SELECTED CLIENTS

WORK

NUTENTA

A B2B MOBILE COMMERCE APP THAT HELPS INDEPENDENT SHOPKEEPERS RESTOCK, MANAGE ORDERS AND ACCESS REWARDS.

#UX/UI DESIGN · #COCA-COLA FEMSA· #MOBILE APP · #RESEARCH TO QA

CONTEXT

NUTENTA IS A B2B MOBILE COMMERCE APP CREATED BY COCA-COLA FEMSA TO HELP INDEPENDENT SHOPKEEPERS RESTOCK THEIR STORES, MANAGE ORDERS AND ACCESS REWARDS. ITS CORE FLOWS WERE STILL BEING REFINED, WHILE THE BRAND HAD A LOGO CONCEPT BUT NO VISUAL SYSTEM FOR THE PRODUCT.

ROLE

I COLLABORATED WITH THE UX TEAM ON COMPETITIVE RESEARCH, PRODUCT FUNCTIONALITY, WIREFRAMES AND EARLY PROTOTYPE VALIDATION, AND WITH THE GRAPHIC DESIGNER ON THE PRODUCT’S VISUAL DIRECTION. I THEN TOOK OWNERSHIP OF THE DESIGN SYSTEM, HIGH-FIDELITY UI, END-TO-END INTERACTIVE PROTOTYPE, DEVELOPMENT HANDOFF AND VISUAL QA.

WORKFLOW

RESEARCH + PRODUCT FUNCTIONALITY + WIREFRAMING + PROTOTYPE VALIDATION + VISUAL DIRECTION + DESIGN SYSTEM + UI DESIGN + INTERACTIVE PROTOTYPING + DEVELOPMENT HANDOFF + VISUAL QA

DESIGN SYSTEM

BUILT AS A REUSABLE COMPONENT LIBRARY, THE SYSTEM TRANSLATED NUTENTA’S VISUAL DIRECTION INTO CONSISTENT, DEVELOPMENT-READY PATTERNS. IT INCLUDED COMPONENT VARIANTS AND INTERACTION STATES, SEMANTIC COLOR STYLES, A DEFINED TYPE SCALE, AN 8-POINT SPACING SYSTEM, A FOUR-COLUMN MOBILE GRID, AND DOCUMENTED USAGE PATTERNS.

Nutenta mobile commerce workflow and user flow

Nutenta typeface and component presentation

CHALLENGE

MAKE A LARGE PRODUCT CATALOG AND REPEAT ORDERING CLEAR AND INTUITIVE FOR SHOPKEEPERS, INCLUDING THOSE WITH LIMITED EXPERIENCE USING DIGITAL TOOLS.

DESIGN APPROACH

CENTER THE EXPERIENCE ON HOW SHOPKEEPERS RESTOCK, WITH CLEAR NAVIGATION, SEARCH AND CATEGORIES, DESCRIPTIVE PRODUCT IMAGERY, EASY-TO-SCAN INFORMATION, SUGGESTED AND REPEAT ORDERS, AND GUIDED FLOWS FOR PURCHASES AND RETURNABLES.

OUTCOME

THE RESULT WAS A COMPLETE, PROTOTYPED AND DOCUMENTED PRODUCT EXPERIENCE, SUPPORTED THROUGH DEVELOPMENT HANDOFF AND VISUAL QA OF THE DEMO.

WWW.ALIGNEDNOLA.ORG

ALIGNED

A NEW BRAND AND RESPONSIVE WEBSITE FOR A NEW ORLEANS NONPROFIT ADVOCATING FOR SYSTEMIC CHANGE IN PUBLIC EDUCATION.

#BRANDING & UX/UI DESIGN · #EDUCATION· #RESPONSIVE WEBSITE · #IDENTITY TO QA

CONTEXT

ALIGNED NEW ORLEANS IS AN EDUCATION ADVOCACY NONPROFIT MOBILIZING ALLIES TO SUPPORT SYSTEMIC CHANGE IN PUBLIC SCHOOLS. THE PROJECT BEGAN WITHOUT AN ESTABLISHED BRAND OR DIGITAL STRUCTURE, SO THE IDENTITY, CONCEPT, SYSTEMS AND FINAL DESIGNS FOR THE WEBSITE HAD TO BE BUILT FROM THE GROUND UP.

ROLE

I TOOK OWNERSHIP OF THE DESIGN PROCESS FROM KICKOFF THROUGH DELIVERY, TRANSLATING RESEARCH INTO THE INFORMATION ARCHITECTURE, BRAND IDENTITY AND ITS APPLICATIONS, PERSONAS, JOURNEYS, WIREFRAMES AND RESPONSIVE UI. I ALSO CREATED THE DESIGN SYSTEM AND INTERACTIVE PROTOTYPES, THEN PREPARED THE DEVELOPMENT HANDOFF AND COMPLETED VISUAL QA.

WORKFLOW

DISCOVERY + CONTEXTUAL & FOUNDATIONAL RESEARCH + COMPETITIVE ANALYSIS + INFORMATION ARCHITECTURE & SITE MAPPING + BRAND IDENTITY & VISUAL DIRECTION + BRAND GUIDELINES & APPLICATIONS + USER PERSONAS + USER JOURNEY MAPPING + NEWSLETTER + WIREFRAMING + PROTOTYPE VALIDATION + DESIGN SYSTEM & UI LIBRARY + RESPONSIVE UI DESIGN + INTERACTIVE PROTOTYPING + DEVELOPMENT HANDOFF + VISUAL QA

Aligned responsive website presented on a laptop

CHALLENGE

TRANSLATE A COMPLEX EDUCATION ADVOCACY MISSION, MULTIPLE INITIATIVES, AND THE NEEDS OF DISTINCT AUDIENCES INTO A CLEAR, COHERENT BRAND AND DIGITAL EXPERIENCE, ONE THAT COULD ORGANIZE INFORMATION, MAKE THE ORGANIZATION’S WORK EASIER TO UNDERSTAND, AND GUIDE EACH AUDIENCE TOWARD MEANINGFUL ACTION.

DESIGN APPROACH

USE LOCAL, COMPETITIVE AND USER RESEARCH TO DEFINE THE AUDIENCES, JOURNEYS AND CONTENT STRUCTURE; THEN TRANSLATE THAT FOUNDATION INTO A FLEXIBLE BRAND SYSTEM, CLEAR NAVIGATION AND DIRECT PATHS TO DISCOVER INITIATIVES, ACCESS INFORMATION AND TAKE ACTION.

OUTCOME

THE RESULT WAS A COMPLETE, DOCUMENTED BRAND IDENTITY AND RESPONSIVE WEBSITE EXPERIENCE, SUPPORTED BY A REUSABLE UI LIBRARY, INTERACTIVE PROTOTYPES AND EMAIL ASSETS, THEN CARRIED THROUGH DEVELOPMENT HANDOFF AND VISUAL QA.