Category: development

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?

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.

The #1 Lesson from ACT-W PDX

I’ve been thinking about ACT-W PDX since it wrapped up last weekend. Trying to absorb all the wonderful tidbits of information and deciding what my biggest lesson was – which is no easy task!


Especially when you look at the lineup of fantastic speakers. These were just a few of my favorites.

  • Let’s give it up to @perrysetgo who gave a wonderful performance as the very first MC of the conference
  • CEO and founder of ChickTech, @jlevenha shared a very personal story of how ChickTech came to be
  • I loved the keynote from @jillnelsonpdx who reminded me that if you do what you are passionate about, you won’t let anything get in the way.
  • A super informative session from @WhataTiberius on salary negotiations – who by the way I was super excited to meet. She too has an HR background before transitioning to engineering!

But by far, I think my favorite session was the last one of the conference.

When @AndoTheRando taught me to break shit! Weird I know.

But he reminded me that sometimes, you have to break something before you can fix it. It’s ok to not know the answer.

Write down your question and your hypothesis. Then look it up and write down what you found.

Doing this makes the information stick!

Pick something, google it and look at the documentation. It will sink in so much more when you are looking at it for fun rather than because you have to!


The other lesson I learned from him, read what the method does!! Don’t assume what the return value will be. That caught me a few times!

Why Development? Why Now?

I was reflecting recently about why I decided to transition from HR to engineering.

First a little history

I have 10+ years experience in human resources, and noticed I never really showed the real me. Not many people know who I am or what I have to say because in HR, I learned to be guarded. To share just enough so that others think they know me, but not so much that I was vulnerable.

Why? Because at some point, I may be at the other end of a table with a severance check in hand and wishing you well in your future endeavors. When I got to the point of being numb to letting people go, I knew something wasn’t right.

I took the Insights Discovery assessment a few years ago, and I remember the instructor looking at my profile and said “Hmm!” in one of those, well that’s interesting sort of sounds. I asked him if he saw something concerning and he noticed that my conscious persona was conflicting with my less conscious persona. He told me that I need to allow the real me, to be me. I’m essentially fighting internally with how bold vs calm I am because my conscious was trying to be assertive but my unconscious was trying to be relaxed.

No wonder I always felt conflicted.

I learned a lot about me

Each new year, I set mantras that will guide me through the next 12 months and help me to stay focused. They aren’t resolutions because we all know those don’t work. A mantra is a statement or slogan repeated frequently.

    2015 – All about me. Do only what makes me happy
    2016 – Feel good, eat good
    2017 – Be brave
    2018 – Be kind to myself and don’t be so hard on myself

I found myself asking the questions regularly over the last few years. Was I happy? Did I feel good? Did I enjoy my work?

2017 was the year of being brave. In early January, I was so giddy to dye my hair purple, green and pink because it’s not what a typical HR person would do. I felt brave! (I like to live dangerously)

I had been sitting on the executive team at my company for the past year and in late January, I began an advanced management training program on the path to VP of HR. In the program, there is a lot of work around the health of an organization. I looked at myself as an organization. Did I know what my values were? Did I know my purpose? Did I have clarity around what I wanted?


That summer, I realized I wasn’t happy in my position. I wasn’t enjoying what I was doing every day.

I looked back at my skills. Many years ago, I was posting a job to Craigslist. At the time, Craigslist required you to use HTML if you wanted your post to look anything more than a bunch of words. I remember feeling so excited that I taught myself how to add bullets and paragraphs. Seems small now, but at the time, I was amazed at the control I had.

Fast forward a few years and I asked myself what it was that I always wanted to try. Oddly enough, that was software development. It was the year to be brave after all.

Holy crap! That means Starting over!

Fall had arrived, and I wanted to decide if I was going to continue in my current job while learning software development or leave my job and focus on learning full time. At this point, I had dabbled a bit in engineering through Free Code Camp but it was once a week and not enough to really make a difference.

In November 2017, I signed up for The Tech Academy, and began my studies while working a demanding job full time. I also have a family which meant my days were packed. Most days I was up at 5am and didn’t go to bed until after midnight working a full-time, demanding, high stress job while trying to study 40 hrs a week. For some, this may work. For me, not so much.

I did this for a little over a month and I just couldn’t do it anymore. I wasn’t focused on my work and was often distracted in my studies. Plus we were dealing with a difficult landlord and trying to move in 2 weeks. I couldn’t put all the weight on my husband and my five year old who, although she was super proud of me, missed playing with me – and reminded me of this all the time. #bestmomever

So I transitioned out of my company and focused on studying full time.