Website User Experience
Have a website that showcases my professional work and includes a space for my personal hobbies.
There were three key goals for this project.
What I needed to accomplish, in order of priority:
Researcher, Designer, Developer, Tester, Implementer.
You're on it!
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.
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.
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.
Completed logo (Illustrator):
Here, I explain UX decisions I made for the website navigation as I improved it.
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.
user testing, iteration, towards development (if you did)
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
Papers published from the project, awards received, conferences, scholarships etc — showing your achievement and dedication to the project
what you learned and what you will be doing next
With thanks to Pixel Buddha for providing the heading icons.