Internal Application WIN

For the last year I have been working for Washington State L&I on the maintenance team for one of their internal data-entry applications. I have been particularly active in creating a new version of the app for an upcoming release.

Without previous experience working in ASP.Net, I quickly trained myself up in VB.Net and began making contributions to the next version iteration within 6 weeks.

With my training in design, User Experience, and UI Development, I focused on creating ASP controls that implemented Bootstrap, in order to make it easier for the staff ASP programmers to implement code that would also be responsive.

Here is a screenshot of the framework’s upcoming version release:

Before

WIN is an older ASP app developed to run best in IE8. Here is a screenshot of the app as it appeared one year ago:

As an older app, it isn’t responsive:

Bootstrap

Bootstrap was a natural decision in this case, giving the existing developers a good basic design that would also be responsive, with a low barrier to entry:

Developer Documentation

In order to also facilitate the maintenance team, I write and update documentation that will help them use these new controls:

User Experience

I have practiced my training in UX Design by bringing in more white space, making it easier for the user to focus on one thing at a time. I would prefer for the form layout of the pages to be more linear, in order to prevent the user from being overwhelmed with so many options at once: However, the stakeholders felt that we were already making so many changes at once that it was best to stick with a close layout.

I found other ways to add UX improvements to the interface by creating new components that the Business Analysts and Developers can use in the future:

Success Messages

New success messages provide the user with knowledge of the state of the app:

Loading Spinner/Overlay

In a similar way, this Loading Spinner activates on postback events to prevent users clicking buttons repeatedly and getting frustrated:

Sticky Buttons

The button bar follows the user as they scroll down, keeping important command actions readily available while the app is in use:

Hidable Menu

Lastly, the large menu can be collapsed to allow the user to focus on the task at hand:

Technology Used

  • Front end styles managed using the LESS pre-compiler.
  • Styles and scripts heavily rely on Bootstrap as a base.
  • JavaScript extends on jQuery and handled using Require/Almond.
  • Back end managed using VB.Net and the Visual Studio IDE.

Children’s Author J Scott Savage

Working with J Scott Savage was a pleasure, and an exciting opportunity. For one, I’ve crossed palms with him a few times at various writing events. My wife is also a great fan of his books and recommends them to anyone who will listen.

Scott had the foresight to hire Seth Graham to create beautiful illustrations that convey the fantastic sense of adventure Scott depicts in his books and his mannerisms.

Seth’s Art

Feeling that the artwork needed an opportunity to be viewed without interruption, I designed a tall transparent footer to give viewers a chance to soak in the art:

 

 

Design and Layout

I cannot take credit for the art, but it was so great to design the layout, develop the responsive behavior for, and wire up a website that had such fun and inspiring artwork.

Naturally, I developed the site to be responsive to screen size:

Screenshot of tablet view
Tablet view
Screenshot of Phone View
Phone View

With a Hide-able Menu:

Screenshot of Menu at Phone Size
Menu

And with typography that is both easy-to-read, and slightly whimsical:

Alegreya and Alegreya Sans from Google Fonts

Technology Used

  • The front end was done by hand using the SASS pre-compiler.
  • The back end was a re-skinning of WordPress’s Twenty Fourteen.

Feel free to check out J Scott Savage’s live site to inspect the code yourself.

BYU-Idaho’s Responsive Prototype

During my internship at BYU-Idaho, I had the opportunity to proactively design solutions to solve usability problems for our site. Of course, implementation was another matter. This is where I learned the valuable lesson of prototypes:

Prototypes are a quick and effective way to demonstrate the possibilities to stakeholders. It shows them what we already know is possible. In a very practical way, it takes a lot of the pressure off.

I turned my focus to helping the school make it’s forward-facing web presence responsive and mobile-friendly. Here are some screenshots of the prototype:

Phone Width

 

Tablet Width

Service Map

This was a wishlist item for my boss: A map of all campus services which users could utilize to find anything and everything that campus had to offer, both on and offline. I mocked up this prototype in Angular as a proof of concept:

Analytics

Responsive wasn’t the only goal of our prototype: we also wanted to improve the effectiveness of our navigation in the header and footer. To this effect, we ran reports on the most visited pages and presented the information in an effort to persuade stakeholders to change our navigation methods.

We weren’t quite able to convince them to nix the “Letter from the President”, but we did get them to bury it in a menu somewhere rather than having it as the first link in the header.

User Experience

My reason for focusing on the Responsive Prototype was to best facilitate an improvement of the User Experience for our main audience: the students. In addition to the design and development that went into this prototype, I headed some on-campus Usability Testing – small, simple, and cheap tests that would give us qualitative data on what our users were going through. I modeled this testing on Steve Krug’s book Rocket Surgery Made Easy.

Technology

