Arryved

Product Design

Power to Places with Personality.

Arryved is a point-of-sale tech company based in Boulder, CO. Focusing on the craft brewing and restaurant industry, Arryved provides flexible technology solutions and above-and-beyond customer service for people who want the all the power of a point-of-sale without the price tag.

Rebrand. Redesign. Refresh.

Hired as the visual product designer in the midst of a rebranding effort, I established a design system from the ground up based on new brand guidelines. As a collaborator with marketing and product teams, my role was to ensure visual consistency across Arryved's brand collateral and product line.

Click to jump to a specific project or keep scrolling to experience it all!

1. Design System

Auditing existing product workflows and refreshing visual interface based on brand guidelines

2. Customer-Facing Interface

Visualizing interface design and prototyping workflow for customer-facing hardware solutions

3. Mobile Loyalty App

Collaborating with UX team to envision the future of the loyalty and rewards in a mobile app

1. Design System

Project Tasks

Existing Product Research
Visual Design Audit
Product Interface Refresh
Design System Creation and Maintenance

I began with an audit of one of Arryved's existing products—Service—engineered for restaurant workers to open tabs for customers; add, subtract and modify items to tabs; and complete checkout, as well as many other inventory related actions.

The audit was completed by documenting existing workflows and categorizing inconsistencies in the visual experience including buttons that may behave in a similar way but appear different, and vice versa, customized modals vs system modals, and inaccessible color palettes.

A screenshot of a mess of different button styles from the existing product

Component Audit

I observed product workflows and documented the various button, modal, keypad, etc. styles in the existing product. Understanding existing styles and how they matched to behavior was crucial to defining new styles and creating visual consistency across multiple devices.

Two mockups, one of the colors used in the interface and two, of accessible color combinations

Design System Foundations

An early task was developing typographic scales and color palettes based on branding guidelines. Because the new brand guidelines included vibrant colors and display typography, rules were necessary to ensure text was legible and color combinations accessible.

A list of customer tabs as shown in the interface on a large tablet, medium tablet, and mobile device

Visual Interface Refresh

Using the foundational design system, the interface for small mobile devices, medium and large size tablets was refreshed to match the new brand while also addressing accessibility concerns such as color contrast and typographic scale.

A list of customer tabs as shown in the interface on three sized devices in dark mode

Let There Be Dark Mode

In parallel to the main refresh goals, thought was also put into how the new brand color palette could be applied to dark mode—one of the most requested features from customers. Color contrast guidelines were considered with every interface.

A showcase of multiple mobile devices showing a new empty tab, log in screen, list of open tabs, and thank you for payment screen

The design system consists of components meant for mobile devices, medium and large tablet devices. But the work of building a design system does not stop at a visual refresh or at a single product. Continuous collaborating with the product and UX teams means components are actively being researched, designed, and built to ensure visual consistency can be maintained across Arryved’s suite of products.

2. Customer-Facing Interface

Project Tasks

Competitive Research
User Interface Design
Rapid Prototyping

As part of ongoing research and development into providing more flexible ways for merchants to accept customers’ payments, I was tasked with quickly iterating on a solution to display customer tabs on fixed pieces of hardware in the merchant’s establishment. In other words: what do customers see when they check out?

As the sole designer on this effort, I performed a quick competitive analysis of other products on the market and created wireframes based on my findings. Similar to the approach of the product interface refresh, I needed to ensure that the design was aligned with our brand guidelines while also not displaying our brand in an over-the-top manner, for the sake of merchant customization.

Showcase of merchant branded tablet screens for customer viewing in light mode

Showcase of merchant branded tablet screens for customer viewing in dark mode

Showcase of payment flow as viewed by a customer

This project was a collaboration between design, product and engineering. From start to finish, members of each team were brought in to discuss MVP requirements and ideas for future releases.

I also had the opportunity to work directly with engineers to prototype the solution on actual hardware for testing with select users.

3. Mobile Loyalty App

Project Tasks

User Interface Design
User Experience Design

Arryved's Insider program allows merchants to build their brands and customer loyalty by inviting guests to member-only offers and rewards. For this project, I collaborated with the UX team to brainstorm high-level ideas and interaction design and participated in low-fidelity wireframe production. While the experience team was testing mid-fidelity prototypes to dictate further design direction, I returned to the project and applied brand styles resulting in high-fidelity wireframes.

Rebranding efforts can be exciting and stressful for any company. Coming into a company not only in the middle of a rebrand but one without a dedicated product design team in its history provided a wealth of opportunities to exercise my expertise in strategic and visual design. Not only that, I enjoyed a consistent expansion of my own knowledge of design systems, prototyping in Figma, and collaborating in a fast-paced, startup environment.