Tally
Lighting
Tally Lighting (Tallahassee Lighting & Decor) is an ecommerce brand based in Florida, specializing in residential lighting and home decor. The goal of this project was to modernize their online presence, improve visual consistency, and better showcase their showroom offerings across the site.
My Role
My Role
UX/UI Designer, Brand Strategist, Web Developer
UX/UI Designer, Brand Strategist, Web Developer
Project Dates
Project Dates
Date 2022 and ongoing
Date 2022 and ongoing
Collaborated Directly
Collaborated Directly
Stakeholders for feedback and approvals
Stakeholders for feedback and approvals
Tally Lighting (UX/UI Case Study)
Tally Lighting (UX/UI Case Study)
💡 Redesigning an Outdated Ecommerce Experience for a Regional Showroom Brand
💡 Redesigning an Outdated Ecommerce
Experience for a Regional Showroom Brand
What I Did:
Audited the original site and identified key UX issues, including inconsistent branding and unclear content layout
Created a revised sitemap and restructured product categories for easier navigation and better discoverability
Designed wireframes with a mobile-first approach to optimize for responsiveness
Designed wireframes with a mobile-first approach to ensure usability across devices
Developed clean, modern UI layouts using Adobe XD and Bootstrap
Improved visual trust and reduced cognitive load across product and landing pages
What I Did:
Audited the original site and identified key UX issues, including inconsistent branding and unclear content layout
Created a revised sitemap and restructured product categories for easier navigation and better discoverability
Designed wireframes with a mobile-first approach to optimize for responsiveness
Designed wireframes with a mobile-first approach to ensure usability across devices
Developed clean, modern UI layouts using Adobe XD and Bootstrap
Improved visual trust and reduced cognitive load across product and landing pages
The Problem
The Problem
The original Tally Lighting website struggled with inconsistent branding, outdated visual design, and a confusing product structure that made browsing difficult for users. There was minimal emphasis on their in-store experience, and the layout lacked clear hierarchy, especially on mobile devices. The site felt disjointed and failed to represent the quality or variety of the lighting products they offered—leading to missed engagement and low user retention.
The original Tally Lighting website struggled with inconsistent branding, outdated visual design, and a confusing product structure that made browsing difficult for users. There was minimal emphasis on their in-store experience, and the layout lacked clear hierarchy, especially on mobile devices. The site felt disjointed and failed to represent the quality or variety of the lighting products they offered—leading to missed engagement and low user retention.
The Solution
The Solution
I redesigned the site with a clean, modern interface that improved both structure and usability across devices. Product categories were reorganized to make browsing intuitive, and lifestyle imagery was introduced to better reflect the showroom experience. Key callouts and updated CTAs were added to guide users to top sections, while the new layout supported scalability for future promotions and seasonal updates. The result was a site that felt polished, consistent, and conversion-focused.
I redesigned the site with a clean, modern interface that improved both structure and usability across devices. Product categories were reorganized to make browsing intuitive, and lifestyle imagery was introduced to better reflect the showroom experience. Key callouts and updated CTAs were added to guide users to top sections, while the new layout supported scalability for future promotions and seasonal updates. The result was a site that felt polished, consistent, and conversion-focused.
Skills & Tools Used:
Skills & Tools Used:
🛠 UX/UI Design • Photoshop • Branding • HTML • CSS • JS • Bootstrap • PS • XD • SEO Optimization
🛠 UX/UI Design • Photoshop • Branding • HTML • CSS • JS • Bootstrap • PS • XD • SEO Optimization
Site Map & Navigation Planning
Site Map & Navigation Planning
Before jumping into visuals, I created a detailed sitemap to define the structure and user flow of the redesigned Tally Lighting website. The goal was to clarify content priorities, simplify navigation, and highlight core pages like the product catalog, showroom info, and trade program. I also worked to streamline category access by organizing product types like chandeliers, sconces, pendants, and outdoor lighting under a clean, scalable hierarchy.
Before jumping into visuals, I created a detailed sitemap to define the structure and user flow of the redesigned Tally Lighting website. The goal was to clarify content priorities, simplify navigation, and highlight core pages like the product catalog, showroom info, and trade program. I also worked to streamline category access by organizing product types like chandeliers, sconces, pendants, and outdoor lighting under a clean, scalable hierarchy.
This site map served as a foundation for both layout design and development planning. It helped align everyone — from stakeholders to internal devs — around how users would explore the site, discover products, and take action. Important touchpoints like the newsletter CTA, policies, and showroom directions were also mapped to ensure a complete, conversion-friendly experience.
This site map served as a foundation for both layout design and development planning. It helped align everyone — from stakeholders to internal devs — around how users would explore the site, discover products, and take action. Important touchpoints like the newsletter CTA, policies, and showroom directions were also mapped to ensure a complete, conversion-friendly experience.
Visual Site Map Overview
This visual sitemap outlines the primary navigation and page flow for the new Tally Lighting website. It highlights key user paths from the homepage into product categories, showroom information, and supporting content.
Tools: Adobe XD, Google Docs
Tools: Adobe XD, Google Docs
To create the sitemap for Tally Lighting, I used Adobe XD to visually map out the site structure and user flow, ensuring every key page and interaction was clearly defined. Google Docs was used to outline content requirements and document client feedback, while Google Sheets helped organize product categories and plan navigation logic. This toolkit allowed me to keep the process flexible, collaborative, and aligned with both design goals and business needs.
To create the sitemap for Tally Lighting, I used Adobe XD to visually map out the site structure and user flow, ensuring every key page and interaction was clearly defined. Google Docs was used to outline content requirements and document client feedback, while Google Sheets helped organize product categories and plan navigation logic. This toolkit allowed me to keep the process flexible, collaborative, and aligned with both design goals and business needs.
Low-Fidelity / High Fidelity Mockups
Low-Fidelity / High Fidelity Mockups
After sketching out the overall structure of CyperSports, I jumped into Figma to start building out the low-fidelity mockups. My goal here wasn’t to focus on colors or imagery—it was more about mapping out the layout, structure, and how the content would guide users through the page. I kept things minimal, using greyscale boxes and placeholder text to visualize the flow.
After sketching out the overall structure of CyperSports, I jumped into Figma to start building out the low-fidelity mockups. My goal here wasn’t to focus on colors or imagery—it was more about mapping out the layout, structure, and how the content would guide users through the page. I kept things minimal, using greyscale boxes and placeholder text to visualize the flow.
Once I felt confident in the structure, I transitioned into high-fidelity mockups. That’s when I started layering in the visual identity—brand colors, fonts, actual images, and UI details that matched the tone of the site. The high-fidelity versions helped bring the concept to life and gave me a clear sense of how the final design would feel.
Once I felt confident in the structure, I transitioned into high-fidelity mockups. That’s when I started layering in the visual identity—brand colors, fonts, actual images, and UI details that matched the tone of the site. The high-fidelity versions helped bring the concept to life and gave me a clear sense of how the final design would feel.
Low-Fidelity Mockup – Layout Planning
Low-Fidelity Mockup – Layout Planning
This version focused strictly on layout and spacing. It was helpful for testing structure and making quick changes before investing time into final design elements.
This version focused strictly on layout and spacing. It was helpful for testing structure and making quick changes before investing time into final design elements.
High-Fidelity Mockup – Final Visual Direction
High-Fidelity Mockup – Final Visual Direction
This mockup incorporated color, real content, and branding elements. It reflects the look and feel of the final product and set the foundation for the development handoff.
This mockup incorporated color, real content, and branding elements. It reflects the look and feel of the final product and set the foundation for the development handoff.
Tools: Adobe XD, Google Docs, Google Sheets (for organization customer notes)
Tools: Adobe XD, Google Docs, Google Sheets (for organization customer notes)
I used Adobe XD to design both wireframes and high-fidelity mockups, allowing for a smooth transition from layout planning to polished visuals. The platform made it easy to iterate quickly and present design options to the client. To stay organized and maintain alignment, I used Google Docs for documenting feedback and project notes, and Google Sheets to map out product categories, page structure, and content needs. This combination of tools supported clear communication and efficient collaboration throughout the project.
I used Adobe XD to design both wireframes and high-fidelity mockups, allowing for a smooth transition from layout planning to polished visuals. The platform made it easy to iterate quickly and present design options to the client. To stay organized and maintain alignment, I used Google Docs for documenting feedback and project notes, and Google Sheets to map out product categories, page structure, and content needs. This combination of tools supported clear communication and efficient collaboration throughout the project.
Project Summary
Project Summary
Tally Lighting, based in Florida, needed a refreshed ecommerce experience that would elevate their brand and make their site easier to browse. I partnered closely with their team to understand their goals, organize their product categories, and create a visual experience that aligned with their in-store identity. From the beginning, the process was highly collaborative—I worked directly with the client and co-owners to gather assets, implement feedback, and adjust layouts in real-time.
Tally Lighting, based in Florida, needed a refreshed ecommerce experience that would elevate their brand and make their site easier to browse. I partnered closely with their team to understand their goals, organize their product categories, and create a visual experience that aligned with their in-store identity. From the beginning, the process was highly collaborative—I worked directly with the client and co-owners to gather assets, implement feedback, and adjust layouts in real-time.
Through this partnership, we were able to design and build a site that felt modern, clean, and aligned with their business goals. The final product delivered a fully responsive layout, improved product discoverability, and positioned Tally Lighting as a polished, professional brand in a highly competitive local market.
Through this partnership, we were able to design and build a site that felt modern, clean, and aligned with their business goals. The final product delivered a fully responsive layout, improved product discoverability, and positioned Tally Lighting as a polished, professional brand in a highly competitive local market.
© 2025 Chris Puncekar, All Rights Reserved