On top of my part-time experience tutoring for writing and web development, I was a mentor for student employees on the Web team at University Communications. Because I knew I would be moving on, I wanted to leave the students with tools they could easily use to pick up and maintain these projects.

For this reason, I used Bootstrap as the base for the prototype, and hosted it on Github. Since we were customizing bootstrap, we wanted to keep the LESS modules separated, and so we managed the build using Grunt.

This required our student employees to begin gaining familiarity with the command line, git workflow, and css pre-processors.

Edit 11/4/2015: If you visit BYU-Idaho’s live web page as of today, you can see quite a bit of my code is currently in use at the production level.

So You Want to Tutor? Get Them Talking.

talking-heds

This is part two of the series, “So You Want to Tutor?”

  1. Prove It
  2. Get Them Talking

Establishing rapport, in this case, isn’t about selling knives, makeup, or used cars. It’s about breaking the ice a bit, and establishing a common ground. A bit of rapport doesn’t mean finding out their favorite ice cream and their relationship status. You’re not here to be best friends, you’re here to help.

The primary aim is to get them talking and to find out what assignment they’re working on, what class it’s for, how much time they have to devote to the project before its due, what grade they’re shooting for, and other aspects that may be piling on the stress for them.

So besides getting them talking (which is very important), it’s about arming you with the bare minimum of knowledge you’ll need to actually help the student. Rather than charging into the assignment with a red pen, ready to bleed the page, find out a bit of background. This isn’t a novel, and you only have got an hour or less, so a chunk of exposition here does just fine.

Be Aware of Entitlement

As I learned during my tutor training, there are some who will come to tutoring expecting to be given the answers. Maybe this has something to do with our lecture/notetaking format in classes, but this is not your responsibility as a tutor. Your job isn’t to know and give all the answers, but to show them as a successful student how you find the answers when you need them.

Your training may go differently, but ours focused quite a bit on this – on fighting the attitude of entitlement. I believe it was valuable training, helping put up a wall to prevent you doing things you shouldn’t.

The main problem with this training is although it may be true, and it may be helpful to know that you should “teach them to fish” rather than just giving the answers, it ultimately doesn’t help to approach a student assuming that they’re just here to get test answers from you.

Some students may have an entitlement problem, sure, but it doesn’t help to assume this. This might just be a result of not knowing to expect – especially if they haven’t tutored before, or haven’t had a good one.

It’s best to keep a balance between the two perspectives. On your end, become solid in the idea that you are here to help the students learn how to be successful students, or in other words, learn how to find the answers they need. If you only have them for up to an hour, you can’t fix their grade for them – but you can give them some tools that allow them to do this for themselves. On the other end, the social side where you, as a student, are helping a fellow student – don’t get all defensive if they ask for answers, or sit back in their seat expecting you to move the session forward.

Keep Them Talking

Many if not most students will take on this passive attitude at the beginning of a session, especially if they’re not used to having you as a tutor yet. This may tempt you to talk a lot just to get the ball rolling, but refrain. In order to “teach them to fish”, we need their participation. In fact, if we were to weigh the entire session on a verbal scale, it would probably best if they were talking 90% of the time, with you only making small remarks to direct or advise. At worst, it should be 50/50. The thing to avoid is the opposite, with you talking 90% of the time and the student only speaking the other 10%. This most likely means they aren’t engaged in what’s going on, which means the session is not as effective as it could be (if not completely useless).

Reading Aloud

One of the tricks I would use when tutoring writing was to have the student read the paper out loud. I handed them a pencil (NOT a red one) and encouraged them to make notes of changes as they found things. As they read, I would never interrupt, but simply be marking awkward passages or wording with underlines or circles, just to make note of it for later. This was very important – You’re not making editing marks, showing exactly what’s wrong, but simply highlighting the areas that need attention.

Don’t interrupt. This is important so, DON’T INTERRUPT. Most students will be just a little embarrassed at reading their paper aloud, even in a private setting, so let them work through it. If they are allowed to keep fumbling through reading their paper aloud and eventually realize they aren’t being judged for anything (not the writing, not their articulation, nothing at all), they will relax. They’ll become comfortable with the situation. And best of all, they’ll be talking.

Talking leads to participation. Participation leads to engagement. Engagement leads to LEARNING…

So You Want to Tutor? Prove It.

man helping boy study

This is part one of the series, “So You Want to Tutor?”

  1. Prove It
  2. Get Them Talking

One day while making my way through the campus swarm I actually noticed one of the school billboards about the Writing Center. I suddenly decided that tutoring writing was my dream job. It was this kind of far-off dream, something I could attain only if I became a Rock Star among English majors. I was confident I could do the job (to some extent), but not that I could get the job.

I can’t tell you exactly why this happened. I think I had some kind of weird vision in mind, probably involving collie dogs, coffee shops, and turtleneck sweaters. I put it on this pedestal in my mind, something that I wanted but would probably never happen. I set the dream aside, and decided to try for good grades instead.

