"I hope no one makes websites like this anymore."
This was my participants immediate reaction when he first encountered Arngren.net — a website notorious for its overwhelming design. My task was to rethink, redesign, and create a more accessible, user-friendly solution, rooted in Universal Design (UD) principles.
From nostalgia to nightmare: A User Experience in need of a change
When I first visited the Arngren.net webpage, I found myself immersed in a chaotic and nostalgic design — a relic of early internet days, where electric cars for kids are sold alongside electronics and even futuristic flying cars. It really made me question whether this was an actual company or not. All wrapped within a sea of vibrant colors and jumbled product categories that made absolutely no sense. Its unstructured layout presents a playful trip down memory lane, but for users, it’s a navigational nightmare. This school project aimed to transform that user experience into something intuitive and accessible without losing the website’s quirky personality.
Research: Understanding the problem
The project began with extensive user research. I conducted user interviews with the participant to understand the accessibility barriers and the frustrations users experienced when navigating Arngren.net. This stage was crucial in gaining deep insights into user behavior and expectations. One comment in particular stood out and became the foundation of the redesign process, driving a focus on clarity and navigation as top priorities:
"This looks like a typical internet ad page from the early 2000s, and it's impossible to find anything!"
Design process: From chaos to clarity
Based on these insights, I developed several design concepts focusing on the following:
• Structured Product Categorization:
The disorganized collection of products needed clear, logical groups to help users find what they were looking for.
• Search and Filter Functions:
A functional search and filter feature became essential for users to quickly navigate through the broad product catalog.
• Accessible and Intuitive Layout:
Ensuring that the design met WCAG guidelines was a priority, including proper color contrast, logical content order, and assistive navigation aids.
Iterative prototyping and user testing
Through multiple rounds of low-fidelity prototypes, I iterated on the design based on user feedback. One of the key findings from user testing was the need for flexibility and simplicity in the lo-fi prototype. In early versions, too much structure made it too restrictive, so I introduced dynamic elements that users could interact with and adapt to their preferences.
Key takeaways from user testing
During the testing phase, the improvements were significant, but challenges remained:
• Consistency in navigation:
A simpler, consistent navigation system was introduced, improving usability.
• Minimalism in design:
Reducing visual noise while preserving Arngren’s quirky essence became a balancing act. The final design achieved a cleaner, more modern look without losing its unique character. A lot thanks to a redesigned quirky, logo.
• Improved accessibility:
By aligning the design with WCAG 1.3.2: Meaningful Sequence, I ensured that all users, regardless of ability, could navigate the site efficiently and intuitively.
Conclusion: A new vision for Arngren
The final iteration of the redesign transformed Arngren.net into a platform that not only embraced modern UX principles but still retained its nostalgic feel. The project successfully married usability with personality, proving that even the most unconventional designs can evolve into functional, user-friendly platforms.
Through the Participatory Design process, every decision was driven by real user needs, from early on in the process and this collaborative approach ensured that the final product was both practical and engaging.
The redesigned site stands as a testament to how Universal Design and user-centered methodologies can breathe new life into an outdated platform, providing users with an experience that is both amusing and accessible.
