arnski.com – visual designer with a focus on UX/UI

Presentation

arnlopez — Wed, 24 Apr 2024 23:05:41 +0000

Presentation

A concept to promote Escapod to prospective owners and affiliates.

Overview

the work

let's work.

Ready to get your digital footprint online?

Product Launch

arnlopez — Sun, 24 Mar 2024 22:17:31 +0000

Product Launch

Supported the launch of LiveWire’s third bike, the S2 Mulholland.

Tools

Figma, Jira (Used for updates and asset delivery throughout the development cycle)

Team

Creative team, Product Manager, Developers, BA, Social Media Specialist, Marketing Manager

Deliverables

Figma dev-ready, Email, Video and image assets, React source files for developer implementation

Overview

the project.

As a key design team member, I’ve been crucial in developing and maintaining the Figma design file while being in lock-step with developers and QA. The launch of our new product necessitated integrating a new color theme into the design system, requiring alignment with the developers’ Storybook. Throughout this process, I played a pivotal role in organizing and updating components, layouts, and styles to ensure a seamless and efficient design workflow while upholding consistency across our projects.

In addition to my contributions to the design system, I developed and tested the official launch email, and configured our third-party UGC platform for social readiness on this project. I ensured the platform was set up to integrate with social features seamlessly and provided the code resource for our developers to incorporate into the product’s detail page. This effort aimed to enhance user engagement and interaction with our product, further solidifying its impact in the market.

let's work.

Ready to get your digital footprint online?

Campaign

arnlopez — Sun, 27 Feb 2022 22:36:54 +0000

Campaign

Great travel conversations start over a hot drink or breakfast, the slopes, or a hike. Whatever your travel story is, everyone feels at home and we are ready to welcome you.

Tools

Sketching, Adobe XD, Stensul, Sendgrid, Unbounce, Adobe Photoshop

Team

Myself, project manager, digital marketing, Art Director

Methods / Deliverables

Empathize, Ideate, Value Proposition, Prototypes

Client

HGV – US and EU Digital Marketing Team

INTRO

the project.

Redesign the US and EU Black Friday rental marketing campaign. The goal, to encourage repeat business, generate new bookings and give consumers a sense of renewed travel due to the ever-changing landscape caused by the pandemic of 2020. We wanted to let consumers know that it is safe to travel again.

The Problem
The previous Black Friday campaigns were getting old and weren’t generating the bookings the business was projecting. Based on the content and transaction numbers, we hypothesized that consumers were still unsure about traveling.

Let’s Start
I first met with the Director of Digital Marketing to understand the problem and goals. They provided 2-years’ worth of transaction data, the new look they were looking for, and stressed that the visual should not look like the typical Black Friday style design.

contribution

my role.

I was the sole designer on a team comprised of a project manager, two digital marketers, and my Art Director. I was responsible for determining the overall design direction of the project while collaborating with the rest of the team on ideation.

Proposed Solution
With out-of-the-box thinking coupled with familiar visuals, I provided the digital marketing team a design that conveyed travel, thoughtful consumer information, and laid out a full campaign board that included visual styling used on the email design, banner ads, and landing page.

Challenge
With no real UX process in place, I had to hone in my UX thinking. I asked lots of questions to determine why the need for a redesign, what insights were gathered from any consumer feedback, and what was the most important part of this campaign.

Insights
The marketing team used Hotjar to collect visual clicks on the landing page, provided a three YoY comparison on previous campaigns, and they wanted a different look.

This led me to the following three key insights:

Highlight useful destination information
Use aspirational and inviting imagery
Re-use some previous content layout

SOLUTION

design rationale.

When we travel, we meet new people, share stories and create new memories. This led to the reusable chat bubble component that would be used for headlines, the thoughtful consumer information, and the large aspirational destination imagery used throughout the campaign.

Results
As of January 2022, the business partner shared that the campaign aided in increasing room nights and room revenue in North America and Europe.

let's work.

Ready to get your digital footprint online or your brand in front of everyone? Reach out and let’s explore.

Digital Resort Check-in

arnlopez — Mon, 21 Feb 2022 23:32:44 +0000

Digital Resort Check-in

Our European clients wanted a way to limit face to face contact time and update their existing check-in device user interface.

Tools

Sketching, Adobe XD, HTML, CSS, Coda, Figma

Team

Myself, Project Manager, Business Analyst

scope

the project.

Do a brand refresh on the existing resort check-in form and improve both the user experience and user interface. This includes updating the colors, fonts, content layout and placement, and step by step flow.

