Adding web fonts to Axure Team projects

Spider Web

I recently started using the Flat UI Kit by Marc-Oliver, and really helps build good looking prototypes quickly. I needed to add a couple supporting fonts to a new install of Axure to have the icons and text render correctly, and since I am working with a new team I wanted to get this setup up correctly. There are a few different methods for using web-fonts when you publish a local file, but I wanted to set something on the Team Projects I am hosting on Axshare.

There are a couple of steps to this, but it should only take 5 minutes.

Step One: Gather the URL of the web font

Select a font and then find the URL for your particular web font.

Dialog Screen after you have added a web font to your cart

This is the google set-up, but most services will be very similar

What we want is this little snippet:

<link href=”https://fonts.googleapis.com/css?family=Roboto” rel=”stylesheet”>

Copy that to your clipboard.

Step Two(ish): Create a Plugin on Axshare

Login to your Axshare account via the web (no idea if this is possible via the app). Find the project you want to add the font to, and select the Plugins link from the configure gear thingy.

Dialog box to navigate to the plugin section on Axshare

On the Plugin screen click on + Add Plugin and then paste the snippet that included the web font URL content section. You can name your plugin whatever you want, but I find the font name is the easiest.

Screen for Creating custom plugin for web font on axshare

Then hit Save.

Add the plugin to all the pages AND all new pages by default if you want to use it for all page (not a lot of reason not to as far as I can tell).

Add the plugin to all existing and new pages

Then hit Save.

That is it. You now should see your shiny new plugin displayed on the plugin page for this project.

Updated Plugin table on Axshare team project

Next time you generate a new prototype with a fresh Team Check-In you will now have the markup to include this snippet on all your pages.

Note: You will have to do this for each team project you are adding the font to. I haven’t found a way to set this up as a larger account/group level rule.

Any questions or comments directed to @atimefordesign, please.

How to set up a google calendar for your class

For a student to thrive they need the parents and the teachers working in unison. The single best tool to do this is a shared calendar. 15 minutes of setup and I assure you the kids will turn in more of their work on time and the parents will be forever grateful for making it so simple to be an active part of their child’s education.

Most of my children have been using the google platform so these instructions will be centered around that. If you are on another platform just search/ask around for help setting up a “shared calendar.” The screens will be different, but the process will be very similar.

Google Calendar?

If you have not used the calendar feature offered by goole before I am not surprised. The current version hides it away a little bit. If you know where to find it, it is not much of a Waldo. Navigate to your email screen and click on the grid of squares in the upper right hand corner.

Screen shot of the gmail interface with the pop-over that contains the google calendar icon

Click on the grid of squares in the upper right hand corner of google mail on the web and you can click on the calendar to access the calendar tool.

Once you are there you can create your first shared calendar. There is small button along the left hand column that will give you access to the first step in creating your calendar.

Screen shot and step by step instructions for the first step of creating a google calendar

Step one of creating a shared google calendar

The next screen is where you will set up all of the attributes of the calendar.

Attribute screen for creating a shared google calendar

Attribute screen for creating a shared google calendar

Calendar Name: This is what will show up as the calendar name. People will be able to hide and show your calendar in whatever application they use (outlook, iCalendar, etc.). Name it something they can easily understand: “7th Grade Math” “Mrs. Smith’s 1st Grade” You do not need to add the word “calendar” They will be viewing this in their calendar and the extra word will get cut off.

Organization: This will likely show up as your school name. I use google apps for my family which is why you see my name in this screen shot.

Description: This is where you can talk about your class in general. It is also a good place to put your contact info so that parents will have it right at hand should they have a question about any events or assignments they see in your shared calendar.

Location: This is not super important, just put tour school name here.

Calendar Time Zone: This should be correct by default. Just make sure that it has the correct country and timezone.

Share this calendar with others: This box should be checked so that others are able to access the calendar information you are sharing with your class.

Make this calendar public: I would suggest that you make this public. Making it public allows parents to share the calendar with others. If you are concerned about it for any reason you can leave it unchecked and add each parent to the calendar manually.

Share your class events with ease!

Screenshot of the shared calendar settings in google calendar

This is where you will add all of your parents/students to the calendar. They will all receive and email with a link that will add the calendar to whatever calendar application they prefer to use.

Person: add in the email address of the person you would like to add

Permission settings: Make sure this is set to see all event details. This will let them see the notes and attachments that you include in your calendar events. DO NOT select any of the other options. You do not want students or parents to be able to change events or add them. The default setting is what you should select here.

Add Person: Once you click “Add Person” they will be added to the list. You can quickly copy & paste each of the names from your current email list in here. If you paste in the entire list in the small box and hit “Add Person” it will automatically pick out each individual email. You can add your entire class in about 5 seconds.

Create Calendar: Click this once everything is filled in. You can always come back and change anything on this screen.

If you have made the calendar public there is a warning that it is really public. Click yes to proceed.

For students or parents that are not using google calendar you can send them a link that works for almost any calendar application.

Add non gmail email accounts to google calendar

Add non gmail email accounts to google calendar

