- Design definition statement
‘Siberians of the Heartland’ is a website dedicated to promoting and selling Siberian Huskies. Not only does it sell huskies but it provides additional information including the origins of the Siberian Huskies, tips on how to raise and train them properly and even content on health supplements. The hospitality and hunting aspects of the business, ‘Double M Enterprises’ and ‘Rose L7 Hunting LLC’, are also advertised on this website. This has resulted in an extremely complex information architecture, that contains a tree and web structure:
The biggest problem is that this information is scattered all over the website and is not grouped by features such as breadcrumb navigation. There is no set typeface, colour pattern or specific/explicit theme that is consistent throughout the site. The website relies heavily on audience persistence and intuitive to find their way around, making it very easy to get lost within the website.
By exploring the website we came to realise just how many complex levels of content existed throughout it, which ultimately make it difficult for the website to function effectively and efficiently as a communicative tool. This becomes quite a problem when the main purpose of the website is to sell a product to people; dogs. Not only did we establish the excessive amounts of content within this website, but we recognised the prevalence of a strong identity, one that revolved around American farm and family life as well as American pride:
In this sense, the individuality of this website has been something we have tried to preserve in our re-design, content wise and aesthetically.
Ultimately, our aim is to produce a more efficient, cohesive and structured website that still maintains its unique identity, and through this, its relevance to its target audience. In this way, our re-design will breathe new life into this technologically outdated website whilst simultaneously maintaining relevance to its target audience. We aim to make this site more user friendly and easier to navigate by implementing features such as global navigation, breadcrumb navigation, a shopping cart, a footer, anchor points and colour systems.
Compiling a competitive set as helped to garner a good feel for what kind of design would appeal best to our audience of focus e.g. American, patriotic families.
A website of great influence has been the ‘Heartland Husky Rescue.’
It utilises a simple visual layout with an information architecture that allows users to easily gain information. This is ultimately due to its use of global and local navigation links located at the top of the page. It is effective in its use of:
- Header and footer, where important elements of the website remain universal e.g. shopping cart and social media;
- Sub pages and drop menus;
- Warm colour system; deters from a clinical aesthetic;
- Consistent font; and
- Logo in top-left-hand corner, which also acts as a hyperlink to the home page.
The third level (‘information’ à ‘adoptable dogs’) comprises of a somewhat effective layout:
Although, we believe the reliance on the left-bar-scan column lets this function down. Instead, we have preserved a particular feature of our chosen site (‘Siberian’s of the Heartland’ à ‘Heartland Adults’ section) where the photos of the dogs for sale act as hyperlinks to more information about them. To extend the effectiveness of this we have implemented breadcrumb navigation so that users can easily backtrack and return to the previous page where they may view the other available dogs if they wish:
Another influential website was ‘Native Sky Kennel’. We liked the universal presence of the header and its content, particularly as a method that ensured users would not get lost in the site. However, a downfall presents itself when you scroll down the site and the header does not fade away. Instead, it consumes a considerable amount of the screen, making it a little annoying when trying to read the body text:
Neither of these websites made use of a search engine. Prior to our research we believed a search engine would be a great way for users to quickly access specific information of our site. However, upon research we believe its implementation would be unnecessary as the content on the page is already quite specific.
While these websites were inspirational and made us think about how to improve our website, they all appeared a little too serious. We wanted to embrace the quirkiness and individuality of our website and implement a playful and fun vibe, one that mirrors the very nature of dogs.
Regarding the principles of interface design, we aim to create a clear visual hierarchy of contrast on our website, so that users can distinguish the important from the unimportant e.g. functioning regions of the page including active states. In the most basic form, the way we can achieve this is through the use of:
- Page headers;
- Scan columns;
- Content areas; and
The Ambrose and Harris design process model has been by far the most influential for us. It has clearly stipulated the necessary steps needed to progress our re-design from “a brief… into a finished product” (Ambrose & Harris 2010, p.11). It proved to be much more relevant for us when realising our objective, as opposed to other models such as the ‘Double Diamond’ or the ‘Process of Creative Activity’ which are much more concise points of reference. It is a more realistic model as it presents the many stages and the lengthy process of re-designing. The Ambrose and Harris model helped us to think carefully about, and recognise, each specific stage in our design process e.g. it encouraged the act of idea generation, prototyping and iterating until a potential solution would present itself.
3. Ideate – Creating potential solutions.
The first major step within the re-design process was culling the irrelevant information of our site. This becomes apparent in our re-design of the information architecture:
I believe my initial re-design prototypes were a little too different from the original in terms of visual hierarchy.
Looking back on it now, it reminds me of a powerpoint presentation; not a good look.
Presenting our individual prototypes provided us with feedback that led to a critical incident in our re-design process:
- design refresh instead of a complete re-design: will avoid stripping the site completely of its identity.
- maintain certain quirky elements of the site that show the family’s love and passion for raising these dogs.
Other feedback was integral to the progression with our website re-design:
- make the footer white at all times;
- think of how to incorporate gifs;
- re-design the shopping cart icon so that it is more related to buying dogs and therefore establishing an emotional connection e.g. little dog house/kennel, ‘Take Me Home’, icon of silhouette family with dog etc.
4. Prototype – resolving solutions.
As a result, the following prototypes were created:
Our animated logo turned out well. However, we had to be wary that it still needed to connect with the rest of the theme in our finalised website.
These were the initial prototypes for the ‘Take Me Home’ button. Experimentation with colour scheme led us to settle for a monochromatic palette. This would make it easier to integrate into the ‘natural’ colour system we had been planning to create from the beginning. Additionally, to bring out the personal relationship an owner has with their pet, we turned the conventional shopping cart icon into one that features a person walking a husky. The words ‘Take me Home’ and the imagery, we felt, contribute to capturing the loving relationship between the owners and their dogs in the original website.
This was our initial home page idea, where the images would act as hyperlinks to the various pages on the website e.g:
- adults for sale
- puppies for sale
- useful information
- contact us
Our plan was to ‘burn’ the title ‘Siberians of the Heartland’ into the wood to create that ‘farm’, ‘rural’ aesthetic. The American flag would remain a consistent background throughout the website but made less noticeable, through black and white colours, to prevent distracting the viewer from the information or make the information hard to read.
Our first attempt at creating a functioning prototype occurred when we made a Webflow page. Unfortunately we struggled to harmoniously remix our elements with those on Webflow. After numerous attempts (and many Youtube videos later) we moved onto working with Adobe Muse, where we planned to build our website from scratch. This proved too difficult and time consuming, considering the time we had left. As a result, we decided to work with Wix.
The main reasoning behind this was due to viewing the work other groups were been able to do with WIX. We narrowed down our templates of interest to one that we believed would work best for the kind of format and aesthetic we wanted to create in our re-design:
We had to make a lot of adjustments to this layout in order to really achieve the look we were after. This included getting rid of the three columns (centre), the block coloured header and hero image.
We also scratched the ideas of a loading page with puppy paw prints running around in a circle as well as the use of photo frame as a main source of global navigation. We figured these ideas were not ideal in our re-design rationale, where we wanted to create a site that was less confusing and more user friendly and to the point.
We sketched out the basic structure of our website and how we wanted it to look as audiences scroll down the page.
These images were our prototypes for the background of the website. As you scroll down the image stays in place, and does not change as you navigate throughout the site. This was done to carry across the strong sense of identity within the original site. The flag had to be scaled down accordingly so that it would fit properly in-situ. Our logo animation was not functioning in this way, therefore we uploaded the background and the logo separately, which worked out better.
This is our current, functioning home page. As you can see the background image moves with the right-hand scan column, allowing the American flag to be visible at most times. Integrating the original images was important, especially in preserving the identity and individuality evident in the original website.
The corniness of the original website was preserved through images such as the male and female icons, made from paw prints, the gif and the frames around the images.
Additionally, the colour system of our site references the typical colours of the Siberian Husky. This can be seen through the greyscale, black and white colour scheme as well as the blue tone use to signify active states. This was also done with the intention of utilising natural colours in order to prevent the website from appearing too visually overbearing, particularly when coupled with the images within the elaborate picture frames.
Using Wix and a pre-existing template was extremely useful for us. We have been able to achieve everything we set out to do through Wix, including:
- breadcrumb/global/local navigation
- drop down menu’s
- anchor points
- ‘take me home’ purchase button
- header and footer
- new animated logo that acts as a hyperlink to the homepage
All of these implementations have allowed us to:
- create a more user friendly site
- cohesively link visual and informational elements of the website together e.g. body font, heading font and colour systems with gif’s and images.
- re-arrange and re-structure large chunks of information in a more succinct manner that remains relevant to target audience.
Wix was a great way to produce an attractive website re-design in a short amount of time and in a cost-effective way.
Ultimately, the website re-design has been a success. We have been able to change the major elements of the original website that were preventing it from being a successful communicative tool and business.
In saying this the two successful outcomes of the major project are:
- The revised information architecture; our original information architecture had eight levels compared to our revised version, which only comprises of four. Working on this aspect of the re-design made me realise how crucial the information architecture is to the overall function and aesthetic of a site.
- A more professional aesthetic that still maintains the quirky features of the original website through gifs and imagery.
Two unsuccessful outcomes of the major project are:
- The lack of gifs; we wanted to include more moving images in our site, however we did not get around to it. I believe that 3-4 gifs would have made the site more fun and appealing,
- Colour; although the colours appear natural, the monochromatic hues create a more serious vibe within the website. The integration of warmer colours e.g. browns, may have helped to resolve this.
With regard to these successful an unsuccessful outcomes, my approach to future projects like this one will be more calculated and thoughtful in order to truly debunk and re-imagine a design.
Upon doing the re-design I do not think I completely realised the amount of work that needed to be invested in this project. Ultimately, working on this taught me to:
- Be more thoughtful with such creative projects and to not mentally limit myself regarding what can be done.
- Despite changing from three different programs to create our website, working with these various forms has benefited me in the long run. Now I am more aware about the technologies out there and also have strengthened my knowledge regarding how to operate them, from a basic, to an intermediate, to a high level.
- I have also expanded my graphic design skills and have refreshed my editing skills; reading through the vast amount of information on the site made me rely heavily on my ability to transform dense paragraphs to concise segments of relevant information.
- My attention to layout and visual hierarchy has also been tested and strengthened.
All of these skills will definitely continue to be used now and in my future as a graphic designer. I am hoping to do some creative work in the near future, working on album cover art and other miscellaneous projects. In this way, I am aiming to utilise all my skills to create interesting and cleve designs!
Another field of interest for me is working at a company where I can work on magazine layout and design.
These skills, without a doubt will come in handy during these processes.