Category: ux

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!