A collection of UI designs, wireframes, and prototypes across client engagements. Click any image to view full size and zoom in for detail.
Project
Nissan · Automotive
Nissan Rogue Redesign
UI designs and wireframes created for the NissanUSA.com Rogue product pages - desktop and mobile, from lo-fi wireframes through high-fidelity screens and device mockups. This was a team effort with two other designers; the work shown here is what I personally created. My colleagues led the configurator and Request a Quote flows.
High-Fidelity · Desktop
Click to see full page
NissanUSA.com homepage
Click to see full page
Rogue One Star Wars Edition
Wireframes · Desktop & Mobile
About this process
A wireframe is a structural blueprint for a page - it defines layout, content hierarchy, and user flow without color, imagery, or visual polish. The goal is to answer the hard questions about what goes where and why before any design investment is made.
I start with hand sketches because speed matters early. A sketch takes minutes, invites pushback, and makes it easy to throw away a bad idea without anyone feeling attached to it. Once the structure is validated, I move to lo-fi digital wireframes to nail spacing and hierarchy, then increase fidelity incrementally - so each round of feedback is focused on the right level of detail.
Click to see full page
Hand sketch
Click to see full page
Desktop wireframe
Click to see full page
Lo-fi landing page
Click to see full page
Mobile wireframe
High-Fidelity · Mobile & Device Mockups
Click to see full page
Mobile detail view
Click to see full page
Mobile UI
Click to see full page
iPhone mockup
Click to see full page
iPhone 14 mockup
Click to see full page
iPad mockup
Southwest Gas · Utility
Southwest Gas Homepage Redesign
UI designs for the Southwest Gas public website homepage, exploring layout, visual direction, and responsive breakpoints across desktop, tablet, and mobile. Work includes a mood board used to align the team on tone before moving into high-fidelity screens.
I designed and built approximately 85% of the final site after establishing the design system and coding the page templates.
Visual Direction
Click to see full page
Mood board
High-Fidelity · Desktop
Click to see full page
Homepage v1
Click to see full page
Homepage
Click to see full page
Homepage v2
Responsive · Tablet & Mobile
Click to see full page
Tablet
Click to see full page
Mobile
VCA Animal Hospitals · Healthcare
VCA Animal Hospitals Web Redesign
UI designs for VCA Animal Hospitals, including a Free First Exam landing page, a hospital finder experience, and device mockups showing the designs across desktop and tablet.
High-Fidelity · Desktop
Click to see full page
Free First Exam landing page
Click to see full page
Hospital finder
Device Mockups
Click to see full page
MacBook Pro mockup
Click to see full page
iPad mockup
Wynn | Encore Las Vegas · Hospitality
Wynn | Encore Exploratory Redesign
Exploratory concept designs developed alongside persona and journey mapping research for Wynn | Encore Las Vegas. The brief I set for myself: what would the booking and casino experience look like if the visual language actually matched the property's tier? The existing site reads corporate. These explorations push toward something that feels genuinely luxurious, testing richer typography, deeper color palettes, editorial-style photography layouts, and hierarchy that puts high-value guests and high-value actions first. Nothing here is final, it's directional work meant to open a conversation about what level of craft the brand actually warrants.
The disconnect this work is responding to is specific: a guest can walk through Wynn's lobby, past hand-blown glass sculptures and marble flooring, past a concierge in a tailored suit offering champagne, and then sit down at their phone to book a room through a digital experience that feels like a mid-tier hotel chain. The physical environment communicates one tier. The digital environment communicates another. That gap is a brand problem, a trust problem, and a conversion problem. Guests who expect luxury and encounter friction don't just drop off. They wonder whether the property itself matches the promise. These explorations are an attempt to close that gap: to make the digital experience feel like an extension of the space, not a contradiction of it.
Note: all photography used in these mockups is placeholder imagery. Room photos, casino floors, and lifestyle images are not actual Wynn property assets.
Luxury digital experiences avoid pure white backgrounds and pure black type. Deep charcoals, warm creams, and muted golds feel considered and elevated. Wynn's palette leans on near-black (#0A0A0A), warm ivory (#F5F0E8), and champagne gold as the single accent. Saturation is kept low everywhere except the one element you want the guest to notice. Color does not shout. It selects.
Typography
Luxury brands use type the way they use space: generously. Large editorial headlines set in a high-contrast serif (think Canela, Tiempos, or Domaine) signal craft before any content is read. Body copy stays in a refined sans-serif at comfortable line heights. Tight tracking on eyebrows and labels adds formality. The rule: if the type looks tight or busy, it isn't luxurious yet.
Editorial Layout
Magazine-style layouts break out of the grid intentionally. Full-bleed imagery that bleeds edge to edge, asymmetric text placements, large white space between sections, and staggered photo-text pairings all communicate that this wasn't templated. Editorial layouts slow the guest down. Slowing the guest down is the point. Wynn sells anticipation as much as it sells rooms.
Video & Motion
Ambient video, not autoplay ads, sets the tone immediately. A slow, cinematic loop of the casino floor, a suite at golden hour, or the pool at dusk communicates atmosphere faster than any headline. Micro-animations on hover (subtle image scale, smooth fade transitions, parallax scroll) reinforce craft without drawing attention to themselves. The motion should feel inevitable, not decorative.
Copy & Voice
Luxury copy never sells features, it sells feelings. "A room with a view" becomes "Floor-to-ceiling glass framing the entire Strip, 45 stories up." Headlines are evocative, not descriptive. CTAs don't say "Book Now." They say "Reserve Your Stay" or "Begin Planning." Language conveys that the guest is making a considered choice, not completing a transaction. Every line of copy should earn its space or be cut.
White Space & Restraint
Mass-market sites fill every pixel. Luxury sites know what to leave out. Generous padding, short line lengths, and sections that breathe signal confidence. If the page feels too sparse, you're probably close. The impulse to fill space is the enemy of luxury. A single striking image with a three-word headline and a lot of negative space outperforms a grid of eight offers every time.
Personalization
True luxury is specific, not generic. A returning Wynn Rewards member should see different content than a first-time visitor. Recognition ("Welcome back, Mr. Nguyen"), remembered preferences (preferred room type, dining history), and tailored offers all signal that the property sees the guest as an individual. Digital personalization at this tier is not a nice-to-have. It's table stakes next to competitors like Bellagio and Four Seasons.
Imagery & Photography Direction
Luxury photography is warm, film-toned, and human. It features people experiencing the property, not just the property itself. No stock smile. No overhead flat lay. Images are tightly art-directed, shot in available or warm artificial light, and color-graded consistently across the site. A single off-brand stock photo breaks the spell immediately. Photography is not decoration, it is the primary emotional argument for why this property costs more.
Guest Journey Map
These principles only matter if they're applied at the right moment. The guest journey map traces every touchpoint from discovery to departure and calls out exactly where the digital experience falls short of the physical one, and where closing that gap would have the most impact.
A full homepage concept applying the luxury principles above to the entry point of wynnlasvegas.com. Deep charcoal backgrounds, gold accents, full-bleed editorial photography, and a room-by-room browsing experience that lets the property speak before asking the guest to book. This is directional work, not a finished spec.
I explored both a dark and a light color theme across the booking flow. The dark theme came first, consistent with the brand's casino and nightlife identity. It photographs beautifully and signals luxury immediately, but dark UIs carry a usability cost in transactional contexts: form fields, pricing, and fine print all require more contrast discipline to stay legible, and guests booking on a phone in daylight can struggle with readability.
The light theme trades atmosphere for clarity. It reduces cognitive load during the decision-heavy steps, makes pricing and room details easier to scan, and performs better across a wider range of screen brightness and ambient lighting conditions. My recommendation would be to lead with the dark theme for discovery and inspiration, then shift to the light theme once a guest enters the booking funnel where task completion matters more than mood.
UX best practices applied
1
Progress indicator across all steps. Abandonment spikes when guests lose track of where they are. A persistent step bar (Booking Summary, Guest Details, Payment, Confirmation) keeps them oriented.
2
Total price shown before payment. Hidden fees are the top trust killer in hotel booking. The booking summary surfaces nightly rate, resort fee, and taxes upfront.
3
Room cards built for comparison. Structured cards surface view, bed type, and inclusions at a glance so guests don't have to open each room individually to decide.
4
Cancellation terms at point of commitment. Guests are most anxious about cancellation right before payment. Terms appear inline on the booking summary rather than buried in a policy link.
5
Mobile-first layout with large touch targets. A significant share of luxury hotel bookings happen on mobile. The flow is designed for thumb reach first, desktop second.
6
Filters for amenities, view, and bed type. Limited filtering forces guests to scroll through all options. Adding targeted filters lets high-intent guests narrow to what they actually care about faster.
7
Flexible date search with availability context. Guests often have some flexibility. Surfacing availability across nearby dates reduces the friction of hitting a sold-out result and starting over.
8
Saved selections across interruptions. Guests rarely complete a luxury booking in one sitting. Persisting selections (room, dates, add-ons) means they return to progress, not a blank form.
9
Accessibility built in, not retrofitted. Sufficient color contrast, clear focus states, and readable type sizes are applied across both themes to meet WCAG 2.2 AA standards.
10
Upsells at the right moment, not every moment. The "Enhance Your Stay" screen (show add-ons, dining) appears after room selection, when the guest has already committed to a direction and is more receptive to additions.
The current Wynn casino page gives every guest the same experience: a wall of promotions with no clear hierarchy. The most important actions, like requesting a casino host or enrolling in player development, are buried. A high-value VIP guest has to hunt for them.
Both redesign directions fix this by leading with intent. The editorial direction uses photography to set the tone immediately, signaling luxury before the guest reads a single word. The alternate direction leads with the guest's role, putting "Exclusive VIP Gaming" and the Casino Host Request front and center for the people who need them.
Both directions also bring structure the existing page is missing. Promotions are paired with imagery instead of appearing as plain text blocks. Table game categories are clearly labeled so guests can orient quickly. And loyalty sign-in is placed where guests are most motivated to act, not hidden in the footer.
What to test in usability
The most important question to answer first: does the editorial hero read as luxury casino or nightclub? A 5-second test with real guests will settle it quickly. If it lands wrong, the alternate direction's lighter hero is the lower-risk choice. Beyond that, a first-click test on the alternate direction's hero with a VIP guest proxy will show whether Casino Host Request and Player Development register as distinct actions. For the promotions grid, the test is whether guests with Wynn Rewards status can identify a relevant promotion and self-qualify without clicking through. Finally, test wayfinding between game categories, specifically whether someone can find Baccarat without using search, to determine whether section labels and visual separation are doing enough work.
The first two explorations elevate the experience for every guest. This one asks what happens when the site knows who you are.
A returning Wynn Rewards member should not see the same homepage as a first-time visitor. The logged-in experience responds to the guest: their tier, their preferences, their host's name. High-value actions like speaking directly to a casino host are not buried in a contact form. They are surfaced at the moment the right guest needs them, one tap away. This exploration shows what that layer looks like in practice.
Logged-In Homepage
The homepage adapts when a member is signed in. Their name, their tier, their relevant offers. The hero is no longer a generic invitation to discover Wynn. It is a personal welcome back. Content that applies to their profile comes forward. Content that does not steps aside.
Member Recognition
Returning guests should feel recognized before they ask to be. Preferred room type, dining history, past stays — these inform what the site shows. Wynn already does this through its hosts in person. The digital experience should do the same.
Speak to Your Host
For qualifying guests, direct access to a casino host is one of the most valuable things Wynn offers. It should not require a phone call or a buried contact page. A persistent, tasteful CTA in the right context puts the connection one tap away for the guests who have it.
Tier-Aware Content
A Red Card member and a Black Card member are not the same guest. The site should not treat them the same. Offers, room recommendations, and featured experiences should reflect the guest's tier without making the hierarchy feel transactional.
UI design work for the Mazda USA website, including homepage and Build & Price explorations. The work pushes toward a more editorial, premium visual direction: one that better reflects Mazda's positioning as a design-led brand and closes the gap between the quality of the vehicles and the quality of the digital experience.