Click “Invite” and you are all done creating your shared calendar!

I will write up a quick page for creating a shared event next.

Happy teaching!

 

Are my deliverables really delivering?

Tow icons of people. One is talking and the other has a question mark in it's though bubble.

Comcmuicantion Breakdown

Everything comes down to communication. Arguments between two of my sons, presenting a sitemap to a client. These interactions are a struggle to reach some level of shared understanding.

When a large project begins out there is a project plan, a list of deliverables and a general sense for how things should progress. The challenges arise when you dig into a project and things are not turning out to match your estimates. This can happen because the sales team sold a solution before there was unity on the problem, the client stakeholders you interviewed weren’t the right ones and didn’t give your the business and technical foundation you needed, it could be any number of things. The real issue is that things are skidding off the rails and you need to do something.

AUDIT TIME!

I hesitate to use the “A” word so close to tax day, but in this case it is a good thing. I have had good fortune when I take a step back and conduct a hard-core detailed audit of what the problem is. The output of this exercise isn’t anything that will fit into a nice project plan checklist, but is really a unique representation of the problem as the UX team understands it. This artifact is meant to act like a low-fi wireframe and It should be a physical representation of the problem/system and act as a foundation for very specific discussions. UX teams love to write on a whiteboard, not because they love to be in the background of design articles, but because once the idea is drawn everyone has to agree on it, or at least talk about what it should be.

Nice idea…got an example?

My challenge was walking into a large commerce relaunch for a national retailer mid steam. There were about 5 teams working on unique sections (split shipping, free shipping at X dollars, saved payment, etc.) Everybody kept bumping into each other when things tried to plug together and everybody was getting frustrated and we kept uncovering new technical constraints as we went along. In an effort to have the UI level thinking and the backend system team stay on the same page I mashed together a process flow and low res sketches into a single document and took advantage of a large format printer to tape a 4’x4’ version on the wall. The team used this to clearly see gaps in the flow, or gaps in collective understanding. It was also valuable to clarify business rules and was a valuable living document as the project moving forward. I brought in the UI elements because it helped provide context for stockholders that only saw the site as web pages, and the data logic helped the dev team to understand what we were trying to do. It was like a Babelfish for business units.
Central communication document to keep people talking about the same things with the same words

Central communication document to keep people talking about the same things with the same words

I was lucky enough to have enough time and help from various team members to be able to put this document together, but it was a real turning point in our team communication, and isn’t that what it is all about?

design for life

The products that take design seriously and incorporate it from the start are going to be the ones that connect with people in a way that really makes an impact in the world.

An Important Time for Design

The cost of technology continues to plummet and this causes it to creep into our everyday lives more and more. It wouldn’t have made sense to carry a Cray super computer around in your pocket, but now that we do it needs to look good and work well. Just building something to great specs isn’t going to cut the mustard any longer, certainly not in a retail environment. Places like the Designer Fund are pinpointing designers to start businesses. Best to have a design centric ethos baked in from the beginning rather then adding it in once it is too late.

The famous target prescription bottle shows how smart design can improves life in a very day to day manner, and the NEST thermostat mashes up great UI design and smart internals. Good design is an a steady march into our lives not as a fashionable add-on, but a fully integrated part of our daily lives.

There is a massive opportunity for design and technology to make the difference in this $100 billion+ home health market. That’s not to say that the health care industry does not already have excellent designers and technologists in the ranks. However, there is a big opportunity to shift what those talented people are able to focus on.

The Biggest Opportunity For Disruption Today: Health Care Products That Work

WiiFit can get you off the couch and move around, but what about taking your blood pressure medicine, or checking your glucose levels religiously? What about helping to track your REAL caloric intake? I think that good design can help make the word a better place and your fat butt is a great place to start. Full body wellness is a lofty goal that design can make a priority at a consumer level.

Cloud & Ground: Get your UX files under control

Cloud and Ground information flow

There are tons of tools that manage communication for design projects (Basecamp, Wrike, etc.). Developers have Github and such and even the visual designers have Layervault. The multifaceted nature of UX work doesn’t really lend itself to a clean singular solution. Stakeholder interviews have Evernote audio files and notes, wireframes could be in Omnigraffle, Balsimiq or Indesign. Prototypes could be a local Axure file, or shared via something like Beanstalk. This doesn’t even touch on shared google docs for competitive analysis and general collaboration. Just to add to the mayhem we can add in some loose .png images of whiteboard sessions.

ARGH!! SO MUCH INFORMATION!!

First and foremost this is a management issue. Somebody needs to have a strong voice to wrangle all of this things and have the will to implement a solution. Our assumption is that there is leadership with the will and commitment to address the issue, the question is how to bring all of these things together?

Using a service called CloudHQ I am able to provide a system that gives designers the freedom to continue along as they want to work but the backend and sync advantages that turn a messy on-boarding and archive process into an elegant samba of seamless productivity. Gone is the “Where is that file?” and their ilk…designers are unleashed to focus on solving the client’s problems and no longer are bumped out of the “zone” because they have all the project information right at their fingertips.

