CAGD202: Design Project Report

Screen Shot 2017-05-05 at 10.46.32 am

  1. 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:

Screen Shot 2017-05-05 at 10.29.07 am

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:

Screen Shot 2017-06-16 at 2.57.22 am10

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.

  1. Research

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.’

Screen Shot 2017-04-30 at 1.20.54 pm

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:

Screen Shot 2017-06-07 at 8.46.21 pm

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:

Screen Shot 2017-06-16 at 3.29.35 am

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:

Screen Shot 2017-06-16 at 2.19.52 am.png

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
  • Footers.

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:

EDIT MAP NEW.png

I believe my initial re-design prototypes were a little too different from the original in terms of visual hierarchy.

Level 1:

Screen Shot 2017-05-05 at 10.48.50 am

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:

www.gifcreator.me_rfh8vk

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.

 

Screen Shot 2017-06-02 at 7.40.55 am

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.

Syberians

This was our initial home page idea, where the images would act as hyperlinks to the various pages on the website e.g:

  • home
  • history
  • 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.

5. Select.

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:

Screen Shot 2017-06-07 at 4.16.22 pm

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.

Mericaupdate

Screen Shot 2017-06-08 at 11.50.51 pm

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.

Level 1

Screen Shot 2017-06-16 at 8.47.53 amScreen Shot 2017-06-16 at 8.48.12 amScreen Shot 2017-06-16 at 8.48.25 am

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.

Level 1

Screen Shot 2017-06-16 at 9.09.16 am.png

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.

Level 2

Screen Shot 2017-06-16 at 9.14.12 am.png

Level 3

Screen Shot 2017-06-16 at 9.14.54 am.png

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.

7. Learn

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:

  1. 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.
  2. 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:

  1. 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,
  2. 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:

  1. Be more thoughtful with such creative projects and to not mentally limit myself regarding what can be done.
  2. 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.
  3. 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.
  4. 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.

 

 

 

 

Entry 9: Progress

Our transfer to WIX is going well. We have the rough set up and structure to our website now and at this point all we need to do is implement all of the necessary information and images. These include:

  • male and female dogs for sale symbols:

 

  • male and female dogs/puppies for sale images;
  • sponsors/recommended brands in footer;
  • M&M Enterprises (now being labelled ‘Our Friends’);
  • culled information that was on the original site; and
  • other various images.

Currently our banner is in full motion, and we have figured out how to make our gif function on the site:

Screen Shot 2017-06-08 at 11.50.51 pm

We are also utilising anchor points and breadcrumb navigation.

We were going to implement loading screen gifs but we could not see the purpose of this.

There are still many adjustments that need to take place including the font colouring in ‘Siberians of the Heartland’; we still figuring out how to reverse this so that black is on the bottom and white is on the top. We also need to adjust the size of the ‘Take Me Home!’ button, located in the top right hand corner so that the font is more legible.

The colours palette is also not set in stone and a few more iterations will hopefully lead us to our final prototype before due date.

Entry 8: Interim Presentation and Progress

After presenting and viewing the work other groups have been able to do with sites that provide pre-existing templates, we have decided to change from working with Adobe muse to WIX. We have narrowed down our templates of interest to one that will work best for the kind of format and aesthetic we want to create in our re-design:

Screen Shot 2017-06-07 at 4.16.22 pm

At this point, we are transferring all the work we have done across from muse to our wix template as well as prototyping the most visually effective ways in which to present the content:

update.png

Screen Shot 2017-06-07 at 2.50.36 pm.png

Whilst doing this, we are simultaneously teaching ourselves how to work with WIX. We aim to integrate breadcrumb navigation throughout our site as well as keep a global navigation panel on the home page.

We aim to ad an anchor to the global navigation panel so that when you click on each respective tab (‘about us’, ‘adults for sale’ etc.) you will be taken to the area on the home page that displays these sections, instead of having to scroll down through the page. This will make it a lot easier and practical for the target audience to navigate their way through the website.

We have also decided to keep Double M Enterprises in order to preserve the personal touch of the original website.

Additionally, we need to figure out how to make our husky head gif function properly in our re-design as well as condense the heavy content on the original website into more succinct bouts of information.

Entry 7: Progress

Our group began prototyping the structure and format of our website via Adobe Muse:

  • Home page: A simple hero banner with American Flag (clipping mask of american flag with shape of the country – integrates and re-establishes the strong focus on identity that was evident in the original site). Will also feature our logo and name of the website; e.g.

