Author: Ilana Davis

Amazon Boxes

We’re definitely that family who orders from Amazon prime often. And by often, I mean at least once a week!

It was a pleasant surprise to receive our weekly shipment, but this was no ordinary box.Amazon box with space cutouts on the flaps.

Major props to Amazon for finding even the smallest ways to create the best users experience. And I can promise you that my 6 year old daughter will have hours of fun with these cutouts. Planets, rocket ships and cows jumping over the moon – oh my!

If your ever wondering if that extra touch to make your users experience is worth it.

It is!

 

UX Research Can Be Insightful

I’ve been working on a project (more details to come on that later) for a client. At first I worried they weren’t super excited about investing in user research.

They know their site visitors fairly well and so do I. We’re both very engaged in the community, so I wasn’t expecting to find anything super riveting.

UX Research could provide you with details you already know. Or it could add a few nuggets that you knew, but hadn’t realized it’s true importance.

For example, I learned, during my research, that a pop-up focused on survey results appeared to be more of a distraction than value add. Visitors I observed would close the pop-up immediately rather than reading the content.

This tells me that the pop-up needs to be removed, a change of content, and/or we need to find a new way to engage readers. In this case, the survey came out 5 months ago, so the data likely has already been seen given that the majority of our visitors are repeat visitors.

Another cool insight I noticed is that when visitors are asked to “click to see more” often times, they don’t click. Which means if items are buried on page 2, they may not be seen.

This tells you that important content must be upfront and pull the interest of the visitor.

Not that any of this really surprising. However it is nice to have your assumptions confirmed.

When One Door Opens

Since completing my bootcamp in March of this year, I’ve been struggling to find a full-time position. We’ll, perhaps that’s more my own perception.

I’ve been volunteering for a local non-profit since February. My scope, at it’s most simplistic view, really focused on the job board and providing technical support and configurations for the word press site.

In June, I began a front-end internship at a local development agency that lasted about 3 months. To be honest, the pay was dismal, but I didn’t care. My goal was to gain experience, and I certainly did. It was my first time working at an agency which meant my focus was on what was best for a client and not the company. So this was a fun experiment for me and I enjoyed the ability to work on a product that fulfilled the needs of someone outside of the organization.

When the internship ended in August, I was excited to continue my focus on front-end, but the job market was severely limited for junior developers. The internship certainly helped me gain confidence in my ability, but didn’t really open any new doors for full time jobs.

I struggled to stay focused and upbeat. Being told 5 times in the past 9 months that I came in second place because the other candidate and more direct experience, was exhausting.

Then began the second guessing. Everyone CAN be a developer but just because I can, doesn’t mean I SHOULD. I felt like I was trying to be everything to anyone who would hire me which meant I wasn’t focusing and building my skill set.

I really wanted to feel connected to my work and I had always enjoyed the simplicity and creativity in my past experiences. What I didn’t realize, is that UX (user experience) design has a big focus on this as well as creating an experience that pleases the user. Heck, I didn’t even know what UX was and thought anything to do with design, was out of my realm since I never took courses in art or graphics. When I looked back at my career, I realized I’ve been building different products for employees and I had been practicing UX principals without even knowing.

In late September, I began talking with the non-profit I’d been volunteering with about taking on more responsibility. I jokingly said, while they were working on 2019 budget, that they should keep a line item in there for me and hire me. One thing led to another and we started talking about a long awaited need to redesign the organizations website.

Over the course of a few weeks, we continued talking about the possibility of me doing some freelance with the organization. I created a proposal for a 3 phase project that included research, design and implementation.

The board of directors accepted my proposal for phase 1 and suddenly, I just closed my first freelance project.

Wait.. what?  I’m a freelancer now?!? When did that happen?

At the same time closing this deal, a previous manager from 8 years ago (who I hadn’t spoken to since then) introduced me to a local development agency. Within one week of kicking off the website redesign project, I also signed and started a new opportunity with the agency as an individual contractor. This opportunity provided a 3 month contract with the likelihood of being extended to 6 months.

In the last two weeks, I closed two big deals that allowed me to diversify my earning potential.

Suddenly, it wasn’t one door that opened. It was two doors.

Well Designed Websites

We’ve all used websites that just don’t make sense.

A great example is BuzzFeed where the site is so busy, you don’t know where to look:

Screenshot of BuzzFeed homepage
Screenshot of BuzzFeed homepage

