Dragonfly Screenprinting

Web & Graphic Design, Freelance

Prototype Web & Business Cards


Dragonfly Screen Printing is a small Melbourne based start up Screen Printing studio dedicated to using organic materials & sustainable practices. Having worked with Dragonfly in the past designing them their new business cards, I was able to use the theme & style guide from that job as a foundation towards the creation of this concept website. Being that Dragonfly are just starting out they do not have an up & running website yet, so I decided to begin this concept using the “mobile-first” approach. 

Using the mobile-first approach, I can begin my design from a small screen perspective then work towards a larger screen perspective such as from a desktop web browser. The advantage in doing means that should Dragonfly choose run with any of my concept designs later on, they will run into less issues in regards to screen formatting when customers visit their site using a variety of devices. Often in UI/UX, layout issues can arise when a site has been primarily designed for a desktop browser and then visited using a mobile device. Images, content & interactive elements can often get skewed or appear too small or large. This can be fixed of course but often requires some extra effort because elements need to be simplified for a smaller screen.

This concept site was designed to simplify the product ordering process for Dragonfly’s customers. In having this, first time customers can get live quotes on individual or bulk orders for simple design printed products as well as review product information for more complex orders. In addition, the customer can bypass calling in or emailing Dragonfly for simple queries freeing up Dragonfly staff to more comfortably deal with more complex customers/queries.

Below are some sample snapshots showing my initial design thinking for layout. Using the design Style-Guide from the first job I did with Dragonfly Screen Printing, I begin with a low-fidelity concept, incorporating minimal key details only such as: fonts, sample image boxes & simple navigational icon (labelled boxes) whilst remaining completely in greyscale.  Through this process, I am able to identify issues in the websites navigational flow and make immediate improvements within a single concept. Proportions and sizes for Image boxes & clickable items can be experimented with before full detail is added, this allows for a faster development process between conceptual ideas.

After a robust low-fid concept has been constructed, detail can be added. Colours, backgrounds, icons/symbols and images can be incorporated to the mockup to build a rendered high-fidelity prototype. In doing this, Dragonfly gets a better perspective of how this web design will look like if it’s launched. 

Using Sketch (Mac IOS), I created a clickable (testing) prototype so that I could run-through and see how the landing pages interacted with each other as well as to see how smoothly the interface interacts with a first time user. Is the layout logical? Can the user find what they are looking for? Is there any confusion between steps?

Through the development, this has also been an incredibly useful tool to have when showcasing designs & iterations to clients, as it shows them how someone would interact with their product and ultimately this leads to more constructive feedback.

Above: Clickable Prototype generated in Sketch (Mac IOS). Orange lines indicate app navigation, the paths between button’s clicked and relevant landing pages. This Mockup illustrates a single flow from selecting a product to adding a custom printable design and then takes you through the purchasing steps. (Home Page>Mens>T-shirts>Crew Neck T-shirt>Configuring Design>Add to Cart>Checkout/Log in>Payment/Shipping>Order Confirmation)