Suzanne Hillman (Outreachy): Website redesign

During a recent conversation during a recruiter technical interview, the interviewer commented that my website wasn’t very welcoming or likely to encourage people to look further.

Now, one of the things she said was that I had no photo of myself. This is actually something I’ve been reluctant to put up, in part because I want it to not matter. But, perhaps, it does matter.

Upon reflection, there really isn’t much there about me as a person, rather than as a QE person turned UX designer. Even that part isn’t especially well described, so someone looking at my site has no real sense of how my background informs my UX skills and processes.

Let me show you what I mean:

<figure><figcaption>My home page</figcaption></figure>

This is everything currently on my home page. It’s functional enough, but it can be difficult to decide what to click on and why. And there’s really only professional stuff: contact info, resume, portfolio, and a little bit on accessibility.


My former mentor through Outreachy commented that this page, my resume, and my portfolio don’t really communicate my enthusiasm about UX. This is true, in part because I was trying to be professional, which rarely goes along with enthusiasm. She pointed out that my enthusiasm is clear on this blog, and that I need some way to encourage people to go here and read about my internship.

She also pointed out that I need an obvious link from here to my professional side: my portfolio, and LinkedIn. (Mind you, the description of my internship on LinkedIn needs some work.)

So, task one: decide how best to get people on my website interested in looking at this blog. Perhaps also decide which entry point to offer: maybe there’s an especially good post I’ve got up that I want people to look at?

What about me?

Right, so getting people aware of my enthusiasm is great. But what’s going to get them connected enough with me to bother exploring further?

Well, I need a photo of myself. Selecting a photo might be simple (use what I’ve got elseweb), or maybe I want to have it _say_ something about me. What it should say, I’m less sure about.

Maybe I want banner images on the approachable pages: my main page, and something about me and my background.

Task two: I need to talk about myself. I likely won’t talk about my relationship structure or anything, since that’s more personal than I want to get. But I could talk about my garden and pond; the cats, plants, and people I live with; my interest in wandering around wooded areas and kayaking. I could mention that I play World of Warcraft. I could probably talk about my general liking of people. And living things, really — if you’re alive, I’m probably interested in learning more about you.

Also, pictures of things. People like pictures of things!

From my professional background to UX

Task three: I need to talk about my background. Starting with a computer science undergrad degree, meeting fellow computer scientists and Linux enthusiasts. Those enthusiasts helped get me into an internship in QE at a Linux company, and from there I continued on to do QE at two other Linux companies. I’ve tested a wide range of things, from drivers to databases to desktop software to wireless networking. I tend to do a lot of writing: it makes it easier for me to have references for things and it makes it easier for other people to be able to read what I’ve written. I eventually left QE in part because of my frustration with usability bugs not being addressed, and the amount of struggle involved in getting people to listen. I was doing QE on Linux software for nearly 10 years, and using it for a few years before that: I’ve got pretty good open source technical skills.

I was interested in psychology research, and after some initial online classwork, I realized that I was never going to get into graduate school without some research experience. Volunteer work at a lab near my home meant that I got into a Master’s program at that school the following year. That Master’s degree involved a great deal of running research studies, collecting data from those, and analyzing that data. As a result of that time, I got a lot more comfortable interacting with participants, and figuring out what to do with the data — often involving other people’s ideas and perspectives on the best approach. After the master’s degree, with a great deal more work and time, I got into a psychology/human-robot interaction Ph.D. program. This was fascinating stuff, and meant that I had even more practice creating a research plan; running a research study; and collecting, processing, and analyzing the data. Unfortunately, I did not complete that program, and had to reorient my career plans.

During that reorientation period, I considered the many people I knew in UX. I recalled how frustrated I’d been when usability issues were closed because “they weren’t bugs”. I thought about how much I enjoy doing research, learning about people, and what they are doing and why. I had a lot of discussions with current UX professionals, and they generally agreed with my feeling that UX was the right way forward for me. At that point, the task was to figure out how to make the transition.

