Dec 02
1

Easing change for users

By | Uncategorized | No Comments

In the past few years I have had the opportunity to work on some very cool projects. In some cases I would be hired to design and code the frontend of a brand new digital product, let’s say a new website for a startup company. For these projects, there are no existing users that are used to seeing a certain button or menu in a specific place. The main goal of these sites is to build up a user base, and get the word out about the given product or service to generate leads and sales. These projects are fun, fast, and allow me to grow as a designer and developer since there is no “legacy” of user experience or user expectations.

Then there are opportunities that come with more, shall we say, maturity. These are websites or apps that were built some time ago, already have an established and loyal user base, customer service personnel trained to use and troubleshoot that system, analytic tools for management, hooks into accounting software, etc. etc. These digital products may or may not be “the prettiest” little shining gem of UI design, but they often have one thing both going for and against them.

User Expectations

If you were to survey websites built in the last year, and compare them to sites built in, I dunno… 2006 – of course you would find some obvious visual differences. Differences in technical tools, style trends, and environmental factors all have contributed to the differences you would see in typical websites designed between these two times. In addition to what’s under the hood, the expectations of the driver behind the wheel has changed dramatically as well. We now expect websites to load fast, be easy and intuitive to navigate, format automatically to a widening array of screen sizes, and give feedback on our actions while visiting. User expectations for quality digital experiences has never been higher. We have come a long way, baby – and we haven’t even left the driveway yet.

The question is this: how do you meet or exceed user expectations in an environment of increasing change?

Evernote soft-release: “try it in beta”

Evernote impressed me with a recent soft-release of an updated web experience.

Evernote soft-release: try it in beta

 

Aug 22
1
South Nation UX / UI Design

South Nation Conservation UX/UI Design

By | Web Design | No Comments

It’s a privilage to work with an organization whose mandate is to protect the environment, and engage with communities. I was honoured to help the South Nation Conservation, with a 4,200 square kilometer area of oversight, to modernize the user experience and user interface design (UX/UI) of their website and contribute to their mission of protecting and improving water resources.

South Nation Conservation (SNC) is a group of scientists, educators, and citizens with a rich history and vital role in maintaining the environment. Over the years, this institution has published hundreds of pages of amazing content. But as their site grew, so did the need for a better approach and easier navigation. I worked with the project team to rigorously classify their content and establish links between the many environmental needs of the community and their organization. An important aim of this effort was to empower SNC to self-publish their captivating material in a more comprehensive and efficient way.

UX/UI Design

SNC Wireframes UX / UIAs the lead UX/UI designer I began by asking questions to better understand activity on the existing site and how that could inform the redesign. The clients responses were translated into wireframes to fully visualize (and help communicate to SNC) how a more intuitive site layout would work. By keeping a consistent page hierarchy and adding breadcrumbs to the site, users are always be able to see where they are in the site, where they can navigate from here, and what other related pages are available. Main sections of the site are colour-coded in the navigation, a subtle detail in the overall UX/UI solution that greatly increased the usability of the site for users.

Aug 22
0
Customs and Immigration Union Web Design

Customs and Immigration Union Website Design

By | Web Design | No Comments

Customs and Immigration Union (CIU) nationally represents Canada’s customs and immigration officers of the Canada Border Services Agency (CBSA). They needed a website that could display content effectively on all devices from computer screens to mobile phones and tablets. They also wanted to keep their own branded look and feel with a clean, modern design which invites communication between the CIU organization and its members.

Website Design

The site was designed and tested at multiple breakpoints, from the iPad to Android devices to the iPhone. CIU’s full colour bilingual logo is prominent on each page. The colors are consistent with the CIU website and brand. A secondary colour palette that compliments the logo colours was created to aid in user navigation and content categorization. The end result is a consistent look and feel, with a layout that allows users to communicate intuitively and easily.

User Experience Design

CIU’s website goals were prioritized for the core visitors to the site. Special attention was paid to members of the union, members of the media, and staff. The experience was designed to bring attention to important issues and encourage visitors to take action. Wireframes were created to communicate ideas and work towards the best solution with the main stakeholders. The pre-existing content was audited and a content strategy was proposed. The new content strategy focus the content on the core business issues of CIU. The site accomodates content in both English and French, with a link on every page to switch languages when available.

Oct 31
0
Jetpack

From WordPress to Facebook and Twitter… Automattically!

By | Uncategorized | No Comments

