Kirstyn HowellPacesetter Ski Shoppe
Increase customer engagement, social event reach, and in-person purchasing.
Ensuring a cohesive and interactive online experience that enhances real-world engagement.
Project Scope
This project was a full site design and development with the purpose of driving in-person customers to Pacesetter Ski Shoppe, organized through NAIT and done as student Capstone team project. The client did not have an existing website and needed something entirely new. The making of this website involved Figma design, user flow charts, testing, prototyping, wireframing and development in a team setting.
Working alongside one other designer and two developers, I successfully communicated my ideas and collaberated with my team to create a unified design style that met the clients needs and objectives.
I was also involved in the development of multiple pages with HTML, CSS/SASS and PHP in a custom built Wordpress environment.
Design Process
- 1. Layout of Project Objectives
- 2. Design Sprint
- 3. Sketch Ideas
- 4. User Flow Chart
- 5. Revision and User Research
- 6. Prototype
- 7. User Testing
- 8. Moodboard
- 9. Low Fidelity Wireframe
- 10. High Fidelity Wireframe
Goal Statement
This is the initial thought process and goal decided on by group brainstorming after our first meeting with the client. The goal statement is to create a user friendly, profitable online storefront website that promotes Pacesetters unique qualities and customer care.
Sketched Wireframes
Below are the initial ideas sketched out for the font page and blog posts of the website. These were the first steps of the ideation process and some of the starting ideas to solve the projects long term goal.
Crazy 8s
During the design process each team member came up with quick sketch ideas to bring forward as many ideas as possible for the project. This was in the form of a paper and pencil crazy 8s exercise, where I drew 8 different versions various pages on the site.
User-flow
The image below shows the close up user-flow of the main action and use of teh website. Being a person searches for an item, views the item and its features, goes through the process of adding it to a cart and purchasing the item and viewing related items or blog posts about related items or topics.
Prototype to Wireframes
This image illustrates the progression from the initial prototype to low-fidelity and then high-fidelity wireframes for a website project.
Starting with a basic prototype, the design establishes the foundational information architecture, ensuring logical flow and easy navigation. The low-fidelity wireframe refines this structure, focusing on user experience by arranging key elements for intuitive access and interaction. Finally, the high-fidelity wireframe adds visual detail and design elements, enhancing the aesthetics and usability while maintaining a coherent navigation path.
Each iteration deepens the consideration of user needs and project goals, resulting in a well-rounded and accessible website design.
Prototype
This project showcases a web design prototype created in Figma, illustrating the user journey through key navigational elements. The prototype features interconnected pages that guide users seamlessly through the main actions available on the site. It highlights a user-centric approach to design, focusing on intuitive navigation and an engaging user experience.
Lo-fi Wireframe
By emphasizing functionality over visual details, the lo-fi wireframe enabled me to identify and address usability issues early on. This step was crucial in refining the design and ensuring a smooth and intuitive user experience as the project advanced.
Hi-fi Wireframe
This phase allowed me to fine-tune the user interface and enhance the overall aesthetic appeal, ensuring that the design not only functioned well but also resonated with the target audience. The high-fidelity wireframe provided a comprehensive view of the final product, guiding the development process and aligning the design with the project's goals and user expectations.
Figma Design
In Figma, I established a guideline of columns with a 30-pixel margin and 32-pixel gutter, providing a consistent framework for the website layout. These guides helped maintain a cohesive structure across all design elements, ensuring uniform spacing and alignment.
By using Figma's grid and ruler features, I was able to organize content efficiently and create a balanced visual hierarchy. This approach, combined with common practices such as utilizing components and styles for reusable design elements, laid a strong foundation for the custom WordPress build, facilitating a seamless transition from design to development.
Challenges and Solutions
Product Database and E-commerce
During the project, we encountered a challenge with the client's database, which was not adequately prepared for conversion to the Lightspeed and WordPress integration. This issue was outside the scope of our team's work. To address this, we created a step-by-step guide for the client to manually add their products, either individually or once their database was properly set up.
As it became clear that the client wasn't ready for a full e-commerce website, due to both the insufficient database and their current business objectives, we shifted the project's goal. With the client's approval, we focused on developing a product viewing website designed to encourage in-person purchases, aligning with the client's readiness and strategic needs.
Results
My objectives on the project, as one of two designers was to design a clear, unified, modern ski and mountain themed site that focuses on directing users to interact with the websites events, blog and to view available products as multiple points to drive in-person interaction in store.
My contribution to the design and development of the website includes:
Front page
Services page
Blogs and Indiviudal Blog Pages
About Us Page
Contact Us Page
FAQ Page
The objectives of this website were met on time. With feedback from the client and multiple revisions between user testing of the prototype and the final product, my team was able to deliver a responsive, custom, and functional website that met our clients expectations.