A front end playground

by Daniel Tate on Wednesday, September 10, 2014

What's Codepen?

Codepen is a playground for designers and front end developers, it's a great place to find inspiration try out new ideas quickly and engage with fellow developers.

$("#loader").click(function() {	
	      	     

    var el     = $(this),  
     newone = el.clone(true);

     el.replaceWith(newone);

});

setInterval(function(){
  $("#loader").trigger('click');
}, 3000);

What can it do for you?

Almost anything, Codepen has so many options you can write vanilla html, css, javascript or you can experiment with templating languages like haml or slim try out a pre-processor like LESS or SCSS with no installation or setup necessary.

The path of least resistance

If you ever wanted to just try something out quickly and without having the trouble of scaffolding a whole project just to see what an animation looks like this is the place for you.

Growing your business from within

by Simon Dickey on Wednesday, September 03, 2014

Growing your business from within

Imagine a place where your customers are so loyal to you because you have made it very easy for them to get what they need.

Businesses are often caught up in growing their customer base through slick marketing to attract new and existing customers to their product or service; because you have created a need that will make their lives better.

However we often spend a whole raft of money acquiring the customers but then drop the ball in providing a high level of service once you have them onboard.

I have just shifted my business from one telco provider to another because I wasn’t loved. I noticed new products and services out there that were way better than what I was paying for. But hay, we are not a big company, probably have a total spend of $12k per year on mobile, phone and broadband but it is still $12k. Multiply that by ten companies like mine and that starts to add up.

It’s not until you advise them you are going elsewhere that they get down on their knees and beg you, with great offers, to stay. Sound a little familiar?

However on a positive note, banks have been leading the way in providing kick ass, online self-service. They have provided the right tools, at the right time, on the right device. And customers prefer it this way.

It seems however that business to business self-service is lagging behind the wave of business to consumer self-service. 

If you can deliver a better service to your customer than through traditional forms of call centres and account managers then that would be the ultimate goal. Your cost of service will drop, however the customer loyalty to your brand will grow stronger.

Frontend is currently working on a raft of self-service projects with a solid user-centred design approach, which begins with researching customers’ needs and understanding their journeys and behaviours. 

Once you hit the wireframe and design stages you can easily test your designs with paper or HTML prototypes before investing into any software development.

I have seen several businesses that have decided user testing is not important and gone straight into software development only to find out customers are not using it. The common reasons are due to timeframes, budget or the business thinks they know what their customers need. 

Having an adaptable design and test process allows you to make changes very quickly and to retest again with other users which enable you to progressively improve the user experience early on in the project.

This will always be a continuous process as the business and customer needs change. Adopting a user-centred approach in your organisation will deliver customer loyalty and repeat business.

Kelly's sign off

by Kelly Milligan on Wednesday, August 27, 2014

After four glorious, happy years working with these very talented folks - adventure calls! - and It's my last day here at Frontend. Over the next few weeks I'll be making my way through the USA to Amsterdam. I'm embarking on a new journey in creative (and life!) development, and I'm seriously excited to see where it leads.

I've done this write-up to reflect on my time here at Frontend. There's so much I've learned, so many great people I've met and worked with, and a bunch of projects I'm proud of.


Before Frontend

While studying you get asked that question: "Where do you see yourself in 5 years?". I didn't quite foresee this... but man am I stoked to be here now. I was studying Electronic Commerce with a major in Economics - mainly Business School papers with some Computer Science peppered throughout. I'd tinkered with web and flash as a hobby, who would've thought it was career material!?

A summer work-experience placement as a junior web developer got me hooked. From the very beginning of my web career I've been excited about creative development. When I started it was Flash, specifically what was possible in likes of Papervision3D.


Hello Frontend!

I came in to Frontend as a junior/intermediate front-end developer. James was my interviewer, and I've had the pleasure of working with him since. Over the first couple of years Simon gave me plenty of opportunities to try alternative parts of the process: wireframing, interface design, mobile design, project management. This exposure gave me focus and clarity over which parts I love the most - code & interaction. My other two years at Frontend have been solely focused on these two topics. This freedom to explore my talents and preferences has been incredibly valuable, and I applaud Simon for his open-minded approach to this within the team. I leave as the Senior Front-end Developer, a title I'm very proud to have earned.


The take-away projects

There's been a bunch of great projects here that have taught me so much. If you work in development you'll know that feeling - every finished project makes you a far better developer than you were before. It's one of the things that make this role so interesting. You never stop learning, growing, and improving. Embrace it!