contribution

my role.

I worked closely with the project manager and business analyst to determine goals, timeline, requirements, client requested features and development deliverables needed for an MVP.

I kicked off the project with a user-flow before moving on to a LoFi mockup in XD. After client review and iterations, I was tasked to provide the HiFi prototype.

Challenges
With developer limitations due to production timing and budget, I built the new design using HTML/CSS that could be embedded in the proprietary CRM/CMS.

approach

design rationale.

After gathering artifacts from existing components, it gave me a clear picture that would help shape my design.

I implemented the use of UX best practices to improve user flow and visual design bringing in that uncluttered look and feel that would make checking in a delightful experience.

This project has been placed on hold since the acquisition of the company I worked for took place.

let's work.

Ready to get your digital footprint online or your brand in front of everyone? Reach out and let’s explore.

Case Study: Mobile App

arnlopez — Mon, 18 Oct 2021 20:17:23 +0000

Case Study: Mobile App

The app is geared toward people who love to support small-business owners, who enjoy spontaneous adventures around town and revel in locally crafted flavors.

Tools

Sketching, Wireframing, Card Sorting, Research, Figma, Maze

Team

Myself

scope

the idea.

The goal of this project was to discover how consumers interacted with food truck vendors on terms of ordering, takeout or pickup and use of social media. The idea was simple, take the user from locating a food truck, pay and order, to receiving a notification when the item is ready for pick up.

discover

research.

Research was the foundation which helped shape the features included on this app. I started with conducting multiple interviews, gathering insights from affinity maps and unmoderated tests. That gave me the information to create my first sketches, LoFi digital comps, and seeing it through a working HiFi prototype.

Iterate and Test Often
Going backwards on design, I iterated the visual layout, added new features, removed features. Next, I moved forward by creating a 2×2 matrix to determine which features had high impact, but low cost/expense.

Taking Shape
After using several research methods and synthesizing my collected data, I was able to add the needed features on my app. Answering the why’s and doing just enough research got me closer to solving the user needs.

Results

solution.

Each step was dictated from the previous. With several rounds within the double diamond design process, I was able to complete the app at near MVP level.

Take a look at my working prototype here.

let's work.

Ready to get your digital footprint online?

iPad Sales App

arnlopez — Tue, 06 Jul 2021 05:00:43 +0000

iPad Sales App

Sales wanted to try a different approach after observing interactions between the business and consumer. They needed to change their methods in how they presented the company’s products to the public.

Tools

Sketching, Adobe XD, Adobe Photoshop

Team

Myself, Project Manager, Art Director, Client (Sales)

Methods / Deliverables

Double Diamond, HiFi Prototype

SCOPE

the project.

Business Goal
The goal was to let the app handle the initial introduction by onboarding potential consumers to explore vacation ownership.

The client needed strong visuals and a working prototype to get buy in from the key stakeholders.

contribution

my role.

Define
The client conducted qualitative data by way of observation out in the field. This information was shared during the discovery phase.

Discovery
Through discovery, I captured insights on user pain points, what caused failed transactions, and understanding what the client was trying to solve.

Design
I began with several sketches to get my idea down fast, then I had my Art Director review them before moving to a LoFi mockup.

Feedback and Iterations
I worked with client and the project manager to review and iterate my LoFi, before moving on to a HiFi prototype.

User Test
I did a quick unmoderated user test to get feedback on visuals and usability. My team consisted a team of designers, content writers and project managers. After synthesizing the feedback, I applied the features and conducted a few more rounds of tests.

Outcome
With a near MVP, the client had to pause this due to ongoing business changes. However, the Sr. Digital Marketing Manager was able to use some of the components for another project. See the live site.

APPROACH

design rationale.

The overall visual, user flow and common features (i.e. swipe left or right selection feature) was based on using UX best practice. To keep consumers engaged, I placed aspirational background photos as the user moved from screen to screen. The idea is to touch the consumers heart by visually showing them, vacations are essential for our well-being.

let's work.

Ready to get your digital footprint online?

Landing Pages, eCommerce

arnlopez — Tue, 06 Jul 2021 03:23:40 +0000

Landing Pages, eCommerce

Digital marketing team needed a new page for consumers to discover new offers and improve the checkout user flow.

Tools

Adobe XD, Adobe Photoshop, Adobe Illustrator, Sketching

Team

Myself, Project Manager, Art Director, Client (Digital Marketing)

Methods