I took advantage of some class extra credit by taking a research paper to the Writing Center for feedback. It was awful. The tutor I saw really didn’t seem to want to be there, or have any interest in helping me. They were completely wrapped up in the task of pointing out flaws and problems, which was kind of helpful, but their attitude surely wasn’t.

I was annoyed, but didn’t think too much of this experience. I chalked it up to my being a “difficult person”. The next week, however, I heard more horror stories. Students were leaving the Writing Center with nothing but frustration and anger. Some had left in tears.

This isn’t natural. Sure, it can be hard to receive critique, but that wasn’t the issue. The real issue here is that the Writing Center had somehow employed people who didn’t WANT to be helping students improve their writing. Naturally, since they didn’t want to help, they really didn’t.

No matter how difficult a person I can be, I would make a much better tutor than some of those currently working there. I was filled with anger. Not the kind that starts fights, but the kind that fuels the fire and gets stuff done. I made sure to receive very high scores on my next few papers, set to work editing some of my best stuff for a makeshift portfolio, and (after standing up straight and sucking in a long breath) forced myself to ask teachers for letters of recommendation.

Apparently there isn’t as much competition to tutor as I had believed, because I was hired for the next semester. Over Christmas Break I began reviewing my people skills. I wasn’t trying to change my entire personality in one vacation, just a bit of review on how people work and the best way to get through to them. I read books on giving honest criticism, books on people in general, and evaluated some of my more recent mistakes.

I started training, and I was extremely nervous. I mean, what can be more nerve-racking than trying to tell someone what’s wrong with their writing?

I began helping students, awkwardly at first, but you know what? I never sent anyone away in tears. Every day I got better. I picked up some good tricks from my boss, other good tutors, and my own experience. Every day I struggled with the thought, “what makes me think I’m good enough to tell people how to improve their writing?”. This was the consolation that kept me going:

Taking your writing to someone for critique is a difficult thing. Many people don’t know who to go to that will have the knowledge and sensitivity to be helpful. They should be able to bring their work to someone who genuinely wants to help: They deserve it.

I tutored writing for a few semesters, and then tutored psychology and web design after that. One semester I held my tutoring sessions just down the table from my supervisor, where she could hear all. At the end of the semester she asked me if I was considering a career in education, and if not, I should. The way she put it, I was a natural. I was quite surprised! That surely isn’t what I had thought when starting out, but you have to admit – she had credibility.

If you want to teach, tutor, or in any other way help people, don’t let yourself get intimidated by anything. Not the people who are better at it than you, not the difficulty of working with people or their children. Let your desire to help people drive you to do what is necessary to get there, because frankly – there aren’t enough tutors or teachers in the world who truly WANT to be there, and there never will be.

There are always others who are better than you at writing, photoshop, nutrition, math, grammar or woodworking. But maybe that struggling student doesn’t need the “best”, they just need someone to help them troubleshoot a problem and get unstuck. Do you want to help them?

Go for it. There’s a demand for you.

There are real benefits to tutoring;

  • You become better at your work, in the process of explaining how and why you do things.
  • You escape your own world and problems for a while, being in the moment and helping someone. For those who struggle with anxiety, there is almost nothing greater.
  • You aren’t a douche. You’re giving back, and that’s awesome.

It doesn’t really pay that much. Most students won’t thank you (though some will, and it’s the best when they do). But some students will leave your table re-energized, emboldened to approach their work again when just moments ago it had been nothing but a source of great stress. Things that had seemed impossible before are now quite simple, and they can start to tackle the problem – all because someone with a bit of experience bothered to give them a half hour.

So you want to tutor/teach? Do it. Do what it takes; It’s a righteous profession. Let those who only want the campus job go flip burgers or man a computer lab and leave the tutoring to those with a genuine interest.

photo from City Year

Novel Ninja: Crediting Yourself

picture of my blog about Crediting Yourself at Ali Cross's Website
Ali Cross is a Fantastic Young Adult Author and avid blogger who runs NinjasWrite.com – an online community bent on keeping writers motivated.

Today Ali Cross has been kind enough to feature another blog by yours truly. This one is about Crediting Yourself: an aspect to life that I have found to be crucial for motivation and success. Check out the post at alicross.com or ninjaswrite.com – and if you’re a writer yourself, consider joining the dojo!

Six Movies I Wish I’d Written

Having finished Fox Fire, I’m forging straight on to my next novel. I’ve been writing off and on for fun since High School, but I have almost no experience in actually finishing novels (I love being able to put “almost” in front of that now). This next is called Chasing Clouds, and it is a romantic comedy for Young Adults, with a fantasy twist.

Chasing Clouds is going to be short, paced like a movie – which means the inspiring moments most often come while watching some of my favorites.