Spark Digital / Gen-i

Undoubtedly the largest and most intense projects I worked on here were for Spark Digital (formerly Gen-i).

In 2013 we created a brand spanking new digital channel for Gen-i. Design, client-side code and platform all new, without legacy haze. Making such big picture decisions around the client-side was an awesome challenge.

After the public website was complete, we began work on the Gen-i Procurement portal, which ran through 2013 to early 2014. Gen-i Procurement is an online store where Gen-i's customers purchase all sorts of business related hardware. It's like an enormous eCommerce shop, and shared the same UX issues that many eCommerce stores share. We reviewed every part of the UX with a fine tooth comb, and re-built the whole interface from scratch with UX as the number one priority. What we got was an incredibly detailed, polished and intuitive shop interface. Gorgeous on both design and technical levels.

In 2014 Gen-i and it's parent company Telecom rebranded as Spark. With the rebrand came an overhaul of the public website. The chance to re-visit the design and code of a project in-depth is rare, and we embraced the opportunity to finely tune what we'd previously created. Knowledge gains from the Procurement portal made their way into the public website, and the whole digital identity became even more cohesive.

Fonterra Living Water

This was a fun one. A rich one page website with a challenging timeline. We got something pretty impressive out the door in a few short weeks. Full-frame frameworking, parallaxing, forced agile-ity, we learned it all here.

Frontend's own

We've had a lot of fun with our own website over the years. It's always hard to find the time for your own website - but it's one of those rare projects where you truly have full creative control. Among many other things, we had a lot of fun exploring SVG's and their real-world usage on this latest iteration.


What's around the corner?

For me, it's Creative Development. I've got a great opportunity to pivot my Front-end development skill into Creative JS development - utilizing new "web-standard" methods like CSS3 and WebGL. I feel extremely lucky to be following my passion in this area of front-end coding.

Frontend is in growth mode, there's fresh talent coming in, more fantastic projects coming up, and loads of top-quality stuff going out.


Signing off

It's been a wonderful time here at Frontend. I really look forward to keeping in touch with the great friends I've made here. Simon, James, Anna, Corinne, Scott, you're all awesome - and I'm sure our paths will cross again. Thanks for all the laughs, stimulating conversation and engaging collaboration. Dan, enjoy it here dude. You've got an undeniable passion for front-end dev, and I really look forward to seeing what you guys create together.





Keep an eye on my personal website at kellymilligan.co.nz to see what happens next :)

Dank je wel!
Kelly

Gen-i to Spark Digital

by Simon Dickey on Thursday, August 14, 2014

How Frontend transformed Geni-i's digital channels.

With an organisation as large as Telecom Gen-i, a rebrand initiative by the business is a large undertaking and requires a well thought out plan.

One week ago Gen-i launched its new brand Spark Digital that will focus on delivering end-to-end digital solutions for New Zealand Corporate and Government.

Frontend played a key role in rebranding the customer-facing website www.sparkdigital.co.nz and their self-service portals which Frontend delivered on time in only ten weeks.

What made this project so achievable in a very short timeframe was working with the Spark Digital user experience team to define what was realistic for day one while maintaining high quality processes and content, without needing to cut corners.

This allowed us to focus on a user-centred design approach on key interface elements where the business needs and user needs were equally considered.

Now the business can focus on improving the online channels incrementally knowing they have the fundamental UI brand elements in place.

Defining achievable goals early on with a detailed timeline of key milestones helped lay the platform required for the project to run smoothly. This helped to minimise the pressure in the final stages of the project as we allowed plenty of time for testing, bug fixing and content loading.

The beauty about the online space that many marketers forget is the ability to roll out new features periodically rather than one big bang.


It’s kind of a big deal.

by Anna E. Saunders on Friday, April 04, 2014


The new Frontend site is up and dazzling all corners of the interweb.

We wanted something fresh, tasty and relevant [insert other buzz words like "pop" here].
But really.
We don't talk that kind of way.
And our primary objective wasn't to make things pretty, nor laden the site with high-res images of work we've done – anxiously waiting for people to acknowledge our brilliance.
No.

It’s to convey the essence and core of why Frontend Design exists. We’re here to make our clients’ clients’ happy.

Our focus at Frontend has always being user-centered – basing our strategy around the end user and the device they are most likely to use.

Therefore our approach was to base the whole site on the end user and the journeys they undertake.

Within the Discovery phase of a project, we hold workshops with our clients. In these sessions we validate our thinking by creating user personas.