A year and a half later, I’ve attended multiple UX meetups, went to the UXPA conference, read a bunch of books and websites and blog posts. I’ve done a couple of UX projects to help focus my learning, a hackathon, and the recent internship. This is amazing stuff, and it’s clearly taking off.

How do I focus all this stuff?

So great, that’s a lot of stuff up there, even after trying to trim it down. How do I focus my background in a way that helps people see a) my open source, linux, technical background, b) how I got to UX, and c) is interesting enough to keep them reading.

Do I mention that the way I got online in the first place was by constantly asking questions of the local sysadmin at the college I was in at the time? I’d never seen UNIX before, but I wanted to understand it. And he was willing to answer my questions. These were UNIX boxes in the campus library, where I spent much of my time.

This was handy later on, because it meant that Linux wasn’t that foreign an OS to me when people mentioned it and the possibility of using it. Sure, the install process at the time was really confusing, and it was wonderful that friends of mine helped me through it the first time or two.

Do I even mention all the research that I did and am doing on UX, or is that something that belongs in the porfolio section? How does one “show your work” without showing too much work?

What about the fact that my website is itself technical? I’m using the Pelican static website generator, with a theme that I’ve been modifying. This has meant trying to figure out how to do things like make images have captions (the better images and figures plugin plus some modification so that I can set the width in the restructured text syntax rather than having it default to the actual image size), figuring out how I might have my images be expanded inline to full-size on click (still working on that one), and figuring out how to make images be links (“target” apparently). I’m also going to need to figure out tabs (or pills) and buttons, if I want those.

I don’t write code, but that doesn’t mean I can’t modify existing code to do what I want.

What else?

So, I’ve mostly talked about content so far. That isn’t all that is involved with being a welcoming website, however.

I’m considering adding buttons to make the bits that I want people to click on more obvious. Everything is currently links, except the overly cryptic social media section on the side which are instead icons.

What about the portfolio itself?

I’ve not yet shown you the portfolio page, so let’s get to that:

<figure><figcaption>Portfolio main page</figcaption></figure>

At least the portfolio has pictures, right?

My mentor suggested adding an alternative view or section at the top in which there are thumbnails of particular design artifacts. She was worried that people might not want to go through an entire project, and might therefore miss the variety of different design methods I have used.

Great. I see how this might be useful. How do I make it not overwhelming, though? There’s already a lot of stuff on this page…

Maybe tabs? Or pills (which term I used when looking up how to do tabs in CSS)? Have the first, default, section be the portfolio organized by project. Have another one which is organized by artifact. Maybe a third for current projects like this redesign?

What about reference statements? My mentor said she’d be happy to provide one, and I can definitely see how those’d be useful. But where do I put it so that it’s visible without being too crowded?

Internship portfolio

Another reviewer of my portfolio suggested the possibility of a table of contents for my internship portfolio:

<figure><figcaption>There’s 11 sections on this page!</figcaption></figure>

This seems like a perfectly reasonable suggestion, given there’s 11 sections on the page, all of which have images and a brief description.

I can’t figure out how best to do it without taking up a ridiculous amount of space, or making it hard to interpret. ToC tend to be a list of items top to bottom. That seems ill-advised.

I was considering trying to create a box in which I have an invisible table that holds the links to the rest of the portfolio. I can’t decide if that’s a terrible idea, though. I probably need to see what other people do for table of contents-like things!


I’m also working on presentations for the work I’ve done, and for About Me. I’m not sure if that’s the right kind of thing to include on my website. Will have to consider on that one.


I’m currently working on my website redesign and presentations, getting involved with Patternfly Design, and was impanelled on the grand jury for my county for the next three months.

Oh, and job hunting. Which is a bit complicated by the grand jury part!

Source From:
Original article title: Suzanne Hillman (Outreachy): Website redesign.
This full article can be read at: Suzanne Hillman (Outreachy): Website redesign.


Random Article You May Like

Leave a Reply

Your email address will not be published. Required fields are marked *