Home » development » ux

Category: ux

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?

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!