OverviewUX ProcessTakeaways

Personal Website

Website User Experience

Project Overview

Purpose

Have a website that showcases my professional work and includes a space for my personal hobbies. 

Objectives

There were three key goals for this project.

  1. Build Website: Design and develop the website myself and include references and projects. 
  2. Design Logo: Design a personal logo to use on my website and branding. 
  3. Include Blog: Have a place to share personal photography and writing.

Approach

What I needed to accomplish, in order of priority:

3.   Blog

Members

One (me).

My Roles

Researcher, Designer, Developer, Tester, Implementer.

Links

You're on it!

Logo Process

Ideation

I knew I wanted the S and B to come together in a butterfly shape as I enjoy designing for boutique style websites and the soft butterfly image is more likely to encourage that clientele. However, I didn't want the design to be too rounded and soft, like the sketches in the middle page, because I like to work on modern UX projects too.

Wireframes

I designed my logo in an A5 Moleskin I picked up in Chicago, and sketched these three pages within an hour on the train from Chicago to NYC. Hence the designs being a little more wobbly than usual. But I don't mind - I just needed to get all of the different ideas out of my head and onto paper, so I can move to the next idea and so on.

I decided to add the X in the middle for structure and also to emphasize my work in UX. I added the butterfly antenna to act as the "U" in UX so my logo subtly reads 'S B' horizontally, and 'U X' vertically.

Design

I was without my laptop and Adobe Cloud subscription for a couple of weeks. This is why I used the Vectr website to create my logo. It is not as clean as I want it to be (S connection is not completely smooth) so I will finish it in Adobe Illustrator once my laptop arrives. I had never used Vectr before but was able to find it and utilize it to create my logo.

UX Logo

Completed logo (Illustrator):

Website UX Process

Navigation UX Design Walkthrough

Here, I explain UX decisions I made for the website navigation as I improved it.

1.    Differentiation

I like the dropdown within the nav because now the user can navigate throughout the website without having to go to pages in between. However, the second level links aren’t differentiated from the top level links and this leads to confusion as to where the second level links stop and start. I’ll make the font smaller and lighter to signify their child status.

2.    More Differentiation

Better, though they could be differentiated more. Ill try italicizing them:

3.    Even More Differentiation

There. They are now more obviously children of the Portfolio link.

4.    Current & Hover Colors

Now I like the nav menu and its almost done, but one thing is a bit off about it. I like the continuity of the turquoise accent, however I think I have got the ‘current’ and ‘hover’ buttons backwards. It’s not groundbreaking news im on the home screen, I just clicked it a second ago, so it doesn’t need to be bright turquoise. On the other hand, when I hover over the links, I want it to be more clear what I am hovering on to avoid clicking the wrong link. Thus I switched them around so the hover is turquoise and the current is darker grey.”

5.    Current Button Distinction

Ta-da! This makes much more sense to me as a user. One small issue that has arisen from this is that the current button now doesn’t stand out enough. So I upped the thickness from normal to medium and:

6.    Emphasize Current

There we go. It’s clear where we are, and its clear where we are going.
One more thing: could indent the children. Could indent 5 or 10 px to further do it:

7.    Indent Children 10px

Hmm not sure I like this. Indent is too strong at 10px, it almost looks like an error. Lets try 5px.

8.    Indent Children 5px

I like it. Now I think the child link margins could be smaller because now the text is smaller, they look like theyre swimming in unnecessary space.

9.    Reduce Children Padding

Better. Now I want to make the first child’s top margin smaller so it’s more tied to its parent

10.    Reduce First-Child's Margin

Better. Now I want to disable the change in state when hovering on the current page. Why? I want to discourage people from accidentally clicking the page they are on. Its an unnecessary feature.

11.    Current Hover

Here is the turquoise hover on the home (current) page. Not necessary.

12.    Removed Current Hover

There. I have left the option to click on the link as some people use this to refresh the page. Now it is just even clearer what page you are on.

Prototype

user testing, iteration, towards development (if you did)

Takeaways

Challenges

Include constraints/obstacles during the project (or have it down somewhere in your notes) — useful when doing interviews. What went well, what didn’t and how you overcame those situations as a team/individual

Accomplishments

Papers published from the project, awards received, conferences, scholarships etc — showing your achievement and dedication to the project

Conclusion

what you learned and what you will be doing next

With thanks to Pixel Buddha for providing the heading icons.