Wireframing, User Flow, Information Architecture Flow, LoFi + HiFi Prototype

scope

the project.

The digital marketing team needed to overhaul the existing deals page and create a new activations page for purchased vacation offers.

The goals of the project were to improve usability for both desktop and mobile experiences and to streamline the transaction process to increase online bookings

contribution

my role.

The first step was gathering existing artifacts to aid in user flow and UI. I collaborated closely with the business to ensure I had all the necessary content to begin laying out my LoFi comps.

The project encompassed several pages interfacing with both members and guests. This included enhancements to the new members’ area, package deals pages, and resort deals detail page, all culminating in user transactions.

Through multiple iterations, I diligently applied best UX/UI practices to craft the HiFi prototype screens. Upon approval, I facilitated the dev handoff and collaborated with developers, clients, BAs, and project managers to ensure alignment between design and functionality.

Challenges
Using existing site components in Drupal altered the visual outcome from the intended design. I collaborated with BAs, project managers, clients, and developers to make necessary adjustments within the constraints.

Lessons Learned
It’s crucial to work closely with developers and clients early in the process, iterate frequently, and conduct regular testing.

approach

design rationale.

To keep the user cognitive thinking very low, I designed the layout to include large amounts of whitespace for hierarchal clarity. This would help the user stay focused on their intended action.

let's work.

Ready to get your digital footprint online?

Event Experience

arnlopez — Mon, 05 Jul 2021 20:57:12 +0000

Event Experience

This four-night prestigious company event is celebrated once a year to recognize top performers in their craft.

Tools

Sketching, Adobe XD, HTML, CSS, Coda, Figma, Adobe Indesign, Adobe Illustrator, Adobe Photoshop, Adobe After Effects, Adobe Illustrator, Keynote, Powerpoint, SimpleTexting

Team

Myself as Design Lead, Sr. Designer, Project Manager, Director of Communications, SVP of Sales & Marketing Special Projects

Methods / Deliverables

4D, Empathize, Ideate, Website, Digital and Print Communications, Visual Style Guide, Customer Service (SimpleTexting)

scope

the project.

This four-night company event is celebrated once a year to recognize top performers in the company. Materials included the main event presentation created in Keynote, signage, a program book, various event print communications, an event website, and an SMS virtual help desk where the event team sent out daily reminders and event updates that gave our attendees an easy way to communicate with the event team.

contribution

my role.

Each year I played a crucial role to ensure all attendee visual touch-points were updated and ready prior to the event.

I oversaw all required print and digital pieces. This includes creating the visual style guide that lead the overall look and feel of the awards, program booklet, signage and keynote presentation.

I developed a mobile-first website using HTML, CSS and PHP. The websites’ primary use were for attendees to get quick access to event information, updates and connect with the event staff.

Challenge
Due to IT security and server concerns, I was not able to use CMS, nonetheless, editing was still a simple task.

Multiple Roles
I both managed and answered attendee questions using an SMS SaaS platform that was used throughout the event. During the main event, I would act as technical director, coordinating with the A/V team, while driving the main screen presentation.

approach

design rationale.

The business wanted to showcase top talent within the company. The visuals had to have a high-end feel, yet everyone felt they belong. The experience had to match the visuals.

Classy. Upscale. Familiar. The visual design gives the attendees a sense of pride and recognizes their passion and hard work.

let's work.

Ready to get your digital footprint online?

Brand Identity

arnlopez — Sat, 03 Jul 2021 17:37:56 +0000

Brand Identity

The client needed a quick turn-around.

Tools

WordPress, Adobe Illustrator, Adobe Indesign, Adobe Photoshop

Team

Myself, Client

SCOPE

the project.

The client needed a branded website to launch his company’s business presence. This included developing a brand identity, a logo, social media graphics, business cards and a website.

contribution

my role.

I met with client to discover the business goals, service offerings, look and feel of the website, and most importantly, why he’s in business to offer tech solutions for small to mid-sized companies.

I started with sketching the logo, reviewed and iterated that with the client several times until we got it right. From there, I built the website in Wordpress using a customized template per client request, business cards, social graphics, and various collateral needed for his business.

Timeline
I was able to deliver an MVP in less than 1 month. Time was of essence since he needed to meet a deadline with third-party vendors.

APPROACH

design rationale.

The client needed something minimal, represented technology and a color that stood out. You can see the website at StorkSolutions.com.

NOTE: Since its creation of an MVP, the client has since updated the site with more visuals.

let's work.

Ready to get your digital footprint online?