Merica

  • As you scroll down there will be an introduction of the site, followed by images that act as the global navigation to the core levels of the site e.g. ‘About Us’, ‘Adults for Sale’, ‘Puppies for Sale’, ‘Lost’, ‘Useful Information’, ‘Our Friends’, ‘Contact Us’ et.c
  • Loading page: incorporates gif of dog running across the page or paw prints going across the page
  • To bring out the personal and intimate relationship the owners have with their huskies, we have turned the conventional shopping cart item into one that features a person walking a husky. The words ‘Take me home’ we feel, contributed to capturing the personal relationship that is evident between the owners and their dogs in the original website.

Screen Shot 2017-06-02 at 7.40.55 am

This helped us to visually see the structure of our website and how it would function. Considering this progress, we are now able to plan our next steps towards creating our website.

 

The internet: It’s a catfisher’s paradise.

How can curated, online personas affect relationships? How is this mask we put on, every time we venture online, influencing the way we type, think, speak and interact with others?

As we make our way further into the 21st century, people continue to find new ways of re-inventing or re-creating themselves. An extreme example of this is when people catfish.

Ruth Palmer discovered that, after three years, a fake account by the name of Leah Palmer had been imitating her.

_81390110_ruth

Ruth’s husband was labelled as her ‘ex-boyfriend’ and ‘stalker’ via Leah’s social media.

During that time the fake accounts had used her personal photos and amassed thousands of social media followers. Even a romantic relationship was formed with an unfortunate, unsuspecting male suitor, who later described Leah as a “no-show“. The life of Leah Palmer was a complete fabrication and consequently, it emotionally affected the people who were interacting with her.

MEM.png

Another example of catfishing presents itself in the case of internet personality, Andrea Russett. She described the numerous fake accounts of her as “…kind of flattering but as the years went by…it started to register that these people could say something that I would never say, like something racist, homophobic, anything offensive“. As a result, the catfishing of this micro-celebrity momentarily impacted on the personal brand she had crafted for herself since her Youtube channel kicked off in 2008. Luckily, most people were smart enough to realise that these were fake accounts making the offensive comments.

But just how prone exactly are people to becoming catfished? Some twitter users believed Carina Santos, a Brazilian journalist, was a real person, when in reality she was a twitter bot. What if someone tried to connect with her romantically only to discover she was a cold-hearted piece of well crafted software?

MEMEME.png

Ultimately, the cases of Ruth Palmer and Andrea Russett just go to show how easily our online presence can be drastically altered. Once our information is out there, it belongs to the public. This kind of identity theft is not considered a crime and therefore, nothing can legally be done about it. This makes it difficult to prevent dangerous events from occurring for the victims; those who have been catfished and those who have had their identity stolen.

What if the person whose is catfishing is a pedophile who is using the internet as a platform to speak to young children? Or what if the person whose identity has been stolen is confronted by someone they have never met before because their profile has been catfished?

Share your thoughts in the comment section below!

Entry 6: Progress

Through a group meeting we encountered some issues:

  • how to use web-flow

We spent most of our time attempting to figure out how to work with web-flow in order to achieve certain aesthetics. We are considering watching tutorials on how to use Adobe Muse at this point because it seemed to difficult and time consuming using web-flow despite watching multiple youtube tutorials.

We also began re-designing our logo for the website. Currently our logo comprises of the side profile of a husky (which will turn into a gif; its eyes will open and tongue will pop out). It is not a realistic depiction of a husky.

www.gifcreator.me_rfh8vk

Additionally, we decided to make a gif to incorporate the playful and sketchy nature of the original website. What we need to make sure of at this point is that our logo ties in nicely with the rest of the website.

Entry 5: Progress

We have decided to add a homepage to our website. The homepage will integrate the key elements of patriotism, quirkiness and family that the original website integrates:

Syberians

The images will act as hyperlinks to different sections of the website e.g.

  • home
  • history
  • adults for sale
  • puppies for sale
  • useful information
  • contact us

A footer will be at the bottom of the homepage and the title ‘Siberians of the Heartland’ will be ‘burned’ into the wood to create that ‘farm’, ‘rural’ aesthetic.

The American flag may stay as a consistent background throughout the website but made less noticeable (perhaps b&w colour) so it does not distract the viewer from the information or make information hard to read.

The logo will be a simple gif; side profile of a husky with tongue popping out and eye opening and closing. The name of the business ‘Siberians of the Heartland’ will be integrated into this logo.