Categories
DIY Usability

Incorporating usability into DIY projects

I recently made the framework for a flower wall that Snapdragon Studio will use for weddings. Making it was fairly simple; basically I used two pieces of peg board bolted to a couple 1″×4″s (check out the bottom of the post for more details). The fun part was making sure that it was quick, easy, and obvious to put together and take apart.

 

Silvia attaches greenery to the front of the pegboards.
Back view

No tools

There are a lot of moving parts when setting up flowers for a wedding, and I didn’t want the Snapdragon folks worrying about “Crap, we forgot the socket wrench for the flower wall!” I used wingnuts to fasten the bolts, so the whole thing can easily be put together by hand.

Wingin’ it.

Labels

Ideally, the orientation of the boards wouldn’t matter—you could put either board on either side in any orientation and it would still work. Unfortunately, that wasn’t possible because boards I was working with weren’t straight. :/ So I had to ensure that the boards would be put together the right way with … LABELS!

Bottom’s up. Wait … no!

The key thing to keep in mind here was to not make all the labels too overwhelming. I started by labeling the top and bottom of the boards with text labels and arrows. Easy enough.

I marked the middle where the two pegboards meet with text and arrows. I also marked the two pieces with diagonal lines that align when the pieces are matched correctly. (I learned that trick from my dad when he helped me put in some laminate flooring.)

Thanks, Dad.
I think you can tell where this is going.

For the placement of the two boards, I didn’t use “left” and “right” because 1) that’s too much text, and 2) left and right are confusing when you can look at something from the front or the back. So, I opted to mark the two boards with two different shapes. The same symbols on the pegboard indicate the correct placement. This works great because it’s less of a cognitive load to match shapes than to read and interpret text. You can do it without thinking about it.

Yes, I accidentally put a circle on the top right instead of a triangle. :O I fixed it later.
And just in case there’s any confusion …

Requirements & Solution

Finally, if you’re interested here are all the requirements I had to meet and the solution I came up with.

Requirements

  • large enough to cover a doorway and serve as a photo backdrop for people standing in front of it.
  • small enough to fit inside an SUV.
  • easy to store when not in use.
  • made of material that allows flowers and greenery to be wired to it.
  • sturdy enough to hold up to the weight of all those flowers (which can actually get quite heavy).
  • secure enough that it won’t slide or tip over.
  • leans almost upright against a door or wall.
  • does not have ugly hardware visible from the side, such as an A-frame or a base coming out the back.

 

Additionally, I put on my UX designer hat and added some more considerations:

  • People can get pretty smashed at weddings. Taking a selfie in front of a flower wall only adds to the rambunctiousness. The wall needs to survive drunk people falling into it, hanging off of it, etc.
  • As outlined above, it should be easy, quick, and obvious to put together without tools.

    Initial sketch.

Solution

  • Size 4′×7′, cut into two 4’×3.5′ pieces. The 4’×7′ would have fit in the the SUV, but cutting it into two pieces makes it easier to store and maneuver.
  • Material Peg board allowed flowers to be easily wired through the holes.
  • Sturdiness — The peg board needed something to keep it from sagging when leaned against the wall. Plus, since we decided to cut it into two pieces, it needed something to join the two pieces together. Two cheap 1″×4″s on the back of the peg board did the trick.
  • Security — Since I couldn’t build any structure coming off the back for aesthetic reasons, I had to get creative. Two eyehooks attached to the top of the 1″×4″s allow a cord to be tied from each hook to the door—this prevents any chance of it tipping over. Rubber pads on the bottom of the 1″×4″s keep them from sliding. I had a couple other ideas to keep it from moving, which you can see in the sketch above. But the rubber pads were actually enough to hold it in place.

    Ta-da!
Categories
UI Design

UI sketching supplies

I pretty much always start on paper when sketching out new ideas (I even write code on paper sometimes). So I really nerded out when I discovered UI Stencils—they have a pixel ruler!! I love anything that brings the digital into the physical world. I splurged and bought myself a bunch of sketching supplies, with the goal of really working on my wireframing and storyboarding chops this summer.

pens, markers, and stencils for making UI sketches
The supplies I used to make my first sketch.

I’m especially happy with what they call the Everyday Carry Kit. It comes with a set of three dot-grid notebooks, a stencil, and a Zebra mechanical pencil that are all small enough to fit in my pocket (at least in the summer while I’m wearing shorts). This has been great way for me to just start sketching something whenever I have a spare moment. For my first sketch, I just started playing around with the stencil, without having a plan of what I was making. It gradually turned into one step of an account setup interface where you would start adding friends.

A pencil sketch of a UI for adding friends to your network.
The initial sketch in pencil. This just came together as I was trying out different parts of the stencil.

The stencil is awesome, although there are some issues. It is hard to align stuff correctly, because the stencil covers up the other parts of the sketch that you are trying to align to. You can see this in the poor alignment of the user icons and the plusses inside the circles. I started to get better at this by really paying attention to the dot-grid, as you can see in the check boxes.

The other purchase I’m really nerding out about is a set of gray Copic markers. They really help set off different parts of your design hierarchy, and make your paper wireframes look more professional. I LOVE the ultra-subtle ‘N0’ color, which I used for the background. I found the Copics cheaper on Amazon than on the UI Stencils site. I also used some other pens and markers to add outlines and annotations.

A finished wireframe sketch in pen and marker.
The finished sketch using gray Copics to further distinguish design elements.

I’m looking forward to devoting some serious time to developing my pen-to-paper skills and making these look even more professional. One thing I realized I need to work on is my lettering. I have okay handwriting, but I’d like to get it looking a little more uniform.

Supplies used