Duration
01/24 - 03/24
Scope
Internship
Role
Product Designer
Outcomes
Increased Revenue
Spearheaded the redesign that resulted in a 172% increase in total sales.
Boosted User Engagement
Implemented strategic UX improvements that increased online store sessions by 139%.
Improved Customer Retention
Optimized the customer journey, leading to a 7% increase in returning customer rates.
Background
PixelNamics specializes in crafting tailored Shopify stores that propel entrepreneurs' online businesses. Known for blending strategic design with technical expertise, PixelNamics ensures each digital storefront maximizes user engagement and drives commercial success. This case study delves into the recent website redesign aimed at elevating user experience and boosting conversions.
Problem
The PixelNamics website was encumbered by a poorly structured information architecture and excessive clutter, resulting in information overload and inefficient access to critical services. These design flaws obscured the site's core offerings, complicated the user journey, and hindered the effectiveness of the service discovery process, thereby stifling conversion rates and user satisfaction.
Process
Research
Stakeholder Interview
Heuristic Analysis
Competitive Analysis
Personas
Ideation
Site mapping
UI Sketches
Low fidelity wireframes
Design
Visual Design
High fidelity wireframes
Evaluaiton
Testing Prototype
Revise
Documentation
Research
Research Goals
Identify pain points in the current website's user journey, particularly around service discovery and navigation.
Understand user expectations and preferences for a more intuitive, streamlined website experience.
Analyze competitor websites to gather insights on effective service highlighting, trust-building elements, and conversion-driving design patterns.
Validate design decisions through data-driven insights, ensuring the redesign effectively addresses user needs and business objectives.
Explore ways to reduce cognitive load and improve information architecture for a clearer, more focused user experience.
Stakeholder Interview
Gaining Key Insights to Align Business Goals with User Needs
Veronica Lopez shares her vision for PixelNamics.
Heuristic and Competitive Analysis
Refining Usability and Benchmarking Against Industry Standards
Heuristic Analysis
Competitive Analysis
Curating Personas
Crafting User Archetypes to Guide Targeted Design Decisions
Ideation
Site and Mind mapping
Outlining the structural and creative approaches we took to reimagine and enhance the PixelNamics website.
Sketches and Low Fidelity Wireframs
Here we have our initial layout sketches, where you can see our first rough ideas coming to life. These sketches are the early drafts that help us start shaping the future look and feel of the website.
Design
Original Design
Final Design
This section showcases the final design, where all the initial ideas, iterations, and refinements come together to create a polished, user-centered website that delivers both functionality and a seamless user experience.
Improvements include:
We restructured the navigation to make it easier for users to find what they need without getting lost.
Highlighted important services like retainer plans and consultations right on the homepage for quicker access.
Organized content more logically, making it easier for users to find services and important information without feeling overwhelmed.
Adopted a more minimalist design with plenty of white space and a clear visual hierarchy for a sleek, professional feel.
Ensured the site is responsive, delivering a smooth experience whether you’re on a phone, tablet, or desktop.
Redesigned call-to-action buttons with bolder colors and better placement to encourage user engagement.
Added client testimonials and case studies front and center to build trust and credibility.
Rewrote service descriptions to make them clearer and more concise, so users can quickly grasp what’s offered.
Unified the look and feel across the site to keep everything in line with the brand’s identity.
Visual Design
I implemented a consistent design style throughout the site, improving navigation and reinforcing brand identity.
I opted for the 'Assistant' font for its sleek, readable style that speaks directly to our forward-thinking audience, maintaining a professional yet accessible tone.
By stripping away unnecessary details, we ensured that the user’s focus remains on what matters- the content, making the brand's message resonate more clearly.
Evalutation
Usability Testing
I organized a thorough usability testing session with five participants to gauge how well the redesigned PixelNamics website performs.I first had them complete tasks on the original website, I then previewed the new designs on Shopify, and had users complete a set of tasks within this new design.
Tasks:
Locate Retainer Services
Sign Up for the Newsletter
Navigate to the Blog Section
Complete a Purchase
Results
Locate Retainer Services:
The task times are improved, with completion times decreasing from an average range of 70-180 seconds in the old design to 35-90 seconds in the new design.
Sign Up for Newsletter:
This process has been streamlined significantly, with times reduced from 90-200 seconds to 45-100 seconds.
Navigate to Blog Section:
Navigation times have decreased from 80-200 seconds on the old site to 40-100 seconds on the new site.
Complete a Purchase:
The purchasing process has been optimized, cutting down times from 120-240 seconds to 60-120 seconds.
Take-Aways
01- Leveraging Hierarchical Structure for Enhanced Navigation
The redesign focused on imposing more rigorous hierarchal layout for the sake of navigation and information search. By providing navigational hierarchy to the content, we cut the user’s effort down to almost half and thus, provided them with a better user experience.
02- Visual Cohesion as a Trust Catalyst
We employed advanced principles of visual cohesion to unify the user interface, aligning color schemes, typographic scales, and element spacing across the platform. This uniformity not only elevated the aesthetic appeal but also reinforced brand reliability and user trust at every touchpoint.
03- Balancing Business Objectives with User Behavior:
By prioritizing the placement of key services and calls to action based on user engagement patterns observed during testing, we effectively balanced the company's objectives with a seamless user experience, ensuring both user satisfaction and business success.
