Introducing The Project.
Murdoch Post Graduate Co-Design Project | 2021
Flipside Tours is the product of artistic visionaries with a passion for Fremantle’s hidden secrets. Flipside Tours uniquely stands out from the competition, bringing their alternative and distinctive personalities to the forefront of their tours!
As Flipside has recently grown, the company has identified a pain point of their customers, no website presence, and difficulty finding them Online. Being alternative and distinctive, Flipside also wants to foster trust in their customers and create a strong identity to stand out amongst the competition. We aim to provide a creative, unique site that perfectly communicates Flipside’s personality whilst keeping their core values at the forefront.
Let’s change the expectations of the walking tours market
with a charismatic, artistic re-direction!
with a charismatic, artistic re-direction!
Stripping Back The Process.
First priority, establishing the goals.
Listening to the client revealed key insights into the project’s importance.
Listening to the client revealed key insights into the project’s importance.
Project clarification was important in understanding and gathering context into the problem, goals, and objectives of the project, providing a range of solutions to maximise the chances of making a website people actually want.
Since the company has grown significantly, having no website presence is presenting a hindrance to cementing trust and generating continual business with people beyond the face-to-face experience.
Today, users now engage with various companies on a constellation of devices, and Flipside Tours needs to embrace this opportunity and take advantage of proving a website service.
Research-informed a responsive approach to clearly simulate the stakeholders’ expectations and needs when using the website!
Framing Flipside Tours’ stakeholders was important in establishing how the website should function in design and optimsiation for the best experience.
Breaking down their potential expectations in an empathy map; an overview of a person’s sensory audit, helped guide what stakeholders expect and what is missing from the market!
To further strengthen our research, we created a market persona. A market person is the why, behaviour, and motivation-driven identification of people, this helps us to not dehumanise the stakeholder and understand how they would approach constructed elements.
Breaking down their potential expectations in an empathy map; an overview of a person’s sensory audit, helped guide what stakeholders expect and what is missing from the market!
To further strengthen our research, we created a market persona. A market person is the why, behaviour, and motivation-driven identification of people, this helps us to not dehumanise the stakeholder and understand how they would approach constructed elements.
Revealing our findings with Flipside Tours is crucial!
After accumulating research about potential stakeholders and their decision-making interactions with a website, we presented our findings to Flipside Tours. This keeps communication open with Flipside Tours so we are all on the same page and collectively, our goals aligned moving forward.
Before visual investigations, a site map was produced to clarify the inner workings of the website. A sitemap is a list of pages within a site, detailing the subcategories and the information within the links, highlighting the relationships between them.
Before visual investigations, a site map was produced to clarify the inner workings of the website. A sitemap is a list of pages within a site, detailing the subcategories and the information within the links, highlighting the relationships between them.
This was important to ensure the client’s goals were met and the website had relevant links that made sense.
Visual investigations and adequate wireframes commenced straightaway. Developing a visual investigation was important to show the client an understanding of our creative direction for the website, both in mood and appearance.
Visual investigations are a map of potential design directions, this gives the client the opportunity to pick ideas they like and best represents their identity.
Let’s explore the skeleton of the website.
Wireframes are perfect for establishing a visual guide for both us and the client!
Wireframes are used as a blueprint of the website, a basic structure of elements working on the page without colour. Wireframes help plan the website’s structure and functionality, planing out how the stakeholder will use the page and meet their needs.
Bringing the website foundations to life with branding
and visual direction…is the exciting steps that bring everything together!
and visual direction…is the exciting steps that bring everything together!
Adding design direction from the confirmed visual concept is crucial, this helps the client envision the blueprint established in the wireframe process.
Design concepts show the relative positions of elements and text before the final content is decided upon, this allows the client to feel comfortable in the direction and voice any changes. This was the last step before hard coding the confirmed concept into fruition!
Design concepts show the relative positions of elements and text before the final content is decided upon, this allows the client to feel comfortable in the direction and voice any changes. This was the last step before hard coding the confirmed concept into fruition!
It’s important to breakdown the final concept to explain the functionality.
Aesthetics.
The website has been designed with a focus on creativity and artistic representation. Having an asymmetrical design allows minimal cognitive load, giving room for the content to flow from one another and key elements shine.
The website has been designed with a focus on creativity and artistic representation. Having an asymmetrical design allows minimal cognitive load, giving room for the content to flow from one another and key elements shine.
Effective use of colour and imagery directly relates to the demographic of the target audience as well as to Flipside Tours. There is a harmonious balance between text-heavy content and design.
Functionality.
Keeping the content simple for navigation and for Flipside Tours to maintain the website beyond handover was the core motivation behind the function. Relevant information was grouped together to limit the number of pages.
Functionality.
Keeping the content simple for navigation and for Flipside Tours to maintain the website beyond handover was the core motivation behind the function. Relevant information was grouped together to limit the number of pages.
Large elements that guide the eye down, encourage people to move through the site rather than focus on the navigation bar. The tone was vital to function as Flipside Tours has a unique personality and wants to build a community, using inclusive, warm language pushes this core mission.
White Space.
Breaking each container of content into succinct and decent size paragraphs gives people time to digest the information and navigate easier. This is effective in breaking up heavy text and allows each section to have alternating colours for specific content, visually pleasing the eyes.
White Space.
Breaking each container of content into succinct and decent size paragraphs gives people time to digest the information and navigate easier. This is effective in breaking up heavy text and allows each section to have alternating colours for specific content, visually pleasing the eyes.
Being Honest
& The Power.
& The Power.
Be flexible, do not fear trying something
new that hasn’t been seen before or is expected.
new that hasn’t been seen before or is expected.
Listening to the client’s wants is incredibly important, even more, it is important to reveal the company message and pinpoint their personality.
Flipside Tours is a distinctive and artistic brand that stands alone in the market, this needs to be reflected in their website. Moving away from traditional grids and structures was difficult, however, removing the constraints lent to an asymmetrical, unique design that truly captures Flipside.
We had to step outside our comfort zone and the traditional expectations of web design to produce a website that is special. Being flexible pays off!
An honest insight into complications.
Building a website on this level required working with hard code, PHP, which was outside our comfort zone, and integrating into WordPress.
Although we had our challenges and code breaks, we produced a functional and beautiful website fit for Flipside Tours that meets their needs.
We wanted the handover to be as flexible and clear as possible for Flipside Tours, a seamless transition so they can feel comfortable altering as they evolve. Giving back door access to the WordPress site means no coding or hassle if they want to maintain themselves.
The learning points gained from this unique experience.
Aesthetics and functionality go hand in hand, the website cannot provide the best service possible without these two harmoniously working together.
We gained powerful knowledge on hard coding in PHP and working with WordPress, both unfamiliar territory we have not yet played in.
We gained powerful knowledge on hard coding in PHP and working with WordPress, both unfamiliar territory we have not yet played in.
Stepping outside our comfort zone has expanded our skills and confidence, giving us an insightful experience that prepares us for future work.
The End Product...