They usually have odd names, but are a fun and realistic way of testing ideas – relating them back to the people who would use the end product.  This approach allows us to make appropriate decisions at the early stage of a project.

We ditched the grid system and cut loose. With hand sketched illustrations reminiscent of Simon and his life-drawing classes – we defined a new, simple-style of design which matches our process.

The site is responsive all the way down to mobile. You could be viewing this at a cafe on your smart phone or on your laptop horizontal on your couch. We've got all bases covered. The build is robust, the nonexistent grid proved a successful challenge for Kelly.

I could talk about the meticulous refinement of type-size and leading, but I’d rather you just enjoy.

From the team here at Frontend, GHOGH.


Feel good,


A

Near miss for Frontend's Mascot

by Kelly Milligan on Thursday, April 18, 2013

Recovery

It was almost a disastrous day for Frontend’s resident Kingfisher.

You might have seen an animation inspired by him flying around our old website...

Simon found him in the middle of Valley Road, scared and in shock. Simon scooped him up and brought him back to the office.

The Kingfisher sat at the front door in shock. His beak wide open, standing statue like except for some exasperated breathing. He didn't even seem to notice us being so up-close. 

We wrapped him in a teatowel and sat down to keep him company; SPCA on the way.

Slowly he came out of his shocked – survival mode - state.

He closed is beak, slowed his breathing and began looking around curiously. After a few more minutes he was back in action, flying straight out the door up to his common perch on the powerlines.

Redemption

The Frontend Kingfisher lives another day!

Kudos goes to Simon for making the effort to save this beautiful bird.

Responsive web - a light post

by James Ing on Tuesday, June 26, 2012

Is responsive web the way to move forward?

Hi everyone, today's post is just going to be some thinking I've been doing around responsive web.

What is responsive web

To keep it simple, responsive web usually refers to a website that changes appearance and sometimes content when viewed on different devices such as a computer or a mobile phone

Smartphones are the most important device in changing our current design / UI / UX thinking. Before we simply had to decide on a layout (fixed versus liquid) and correct cross browser issues, we are now in a situation where we have multiple browsers and screen sizes.

What does this mean?

We now need to make decisions on how we present content across different devices. Before a mobile version of a website essentially just stripped out everything but a simple nav and the text. This ensured it worked across the majority of devices.

Now seeing a stripped down website on a mobile device leaves you feeling shortchanged. On the other hand, not tailoring your website to mobile devices can lead to awkward viewing window where the browser is trying to cram everything into that little space.

What's the answer?

I don't think there is a clear answer right now. Creating a responsive website isn't too difficult but it can mean adding to design and build times on already tight budgets. It can also mean having to rethink copy and whether or not you decided to edit content to suit different devices.

What approach should you take between the stripped down version and not doing anything at all? I would take the nothing at all approach. The reasons being, with this approach you still give put your websites best foot forward, and inbuilt phone browsers allow to you zoom to a point where viewing content is easy enough.

From all this it's still a very interesting time in the responsive web space, and a great time to be an innovator in this space and lead the competition by bring some responsiveness into your current websites

Great Scott Marty What Year Is It?

by James Ing on Friday, September 09, 2011

GREAT SCOT MARTY!

The online space has a weird way of repeating itself. Unlike print, the online space hasn't got hundreds of years of history to look back on.

Instead it has a few decades, each with its own little leaps of technology that push the boundaries of what's possible. With each new leap we often find ourselves repeating the past, mistakes and all.

Early websites were designed for a standard monitor size of 640px by 480px. This was the total screen space- we still had to subtract the size for the top toolbar and footer, leading to an even smaller viewable space. Over time monitors have become larger and with it we've seen an increase in usuable screen space.

Generally we design websites for the initial content to fit within a standardized view port of 960px x 600px (-ish). This vertical height represents the 'fold'. The 'fold' is an old term taken from newspapers, referring to the point where the paper was folded in half. Content above the fold is instantly viewable so would be used for the more important information.