It can be difficult as a user to navigate if we as designers don’t make the process super simple and draw the eye. What do I mean by “draw the eye”? I mean, that we need to know what our goal is on the site. Do I want them to click on a button to signup for a newsletter? Then make sure their eye is pulled to the button. In the example above, do I want them to read the story? Because my eye is pulled to the hot pink banner and then the article. But we also need to think about the screen size. This screen shot was taken on my large monitor. How would it look on my phone? What ads would be popping up to distract me? Do I want them to see all the ads or something else?

Here’s one example I came across the other day.

Women Who Code just launched a feature to create a profile on their site. I thought it was a great idea so I figured, why not?

When I went to create a profile, I noticed this:

Women Who Code screenshot that shows the profile is not public
Notice that the bar on top says it’s private

 

If my profile is “private and only visible to [me] and WWCode HQ” then what’s the purpose of a profile?

Why am I being asked to create this?

What value is in it for me?

 

Let’s say I go with it and decide I want to edit my profile. Building forms that are intuitive and simple to navigate should be easy, yet many companies get it wrong. This form looks nice, matches the brand and has all the essential information they determine is valuable. But something isn’t right. Can you spot it?

The form is long and there are a lot of questions that I’m not clear why they want to know. Noticed how much details I skipped!

When I got to the bottom though, I stumbled a bit. I was done with the form, but couldn’t figure how how to save.

Oh, the Save Profile button was anchored to the bottom. Take a look again.

 

Women Who Code bottom of the edit profile page. Shows Submit button anchored to the bottom of the page.
Why is the Save Profile so far from my form?

 

Which means that as I’m completing the form, the Save Profile button easy for me to see when I first start and can save whenever I’m ready.

At the bottom however, I found myself wanting to click on the square box that said Portland for my location. I thought it was a button!

They both look like buttons to me. Screenshot of the Save Profile Button Screenshot of the location selected that looks like a button

 

So what would I do to “fix” this? I think the simplest solution is to just take the border off the Portland box. By removing the border, I can clearly still see the x which signifies to me that I can remove this selection.

There is value in having the Save Profile button anchored to the bottom. As I mentioned before, it’s great if I just want to make a quick change and not scroll through the whole page.

To solve this, I would probably add a Save Profile button at the bottom of the form. This might also mean that once my view has reached the footer (and in return the new Save Profile button) the one that is anchored is no longer needed so I would hide it.

This seems to make so much more sense to me. What do you think?

Never Give Up!

In April of this year, I installed a new theme for the PDXWIT Job Board called Jobify. The theme was a major improvement on what we had, however that didn’t come without some hiccups.

The theme allows companies to upload a logo while posting their job. In the job listing portion (where there is a long list of all current postings) the image size requirement is a 1:1 ratio or 66px by 66px. However the theme, nor wordpress actually require the image to upload as a square. So when employers upload their logo, they don’t understand that how it looks in the individual job posting is different than how it looks in the list of jobs.

Since we launched the new theme, this has been a major point of frustration for me and the leadership team at PDXWIT. I had done research and found that requiring a specific ratio on the image, is no easy task. So we were left with logos looking like this:

Job Board Logos Before

Now I am not a wordpress developer nor do I know php. However I refused to accept that this was how it was going to look because not only did it look poorly on PDXWIT, it also reflected poorly on the company.

I reached out to Automattic, the company who runs wordpress, to see if they had any thoughts. They were awesome!

I got some code from them to add a new image size

add_image_size( 'company_logos', 66, 66, false );

as well as code to update the content-job_listing.php file. However this piece of code didn’t work and resized the image to full screen. I dug into the code a bit more, and realized the code that was shared with me, included features that we didn’t have turned on such as geo locating.

Reading through the code, I saw where it called the image size the_company_logo which is what the image size was originally called. In the new code, they recommended I change where it calls the image to be the_company_logo( 'company_logos' );

So I put two and two together. I kept the original code in the content-job_listing.php file but replaced the line from

<?php jobify_the_company_logo( 'thumbnail' ); ?>

to

<?php the_company_logo( 'company_logos' ); ?>

Now we’re left with this beautiful set of logos that look great and the employers don’t have to go back to their marketing team to get a logo that fits.

Job Board Logos After

When I think of the users experience, I want it to be as simple as possible. Ideally, they go about their business and don’t realize that this was ever a problem.

It took 6 months but I figured it out!

Mission Accomplished!

 

Creating Wireframes

I’ve always had a special place in my heart for creating things. Just ask my husband about my craft “corner” that’s really sprawled across our whole house.

