Ying Peng — Visual Designer

Featured Project

Resilience

Resilience is a cyber-risk company on a mission to make the world cyber resilient. I helped extend its brand and built the scalable icon library that now powers its UI, social, and product design.

The Library100+ icons spanning cybersecurity concepts — threat, compliance, identity, infrastructure — all on one consistent grid and stroke weight.

The Challenge

As Resilience scaled, its visual language was fragmenting. Teams across UI, product, and social were each sourcing or drawing their own icons, so the same cybersecurity concepts looked different everywhere — inconsistent, off-brand, and slow to produce.

My Role

I joined as the company refreshed its brand and helped refine and extend that new identity into everyday use. Working alongside another designer, the social media manager, and the VP of Marketing, I owned the systems work that kept everyone visually consistent.

What I Built

A single, scalable icon library — 100+ icons covering complex cybersecurity concepts. Built in Figma to one consistent grid and style, the set stays crisp at every size and serves UI, product, and social from one source of truth.

Beyond the Icons

I also created the motion piece that ran on-screen at our tradeshow booth, and built reusable video templates that let the team produce on-brand motion fast. Day to day, I partnered with the social media manager on LinkedIn content — images, GIFs, and short motion shipped on a daily cadence.

Icon guideline page 1: the icon set with creation rules — stroke, cap, corner — **The System**Not just icons — a documented standard. A 24px base grid, 1.5px center-aligned strokes, defined safe space, keyshapes, and correct-vs-incorrect rules, so anyone on the team can extend the set and stay on-brand.

Icon guideline page 2: base grid, safe space, and keyshapes construction rules — **The System**Not just icons — a documented standard. A 24px base grid, 1.5px center-aligned strokes, defined safe space, keyshapes, and correct-vs-incorrect rules, so anyone on the team can extend the set and stay on-brand.

Resilience spot illustrations: Vendor Risk, Dark Web Exposure, Encryption, and more — **Illustrations**Beyond the line icons, a set of color spot illustrations for bigger moments — depicting concepts like vendor risk, dark web exposure, and encryption across the brand.

Icons on the Resilience website beside product messaging — **In Use Across Surfaces**One system, deployed everywhere — the icons and illustrations I built show up consistently across web, social, and print.

Layered icons in the Resilience Solution Packages section — **In Use Across Surfaces**One system, deployed everywhere — the icons and illustrations I built show up consistently across web, social, and print.

One icon · drawn once · every size

16px

24px

48px

96px

Built as vector on a 24px grid — crisp from favicon to billboard.

SocialDaily LinkedIn content built with the social media manager — carousels, motion graphics, and animated posts, all drawing on the same icon system and brand language for a consistent feed.

100+cybersecurity icons designed

1source of truth for UI, social & product

~90%faster motion production · ~3 hrs → 20 min per post

DailyLinkedIn content cadence

Selected Work

HomElectrical

A full redesign of an electrical-supply e-commerce site — taking a dated, cluttered storefront to a clean, modern, trustworthy shopping experience, from wireframes through final UI.

The Challenge

HomElectrical sells 25,000+ products but the existing site looked dated and unprofessional — cluttered layouts and inconsistent styling that undercut trust in a high-volume wholesale business.

My Role

Sole designer, in-house. I owned the full redesign end to end — information architecture, wireframes, visual system, and final UI across every key page of the shopping journey.

Approach

I started in low-fidelity wireframes to fix structure and flow first — search, product, cart, checkout — then layered on a clean, modern visual system once the bones were right.

The Result

A consistent, modern storefront with a clear hierarchy and a streamlined path from search to checkout — a site that finally looks as established as the business behind it.

HomElectrical color palette: orange, cream, navy, and blues — **Foundation**A refreshed logo treatment and a focused palette — energetic orange against trustworthy navy — set the tone for a brand that feels both approachable and established.

HomElectrical homepage wireframe — **Wireframe → Final**Structure first, style second. The homepage went from a low-fidelity layout — focused purely on hierarchy and flow — to a polished, on-brand final design.

HomElectrical homepage final design — **Wireframe → Final**Structure first, style second. The homepage went from a low-fidelity layout — focused purely on hierarchy and flow — to a polished, on-brand final design.

Search results wireframe — **The Flow — Wireframes**The full purchase journey, designed in low-fidelity first: search results, product detail, cart, and a multi-step checkout.

Product page wireframe — **The Flow — Wireframes**The full purchase journey, designed in low-fidelity first: search results, product detail, cart, and a multi-step checkout.

HomElectrical 404 page final design — **Final UI**The finished visual system applied across the site — including the details that are easy to skip, like a friendly 404 and a clear, scannable order-policy page.

HomElectrical order policy page final design — **Final UI**The finished visual system applied across the site — including the details that are easy to skip, like a friendly 404 and a clear, scannable order-policy page.

In MotionWalkthroughs of key flows — login, category browsing, and the product page — showing the redesign in use.

Selected Work

02 — Projects

HomElectricalWebsite design · 1280×880

Web Design

HomElectrical

Website Design

WhatsAppUI redesign · 720×900

UI Design

UI Design Concept

Music AppUI design · 960×640

UI Design

Music App

UI Design

Demo ReelMotion graphics · 960×640

Motion

Demo Reel

Motion Graphics

PostersGraphic design

Graphic

Posters

Graphic Design

BannersGraphic design

Graphic

Banners

Graphic Design

Circle3D design

Circle

3D Design

Your photo800×1000px

A designer who builds systems, not just screens.

I work across brand identity, product UI, and motion — but what I'm best at is the connective tissue: the icon libraries, templates, and visual systems that keep a whole team consistent and fast. I can take an idea from positioning all the way to a working, scalable asset.

[Replace — optional] Add a line on your background and what you're looking for next: the kind of team, role, or problems you most want to work on.

Brand IdentityUI / UXMotion Graphics Web Design3DFigmaAdobe CC