If you are interested in the more detailed information flow you can check out this PDF (43k).

Looking to improve your design life for $500?

Site-maps and process flows become a zoom and pan & dance very quickly. You can kill a few trees and print it out if you have access to a large format printer, but that is terribly inefficient for quick iteration.

What do you do when you want to move from the drawing board to the screen, but want to see the whole system at once?

At our office, we just equipped all of the programmers’ workstations with Seiki 39″ 4K televisions as monitors. At $500 a piece, you should be doing the same. For the time being, there is no single higher-productivity display for a programmer.

4k is for programmers by Brian Hauer

At $500 those things will pay for themselves in a matter of weeks. Right now they are available via Sears and Amazon.

Do you see what I see?

The contextual inquiry/user interviews were really for gathering a clear view of the production process. I was able to build a solid foundation for what this application needed to do, but more than that I was able to see how they are currently successful. Every one of Tom’s team was incredibly passionate about their work and they used their years of experience to make decisions on the fly in the constantly shifting demands of a commercial kitchen. This application needs to track all of the custom order nuances, while still giving  the prep cooks some amount of autonomy. If this tool turned their job into a paint by numbers exercise it would be a failure.

*rubs hands together*

Preliminary Data Structure Document

Mapping out all of the input collected helps me to get my hands around the building blocks of the project, and provides a great talking point for discussions with the developer. I will walk through this map with Tom to verify that we both see the general process in the same way and to make sure that I didn’t miss any major input points. I will take his feedback and the developer and use that to build a feature list.

SOLUTIONEERING!

Let’s get our prep on

Since we had verified that this as a valid and potentially successful project for all parties, it was time to begin the discovery process. I had previously helped Tom set up his Shopify site, so I was familiar with his product line-up.

White Oak Fresh 2 U Product description:

  • 8 distinct menus consisting of 7-8 items each
  • Each menu based around a culinary theme and his extensive recipe library
  • Each menu is influenced by ingredients that are local and in season

What I was missing how it actually all came together and ended up in his clients’ kitchens. Who did what, and how did they do it?

Step one: Get over to his kitchen on a production day and see how the sausage was made (no sausage was on the menu today).

We found a day that worked for everybody and his staff all took a few minutes out of their busy afternoon to walk me through:

  • What they do
  • How they do it
  • What works well about the current method
  • What they wished worked better

Original White Oak Order Fulfillment Sheet

The wish list was relatively short, because nobody wanted to be seen as just complaining. They are a tight-knit group and have worked their collective asses off to get to where they are. Their system might not be the most elegant, but with lots of double-checking and teamwork they manage to turn out a fantastic array of dishes every week for their grateful clients. I didn’t expect much from the wish list because they only know what they have seen. They go to bed thinking about jasmine rice and portabella mushrooms, not form label positions and order taxonomies.

In typical interview fashion, I heard expected things and unexpected things. Something I had not thought of was the mindset of the cooks working on Tom’s team. They are all highly trained and can think on the fly. Each one had created little notes to help them with each service, and most of them consulted with Tom before service to tweak and polish the menu based upon available ingredients, and the general makeup of the week’s orders. Whatever came out of this system needed to solidly augment what they were doing without taking away all of the opportunity for the personal investment they were all putting into their dishes.

Between the observation and the recorded interviews (yeah Evernote!) I have a good foundation to start mapping out all the data ingress and egress. Next, I will map that out and review with my developer to start building a base feature list. I feel like the big challenge will be keeping V1 from scope creep and dragging out the timeline.

There is just sooooo much UXing to do!

Someone in the kitchen with Dinah…

Tom in the kitchen

Tom and I met on Twitter a couple of years ago when he saw a prep table I designed and tweeted me a couple of questions about it. Our collaboration blossomed from there.. We went on to use one of the tables at a benefit auction to raise money for local agriculture and he helped me with a cooking video when I was trying to launch a new cook-at-home meal product. We have stayed in touch and trade food for IT and design help here and there. His business has transitioned from a cook-in-the-home personal chef to a gourmet meal delivery service. Working together, we were able to handle his new venture’s ecommerce and newsletter duties with Shopify and Mailchimp respectively.

This initial tech combination worked well enough to launch his business and his client list grew steadily over the next 6 months. His clients loved his food and the insanely attentive service Tom provided. When I waited tables I LOATHED the “sauce on the side” people, but Tom relished serving his clients every small culinary nuance. Just one of the many ways Tom is a much nicer person than me.

This fanatically attentive service started to create a bottleneck for Tom and his business. Processing so many orders, for so many people, with very little scalability from a dish level was becoming untenable. He had pushed Excel spreadsheets to their limit keeping a handle on all of these details, and the labeling and station ticket output was causing slow-downs in the kitchen (he had only one day a week in the commercial kitchen). He had to streamline his system without ANY compromise in service.

I kicked around some sketches on a back of a napkin and recruited my brother to work the database backend. Once we determined that there was a viable project and that we had the team to execute it, I carved out some time to go see Tom’s team in action in the kitchen with his current system.

I was giddy.