Advanced HTML/CSS Week 2 – jQuery Accordion

We had a guest instructor tonight for the Advanced HTML/CSS class, Todd Larsen of Groupon who is a web developer and awesome at Javascript. He gave us an overview of both Javascript and jQuery in class. The Javascript part was a bit overwhelming, even considering the fact that I had been going through the exercises at codeacademy.com to learn it on my own and was at least a bit familiar with the stuff he was going over. I think it just takes far more time to get comfortable with it. I had no idea how to approach the exercise we did in class and I found that extremely frustrating.

He also went over a bit of jQuery. I am pretty interested in this because it seems like it’s much more approachable and even people who can’t hand-code the functionality can still find widgets and snippets of code to pretty much copy, paste, and customize. Our assignment was to create an accordion, so I came up with this very basic one using the widget on the jQuery site. Since the project I’m focusing on throughout the quarter is about cooking/food, I decided to do an accordion showing the ingredients lists for a few recipes. I didn’t spend very long styling it, but I was happy with what I came up with in a pretty short amount of time: http://miniaturemotion.com/jQueryAccordion2.html

Field Observation Part 2

We continued our field observation today and decided to try out Whole Foods instead of Jewel. We wanted to see the shopping trends in a higher-end grocery store compared to the small, local grocery store that we visited yesterday. There were observations similar to what we saw yesterday, including:

Customer Type: There were more women shopping than men, and mostly solo shoppers. Many of the women were shopping in workout clothes, and we wondered if they came from the gym across the street. There were still not very many list shoppers, and there were far fewer couples shopping.

Shopping Habits: People still seemed to make produce the focus of their visit. Overall the pace seemed much quicker there and people seemed deliberate about what they were looking for. Most people were shopping with the small carts rather than the larger carts and baskets, but even those were not completely full.

Intercepting: We also went to the square in our neighborhood where people will frequently hang out, grab some ice cream, and sit on the benches. A lot of parents come there and let their kids run around. We talked to 4 couples and 1 woman. We were surprised that they all said they enjoy grocery shopping and that they all cook at home at least 3-4 nights per week. Half of them were content with the amount that they cook at home. The others were open to 1 or 2 new recipes per week. Most of them felt like they had access to recipes and good quality food, and that they had a decent quantity of go-to recipes that they make frequently. Every once in a while they say they find a new recipe and are happy with that level of experimentation. They uniformly felt that delivery wasn’t worth an extra cost, however they were interested in the idea when we explained what we wanted to do. As far as time constraints, most people said the average time spent preparing a meal on a weeknight is 30-40 minutes, and they prefer recipes with common ingredients and simple directions. One thing we want to explore is whether single people cook as much as couples. The woman we talked to today said that she does in fact cook 4-5 nights per week, and that was surprising. We also found that all but one person said they shop at multiple stores for all of their groceries, almost like a regular rotation of stores where some are more for produce and some are more for bulk purchases.

All in all this was a useful exercise and reminds us not to assume too much and get hooked on one idea. We may find in the data that a different approach/solution will be necessary.

Getting Out of the Building

One of the key aspects of both the Lean Startup Challenge and my UX class is getting out of the building. When creating a new product or service, it’s important to get to know your audience/customer segment, and it’s not enough to just assume you know the customers because they’re like you. For the Lean Startup Challenge, getting out of the building mostly means doing customer interviews. Not just grabbing people on the street and asking them questions, but actually using your network to find people who you know are already part of your customer segment and scheduling time to interview them. For my UX class, getting out of the building can also be field observation.

So with that in mind, Phil and I went to a small grocery store in our neighborhood at 2pm today (Saturday) to see how people shop for food. We made the following observations:

Customer type: We noticed that around 70% were solo shoppers, more women than men. Women outnumbered men around 2 to 1. Of the couples who shopped, they seemed to shop collaboratively and consulted each other on the items they purchased. The majority seemed to be between the ages of 30 and 40. Most of the older shoppers were women. There were not many shoppers with children; we only saw one or two children and they were young in age.

Shopping habits: We thought we’d see many people shopping from lists, when in fact, only around 10% were using a grocery list. Since the store is small, around 75% of shoppers were using a basket rather than a cart. Neither the baskets nor the carts were typically full. People seemed to spend the most time in the produce section, and they would typically spend about a minute deliberating on an item. They would look at and consider that item, but also scan around it before making their decisions. Not many people were shopping in the ethnic foods aisle, however there were a number of shoppers with an unusual combination of items; one lady had a plastic produce bag completely full of limes. Another man had very little in his cart, and the majority of it consisted of different types of meat and many bottles of vitamin water. Another guy was carrying one item along with an armload of lemons. It made me wonder what their diets were like or what they were planning on cooking.

We feel that most people use this store as a means of replenishing perishable items like produce and eggs on a more frequent basis. The overall pace in the store seemed relaxed, no one seemed to be rushing, and we estimate that people probably spend around 30 minutes in the store. Tomorrow we’re going to go to Jewel to see how it compares. Since Jewel is a much bigger grocery store, we expect to see some different patterns.

First Week of Code Academy

Classes have finally begun and I’ve gotten a taste of what I hope to learn in both UX and Advanced HTML/CSS.

We did a sketching exercise in UX that I thought was interesting. Carolyn had a good way of describing the act of sketching as the shortest distance for an idea to take tangible form, to be visually expressed. She had us come up with 3 different sketches to illustrate how we would redesign airport security. While knowing that the sketches could be quite rough, I still found it difficult; sketching has never been a skill of mine, even having studied fine art in school. I am much more meticulous when drawing, and I never feel that a sketch is close enough to what I’m imagining to be a good starting point.

