CrossCurrents Fly Shop
Overview: Google Certification Project - June 2024. Redesign and reorganize a small business webpage to enhance its competitiveness against local and national businesses in the same industry.
Role: Student: UX Researcher, UX/UI designer
Toolkit: Figma, Adobe CC, FigJam, Pen and paper
Overview
CrossCurrents Fly Shop is a small business with two locations. Their main location, Craig, Montana and their secondary location, Helena, Montana.
The Problem: The CrossCurrents webpage, over a decade old, suffers from broken links, outdated information, and a convoluted user experience. These issues are driving potential customers to competitors, seeking a more seamless shopping and booking experience.
Solution: Transform the digital presence by modernizing, simplifying, and reorganizing the desktop version while enhancing mobile accessibility, ensuring a smooth and user-friendly experience across all devices.
Understanding the User
Research Goals: Understanding the who the main demographic is and determine if the experience is desktop or mobile focused.
Methodologies: Competitive Analysis, User Personas
Information Architecture
Leveraging research and detailed user personas, the information architecture successfully streamlined the website by reducing the number of pages and helped predicting user navigation paths. This approach significantly simplified the structure, enhancing the overall user experience and reducing complexity.
Site Map
By visually mapping the website's structure based on the information architecture, I highlighted the relationships between various pages and content sections. This blueprint ensures that all products, resources, and services are logically organized and easily navigable, providing an intuitive experience for customers.
Wireframes
The current structure of CrossCurrent’s webpage is not only complex but also plagued by inconsistent placement and UI elements throughout the web experience. My objective is to establish both a cohesive visual and information hierarchy, ultimately leading to a simpler, more intuitive user experience.
Usability Test
Following the initial iterations of multiple wireframes, usability testing was conducted both in person and with the Coursera Classroom Community. This applied to both the physical and digital wireframes.
Round 1 Physical Wireframes Findings
Multiple users found that the simplicity help navigation and what is the most important content.
Verbiage was difficult to understand in areas and needed more explanation.
Some visual hierarchy issues leading to users to have a negative impact on their experience.
Round 2 Digital Wireframes Findings
Confused users on what page they were on and what could be an active link.
Adding additional subhead help the user understand what each section was going to navigate to and why.
Adjust the design and simplifying both the header and footer allowed the user to be more familiar with common web navigation.
Wireframe - Digital
During the usability testing phase, I gathered insights from users' thoughts, comments, and concerns. These findings were then applied to enhance other pages of the website, ensuring a consistent and user-centered design across the entire site.
High Fidelity
Takeaways
Though this is a class related project, recognized and acknowledged my own biases helped to ensure they didn't negatively impact the project's outcome. I focused on solving problems that were backed by research, ensuring the solutions I developed were both relevant and effective. By iterating on multiple ideas, I was able to explore various possibilities and refine them to find the best approach. Regular testing of these ideas provided valuable feedback and data, helping to validate their effectiveness and identify areas for improvement.
What I learned
Simplifying the process can significantly impact the final outcome, beginning with straightforward flowcharts that extends to the prototype experience.
Testing and research through the entire project helped better understand user’s pain points.
Consistent design practices can notably accelerate the entire process.