Designers initially avoided putting content below the fold as the user often avoided scrolling. The alternative was to make separate pages, so an article may have been broken up into 4 short pages all appearing above the fold. Over time users learned to love scrolling (you probably don't even notice the sound your mouse wheel makes anymore). This change resulted in webpages becoming longer without the worry about content not being seen below the infamous fold.

Flashy animations and cool effects have always gone hand in hand in web. I myself have been guilty of indulging over the years (including my old Geocities website with twinkling, animated gifs). Flash then took over as the 'go to' program for creating animations and 'cool' effects. This lead to the abuse of effects and transitions. We ended up with full flash websites that were incredibly bulky and hard to update. Flash has largely been replaced with JavaScript libraries like JQuery which help smooth out the regular issues of JavaScript inconsistencies across browsers.

So what do all of this have in common with today's topic?

"With each new leap we often find ourselves repeating the past, mistakes and all."
- James, this very same article.

In the mobile space we've often been limited to much smaller screen sizes. We've had to design pages with tiny dimensions, within a tightly confined space. You end up with lots of little pages with very little content. With the rise of smartphones we now have the chance to design in spaces not too dissimilar to regular websites. Mobile websites are once again trimming down pages and spreading content too thinly. Often it is due to constraints in technology (cost of mobile data, etc), but in my opinion sites should give users the option between a mobile and a regular version. This way it gives the user the power to choose between the full or diluted experience based on their situation.

Smartphones have also given rise to the application marketplace. These apps can range from the light hearted 'band name generator' to more complex apps designed to help people maintain a healthy lifestyle. Apps allow developers to create more complex interactions and animations than mobile websites often can permit. This unfortunately has lead to some developers abusing this system once again.

A few online magazine apps appeared on the release of the Apple iPad that meant that users could subscribe to and download online magazines full of great interactive material, videos and images. This led to extremely large, clumsy apps that looked great. But it also meant these apps have inherited all the problems of old flash websites- large downloads before users can see content, flashy interfaces which make it difficult for users to navigate and have made it hard for developers to update and maintain.

New technologies allow us to push the boundaries of what is possible, often allowing us to refine past ideas. Just remember some old ideas are better left in the past.

J

Go the AB's

iPhone application design and the righteous retina display

by Kelly Milligan on Friday, August 19, 2011

iPhone application design and the righteous retina display

App design is pretty new ground for us at Frontend, but damn we're loving it! Here's a few tips and useful resources we've picked up so far.

Application design is huge right now. Whether you're designing for the relatively mature iPhone market, slightly greener Android market, or adolescent tablet market theres a lot of fun to be had!

Our experience at Frontend with apps has been an exciting and challenging one. Web is our bread and butter, but those web things we're so good at don't necessarily translate to a good user experience on-device. The first place to start is here: the iPhone Human Interface Guidelines. There is a lot of usability material in here that comes in so handy at all stages of app design. When you are squeezing so much into such a small area, usability and user interaction define the line between a frustrating user experience and a brilliant one. These User Experience guidelines are especially valuable.

The iPhone's retina display displays a whopping 640 x 960 pixels. Thats wider than this blog column, but on a 3.5" screen. This really opens up a new level of detail for designers. every pixel difference you make may seem small, but combined they form such a sharp and polished interface you just can't get on a computer screen (yet...). Consider a texture that is usually too fine to be seen on a phone screen, this is a perfect example of there you can really push these tiny details to your hearts desire.

Tip 1 - Use Adobe Photoshop! We are big fans of Adobe Creative Suite here at Frontend. Illustrator is an invaluable tool, but when you want to form a pixel perfect, easily dissectible group of graphics without vector output being required - photoshop comes out on top.
- Apply all your styling through the styles panels, you will change things over and over again to get it exactly how you want it. Even colour objects using the 'color overlay' style. It will save you tons of time!
- Keep your layer structure organized! If you don't already, make the effort.
- Set up a nice boiler plate which you can iterate to add new views to your application design
- Save a selection of 640x960 pixels at the perfect place for screenshots (read below)!

Download the Retina Display version of this iphone mockup template

Tip 2 - Use the excellent resources available to you - There are excellent resources available for designing on the iPhone. A prime example is the Teehan + Lax interface sheet. This contains a bunch of vector based standard iPhone elements for you to use during mock-up phases! This file provides you with actual size elements you can drop into your own file and rapidly prototype with. Just keep in mind that its only for Mock up purposes.

Tip 3 - Test your designs on the iPhone as plain images. It's so simple to see how your interface will look at its actual size and colour. Simply load up your 640x960 selection (mentioned earlier..) and copy a merged version of your design. Email this to yourself and opening it with your iphone. hit 'Save image' to save it. Go into your iPhone's photos section, open up the screenshot, tap on the screen to dismiss the top and bottom bars. Voila! perfect representation.

Be open to the challenge that app design brings. It brings with it bucket loads of strategy, thinking and innovation which can often be put on the backburner in web. We're looking forward to more!

That's all the tips we have time for this week folks, please tune in for a later post on app design. Any questions, comment below or flick us a message on the contact page

#happyweekend!

Kelly