She also taught us about heuristic analysis, and I found this very useful. As coders, designers and overall critical thinkers, we are always evaluating websites and experiences for design and ease of usability. However, the heuristic guidelines we learned can actually provide some structure and reasoning behind our reactions. I can see how these exercises will increase our ability to make informed assessments of the sites that we see.

The HTML class was all about semantics this week. It is not the sexiest and most exciting of topics (to me, honestly) however I fully appreciate how important it is. I was even talking to someone outside of Code Academy about this today, a developer friend of mine who works for a Swedish web agency here in Chicago called Nansen. He was saying that as a developer who works with a lot of different CMS options, it is so helpful when the front-end developers that he collaborates with actually understand how to properly mark up their code. Not to mention the impact on accessibility, which our instructor stressed to us. Our homework for this week is to mark up either a resume or an About Me page, and I’m guessing it’s not going to be so easy. I was surprised that I hadn’t even heard of many of the elements we discussed. Some of them are new to HTML5, but quite a few of them were not. Also, he introduced us to microformats and microdata, which I’d never heard of. I’m up for the challenge, though.

Kickoff for Chicago Lean Startup Challenge

My husband and I have been working on a business idea and, on a whim, decided to apply to the Chicago Lean Startup Challenge. We were thrilled to have made it into the first round. There was a kickoff event on Saturday, and the months ahead have really started to take shape.

During the next few days, we’ll work on creating our business model, or Canvas. To do that, we’ll look at things like our customer segments, market size, and our core values. Creating our canvas will help to form hypotheses about our business that we will validate via customer interviews out in the field. We’ll aim to do 10-15 interviews per week over the next few months, which will help us in knowing if we are reaching the right customer segments and if our business is solving a big enough problem in their lives. If not, then maybe our business is not a worthwhile venture. That may be a disappointing realization to come to, however in that case we can either change our approach or save ourselves from spending a lot of time pursuing something that will never work out.

Regardless of where we end up in a few months, I know that we will both learn a lot about starting a business and will say that the effort was worth it. Ultimately, the timing is fortuitous for me since I am doing Code Academy at the same time. I plan to apply the skills I learn in my UX and Advanced HTML/CSS classes to the creation of our MVP (minimum viable product). Surely we will come out with a better prototype than we would otherwise.

Excited for Code Academy Summer 2012

Last week was the kickoff for my summer quarter of Code Academy. I’ll be taking UX and Advanced HTML/CSS. The decision to take these classes was really not a hard one to make at all. I’m a self-taught web designer and I’ve been tinkering around for 10 years. Though I’ve been animating professionally for 5 years, I’ve always come back to web design and coding in my spare time. I found myself spending more time reading coding tips and digging through PHP trying to make WordPress do what I want it to do rather than doing animation. I kept telling myself that I’m tired of using WordPress as a crutch. I’m ready to be able to fully code my own sites and to fully control the look and feel.

I recently attended Code Academy spring quarter’s Demo Day, where the teams presented the apps that they worked on during the quarter in front of 200 people. Not knowing what to expect, I was completely impressed that so many teams had created apps that had already shipped. In 2-3 months! And considering that many of the students would probably consider themselves to be beginners! Based on what I saw at Demo Day, I have no doubt that Code Academy is probably going to change my life.

Maine Vacation Gift Box

Phil and his brother are planning a family trip for his mother’s birthday to Acadia National Park in Maine. I wanted to make something that they could give her so that she has an idea of what they’re planning and to get her excited for the trip. I decided to make a little box that looks like wood to go along with the National Park and forest theme. The inside of the box is covered with 2 maps, one of Mount Desert Island and the park, the other shows their journey from the Philadelphia area up to Maine. Then I made a series of 6 envelopes connected in an accordion style to go inside of the box. The envelopes unfold to reveal pictures and information relevant to the trip activities. I was pretty pleased with how it turned out, and I know that Phil’s mother really enjoyed it. Here are a few photos of how it turned out:

Chicagobeermap.com Update in Progress!

Recently, I started to feel that the website for the Chicago Beer Map could use some work. The biggest problem is insufficient space for adding new features that we’ve been discussing for the site. So, I am currently working on a sleeker layout that we hope will connect us with people who have seen the map and the beer community in general. It’ll feature our new twitter page and also an updated (finally) Facebook page. Stay tuned for more!

Additions to My Web Toolkit

Over the last few months, it’s become very clear how much I love making websites. I am by no means an experienced web designer, and it’s very much trial and error as I put sites together, but I truly enjoy the process of solving the problems that arise when translating the need for certain content to a design and then to code. I’ve also started to realize just how many tools are out there to help me along. I’v recently researched both Joomla! and jQuery, and I’ve just completed my second Lynda.com course: Joomla! 1.5 Essential Training. It seems very similar to WordPress in a lot of ways and I’m not too concerned about the learning curve with that, but I do find jQuery to be significantly more intimidating. A lot of websites I see these days, though, have slick but simple effects such as drop-down menus that expand in a nice sliding fashion and jQuery seems to be a great way to accomplish these types of things. If I can have even just a few of these tricks in my back pocket, the learning curve would be well worth it.

Miniature Motion on Twitter

Just a quick update to share my new Twitter account. I’ll be integrating it more with my site in the days to come, but feel free to hook up with me there!