movie poster for 500 days of summer
500 Days of Summer

#6 500 Days of Summer

As the movie will tell you in the beginning, this is not a love story. It’s a moving on story. It’s a story on how to deal. Without giving too many spoilers; you get to see Summer from the hero’s perspective in several ways, through different lenses. We see how he fell for her, how he hated her, how he missed her, and how she was totally bad for him… and good for him. Plus it’s super funny – a Romantic Comedy for guys.

Why I Wish I’d Written It: The comedic element. The non-traditional format; the story is non-linear, showing which “Day” it is with each new scene, telling us how long it’s been since the first day he met Summer. The theme of the movie as it follows this character, being a romantic movie that guys can totally identify with that isn’t just about “winning the day and the girl”.

movie poster for stardust
Stardust

#5 Stardust

Adapted from Neil Gaiman’s YA Novel, this is a bright-eyed young man who is swept up in an epic fantasy adventure, all in the name of love. Neil is one of my favorite authors, first because of his pure skill with words, but secondly because of the beauty in his ability to genre-bend.

Why I Wish I’d Written It: I love the Romantic Twist, as we watch the hero grow up. The plot itself, the magical elements of the setting, are seamlessly tied up in the romance which develops throughout the story. This delivers an emotional punch that I am, frankly, jealous of.

dvd cover for hitch
Hitch

#4 Hitch

My favorite modern romantic comedy. That genre (distinctive from “chick flicks”) is a dying art, and Hitch is one of the best examples of the past decade. Not only do we get to see a likable side of Will Smith that we don’t get from his usual “Swagger Sci-Fi Hero” characters… but the movie is exceptionally well-written. It takes the basic idiot plot (where the emotional pinch is supplied by a character’s dishonesty) and makes it into something plausible and believable. This is one of the classics of our generation, a movie I’m sure will be watched for ages.

Why I Wish I’d Written It: It’s constant laughs from the very start, and remains engaging throughout. The dialog is fun and snappy. We get to see a vulnerable side to all four of the characters who we are hoping to see end up happy, which endears us to them. (I guess Sara’s friend is another, so that makes 5 people we’re invested in.) It accomplishes all of this in record time. Best of all, I just love the mood; it’s a great UP movie.

blueray cover for source code
Source Code

#3 Source Code

Newest movie on this list, Source Code was a delightful surprise. I expected just another thriller, something Bourne-esque. I got a whole lot more from it. This movie started off interesting, and had me at the edge of my seat. It’s like Groundhog’s Day meets the Twilight Zone, or the Matrix, and somehow squeezes a charming romance into everything that is going on. I was sobbing by the end; always an endearing quality for a movie, especially when that sob is a happy one.

Why I Wish I’d Written It: The concept is different, the thriller element mixes well with the romance, and it pulls off a 9/11 patriotic element without coming off cheesy, which I was surprised to find myself totally loving.

dvd cover for stranger than fiction
Stranger than Fiction

#2 Stranger than Fiction

The narrations about the hero’s life grabbed me from the get-go, especially the fun little quips about Harold’s watch. I love the atmosphere created by the music and the little computer menus that hover around Harold. I was never the biggest Will Ferrel fan, but this movie caught me by surprise when I found that I really loved his character and performance. Another movie that gets me sobbing pretty hard-core, especially a moment toward the end with the author hitting her keyboard. If you go watch it, you’ll know what I mean.

Why I Wish I’d Written It: The concept is fantastic; a man can hear the voice of the author who is narrating his life, and through the narrative discovers that his death is eminent. Once again, I LOVE a good genre-bend. There are a lot of really adorable endearing moments, especially when Harold brings Ana “Flours”.

dvd cover for definitely maybe
Definitely, Maybe

#1. Definitely, Maybe

Ryan Reynolds plays William Hayes, who is going through a divorce. His daughter wants to know the story of how her mother and father met, so he decides to tell her the whole story from the beginning – changing the names of the girls he dated so that she’ll have to guess which one is her mother.

I have this thing where I’ve always enjoyed watching Ryan Reynolds on screen, but that he always gets these crap parts. This is a movie where he doesn’t. He gets to play the lead role, he fits into that role perfectly, and the story is wonderfully written. While it is clearly a Romantic Comedy, I love how the story becomes about so much more; his relationship with his daughter.

All of the movies on this list are some of my favorites of all-time, but this movie retains the most re-watch-ability. Lines like, “Dad? I can’t believe you smoked… and drank… and were such a slut. But I still love you,” get me every time. Having been through divorce, it’s a powerful moment when you can feel that love from someone close again.

Why I Wish I’d Written It: We really get to grow with the hero, to watch his development as he charges into the world as a confident graduate with huge ambitions, and learns that the world (and romance) doesn’t work the way he expected. The bonding story with he and his daughter is moving, and in the end I am totally convinced that he ended up with the right one.