One really cool part of creating things, is the idea phase. Last fall, while still working in HR, I was building our benefits enrollment training program. I had this awesome idea to create a game where we would take employees through the Game Of Life to select their benefits for the following year.

I started to draw my ideas out on the whiteboard.

Things just took off from there and out came a very simple game to make the benefits enrollment process a bit more interesting.

What does that have to do with wire framing? Well that’s exactly what I did.

I quickly sketched out boxes and labels and defined the path our users would take while going through the game.

Here’s what it looked like:

Wireframe for Game Of Life Benefit Enrollments

Playing With A New Toy – Figma

I felt a bit spoiled during my internship because I was using a mac as part of my development setup. This also allowed me to try Sketch for a bit. As the internship wrapped up though, and I returned to my Chromebook, I felt frustrated that I didn’t have a design tool that was comparable to Sketch or Adobe Suite.

Refusing to accept that I couldn’t get into web design simply because I didn’t have a mac, eventually I came across Figma.

What a super fun tool!

It’s completely web based so I didn’t have to download anything and I could create a team (if I had one) so that we could all collaborate projects with the most up-to-date information.

I’m sure this also shows just how much of a newbie I am, but I thought it was so cool to see the design I made and what it would look like on an iPhone8. You can also take a look at Project Coffee, the project in which I was building a mock-up.

While building my mock up, I wanted to use a component I saw in a training video. It was the top bar of the iPhone that shows the battery, date time etc. I did a quick search and found an iOS tool kit! Ahhh! It had all the components for Apple products I could possibly need for a mock up.

And it appears that I’ll be able to use my mock-up and convert it to React when I’m ready.

It will be fun to learn more about vector images and see what else I can do. But for now I’m blown away at the prototyping and the ability to share and receive feedback. Well done!

Dipping into React

I really enjoyed doing my front-end internship and was exposed to React while I was there, so I figured I’d give it a try.

So far, so good. Nothing really to report on other than I’m working through Wes Bos React For Beginners course. I actually started to go through Treehouse, but the tutorial wasn’t up to date and started to confuse me when I couldn’t do some of the steps.

It was nice though to see it on a customer’s live site before my internship with Planet Argon ended. Though it seemed to be fairly convoluted, it was cool to see it in action and what React is capable of.

I’m most excited to see what I can do with Project Coffee. Right now it’s an ugly vanilla application using fairly basic HTML, CSS and Javascript. Perhaps down the road we’ll see a post that shows the differences between vanilla Javascript, React and Vue!

More to come!

Lessons Learned: Merging Branches

The areas I’m least comfortable with is starting and ending a project. More specifically, a project with more than just me as a contributor.

It’s always a good idea to update your README.txt file so that it’s easy for new contributors to get their environment set up. Still doesn’t make me super confident, but I’m sure that comes with experience.

What makes me more nervous though, is when you’re ready to push. This week I was updating  the company website as part of my internship and after making the changes and received approvals, I was ready to push. Here’s the process I took:

Ready to merge

This allows you to get the most recent version of code which is especially important if you have more than one developers working on the site.
From your branch (lets call it branchname)
git checkout master
git pull

From master:
git checkout branchname

Now that your back in your branch, you want to merge master with branchname and not the other way around. This allows you to check to see if any of your changes will conflict with anything recently changed by another developer.
If there are conflicts, you’ll need to sort them out and determine which ones to keep.

If there are no conflicts and you are ready to merge your branchname into master
git checkout master
git merge branchname

Now they are merged together but your not done yet. You still need to actually push these changes to the repository and to your host.
git push origin master (to your repository)
git push heroku master (to the host, it this example, heroku)

Lessons Learned: Code Review

I had my first informal code review yesterday. By informal, I mean my lead and I sat in a room and just went through the website I recently built for a client.

It’s always hard when someone calls your baby ‘ugly’ but I also think character is built when you take criticism well. We weren’t going to do a review, but I specifically asked for two reasons.

  1. To make sure I wasn’t delivering a shoddy product
  2. To learn from my mistakes and their expertise
my lessons:
  • Mobile first is easier than last.
  • Assume everyone will look at the site on a mobile device.
  • You have to test on various browsers – IE is still prevalent no matter how much you avoid it.
  • Bootstrap is structured so that you use a container, row and columns.
  • Usually, if you add rows and columns at the start of your section, you don’t need to repeat yourself through out that section unless you are creating multiple columns.
  • Embracing technologies you haven’t used before, in this case jquery, is fun.
  • Estimating is hard so under commit and over deliver.
  • Ask for a code review as soon as possible instead of waiting until the end.