Piper Republic
website redesign + Rebrand
sustainability in design
Focus
My Responsibilities
Brand Guidelines
Piper is simple and to the point. It’s playful, elegant, bouncy yet serious when it needs to be.
Podcast Mockup
Magazine Inspiration
Pleasurable, consistent, and easy-to-use design. The primary colors—red, blue, and yellow—reflect the fundamentals of color theory and design principles, serving as foundational building blocks. The editorial yet dynamic layout harmonizes all six design principles, embodying Piper's commitment to simplicity and foundational design.
Typefaces
Color Palette
Component Library
High Fidelity Wireframes
Homepage
Media Page
Article Page
Subscription
Print Mag. Info
About Page
Following the style guide, we applied its principles to develop a homepage with simplified navigation options for enhanced user accessibility. All media is viewed on one page with the ability to filter and sort content.
Examining the user experience
Heuristic Evaluation
Error Management
- No search functions
- Terms and conditions policy does not link
Memorability
- Different links lead to the same page
- Multiple navigation bars
Efficiency
- Products do not have filters or categories
- Walls of text are hard to digest media
- Some articles require 4 clicks to view
Homepage
Article Overview
Learning from Leaders in the Industry
Competitive Analysis
Most design publications had minimalist and clear navigation with a focus on using a featured articles and a search bar. We noticed an opportunity for Piper to set itself apart from the competition with a link to its podcast and adding comprehensive filters.
Empathizing with Users
Affinity Mapping
Users Want...
Content & Information
- To see the brand’s message present on the site
- Videos and images to accompany contentInformation must be digestible
- No lengthy sign up forms
Design Aesthetic
- A site that is minimal and clean with a lot of information that is visually pleasing
- A color palette inspired by natural elements with neutral tones
- A “credible” website visual design impacts credibility
Navigation
- A search bar to find specific information
- Information organized by category
- Simple and efficient navigation
What Users Are Saying
We interviewed 8 users in the design industry and 2 users with no design background. Their insights collectively noted the importance of minimalist design in promoting not just sustainability but also the credibility of a website.
defining the Objective
What Do We Do About It
Navigation + Layering
When looking at the site map, how might we improve navigation for a clean and intuitive experience?
Site Map - Existing
Notable pain points in the existing site map include two navigation bars, different tabs that lead to the same page, and all having all media separated on different pages.
Site Map - Revised
We know from interviews that an intuitive flow through the website was very important, so we wanted a way to combine and narrow down our options as much as possible. We simplified our navigation into 3 overarching tabs based on card sorting, allowing users to intuitively browse media through filters.
Design Process
Ideation
As a multi-platform media company, it was crucial to prioritize the layout of content. During the sketching process, we focused on maximizing the amount of information presented in a playful and intuitive way while preserving a clean and minimal aesthetic.
Initial Sketches
Feedback from user testing showed that users wanted an efficient shopping experience and did not want to go back and forth between product pages.
Mid Fidelity Wireframes
Homepage
Media Overview
Article Page
Print Magazine
About Page
Feedback from user testing showed that users wanted an efficient shopping experience and did not want to go back and forth between product pages.
Analyzing the User Experience
We talked to 4 people who regularly use media websites and focused on testing navigation. Users were able to understand what Piper Republic was about but had some issues when looking for specific information.
Task Analysis | Mid Fidelity Wireframes
Insights
Homepage
Homepage
Homepage
Task Analysis | Validating High Fidelity Wireframes
User interface elements on the homepage and media overview were enhanced to be more intuitive and easier to navigate. However, some testers still encountered difficulties locating specific articles.
Final Wireframes
Homepage
Media Page
Article Page
Subscription
Print Mag. Info
About Page
Retrospective
This project aimed to redefine the brand’s visual identity, improve website usability, and align with its sustainability ethos. Key successes included delivering a cohesive visual design system, improving website navigation and performance, and reorganizing content for better discoverability. User research and stakeholder workshops played a critical role in ensuring alignment and functionality. Despite challenges such as balancing aesthetics with functionality, content migration complexity, and tight timelines, the project leveraged early usability testing, detailed planning, and agile methodology to achieve its goals. Recommendations for the future include expanding personalization features, enhancing community engagement, and conducting regular brand audits to ensure continued relevance.