Recently a client who has WordPress site asked me about automatically publishing a new article to their facebook and twitter account. Like many feature requests clients ask me for WordPress, my first thought was “there must be a way to do this already.” Sure enough, Automattic – the company behind WordPress itself has a app plugin for that.

What you will need:

  • The ability to install plugins on your wordpress blog, usually with an admin account
  • The Jetpack plugin
  • A wordpress.com account
  • An account with the social media channels you want to share on (facebook, twitter, and/or linkedin)

Step by step: Publicize for Jetpack

Jetpack screenshot

Step 1

After a quick install of Publicize, you will see a slew of options that leverage wordpress.com – the hosted version of wordpress. In my case I host my own wordpress site, so connecting my site to wordpress.com was the first step. No worries, a big orange button led the way and luckily I was able to remember a login and password (for once). If this is done right, you should see a brand new car “Sharing” option in your blog Settings menu.

Step 2

Step two requires connecting your facebook and twitter accounts to the new sharing section – easily done by entering in your username and password for these services. I also connected my LinkedIn account for good measure.

Step 3

Once this is done, the third step is to try publishing a post and HEY!… wait what’s that? There’s now a publicize option in the top right corner. Nifty. Well played Automattic.

Get more information on using Publicize for Jetpack here at http://jetpack.me/support/publicize/#using-publicize

Aug 16
0

Amazing camera captures photons, sees around corners

By | Uncategorized | No Comments

I was watching a Ted Talk with my roommate Mark last night that blew my mind. A group at MIT have built a prototype camera that can capture 1-billionth of a second in time. 1,000,000,000,000. That’s faster than a milli-second, heck it’s faster than a nano-second! Using a lazer pointer they fire a “bullet” of light and are able to watch it move in slow motion. This is demonstrated in the video below where a lazer-bullet is fired through a coke bottle and waves of reflected and refracted light are caught by the camera.

Seeing around corners could be the next super-hero power. By using this technology, the team at MIT was able to measure the time it takes for reflected light to bounce back to the camera and reconstruct a model hidden around a corner in their test setup. This is truly revolutionary. The name of this new way of seeing? Femto-photography.

Aug 01
0
Good files on the left, bad files on the right

Better Layer Comps in Photoshop

By | Uncategorized | No Comments

Hey there graphic designer. Do you ever use Photoshop’s “Layer Comps to Files” feature? If so you may find it annoying that it automatically adds numbers before your filename — not a big deal for 10 files but for those cases where you’re batch creating a large number of files it’s tedious to have to rename each one. Want to save yourself the hassle? Luckily there’s a fix that removes the file numbering, and all you need is a text editor.

Here’s what to do:

  1. Browse your hard drive for “Layer Comps To Files.jsx” — it should be in your Adobe/Presets folder. For me running CS5 on a Mac it was located here: /Applications/Adobe Photoshop CS5/Presets/Scripts/
  2. Open the file “Layer Comps To Files.jsx” in a text editor (I used Text Edit). Unless you understand java code it probably won’t make much sense. Don’t panic.
  3. Scroll down until you find the following block of code:

    var fileNameBody = exportInfo.fileNamePrefix;
    fileNameBody += "_" + zeroSuppress(compsIndex, 4);
    fileNameBody += "_" + compRef.name;
    if (null != compRef.comment) fileNameBody += "_" + compRef.comment;
    fileNameBody = fileNameBody.replace(/[:\/\\*\?\"\<\>\|\\\r\\\n]/g, "_"); // '/\:*?"<>|\r\n' -> '_'
    if (fileNameBody.length > 120) fileNameBody = fileNameBody.substring(0,120);

  4. Replace it with this block instead:

    var fileNameBody = exportInfo.fileNamePrefix;
    fileNameBody += "_" + compRef.name;
    if (null != compRef.comment) fileNameBody += "_" + compRef.comment;
    fileNameBody = fileNameBody.replace(/[:\/\\*\?\"\<\>\|\\\r\\\n]/g, "_"); // '/\:*?"<>|\r\n' -> '_'
    if (fileNameBody.length > 120) fileNameBody = fileNameBody.substring(0,120);

  5. Save the file and be careful to keep the “.jsx” extension.
  6. Restart Photoshop and try out your new and improved Layer Comps to Files!
Jul 26
0
IMG_5338

Photography

By | Photography, Portfolio | No Comments
Free consultation for new clients Get Started