Midterm Worksheet

CD Foundations: Interaction — Portfolio Development

Questions, Comments & Observations

  1. How much friction is too much? Where's the line between "memorable" and "just annoying to use"?
  2. Can I keep the site scannable for someone skimming quickly, while still rewarding someone who spends real time on it?
  3. Which of my three concepts can I actually build with HTML/CSS in the time I have, versus which one needs JS I don't know yet?
  4. How can I tell a story? Theres so much competition out there how do I compete?

1) Develop Your Idea

The problem I'm solving: most portfolio sites optimize for frictionless scanning, which makes them fast to browse but easy to forget. I want to design deliberate, rewarding friction into my portfolio. so that the act of interacting with the site becomes evidence of my design thinking, not just a delivery mechanism for images of my work.

I'm my own client here, which is the hard version of this problem: there's no brief to push back against, so the risk is building something that feels cool to me but doesn't actually communicate anything to the person looking at it. The idea only counts if it still works for a stranger evaluating my work, not just for me.

ideation for UX portfolio
UXIdeation — brainstorming different ways I can show my creativity through UX

2) Discovery and Research

Reference Sites

I looked at sites that treat interaction as a design decision rather than decoration — specifically ones that use some form of "friction" (delay, discovery, resistance, a small puzzle) as part of how they communicate craft.

Screenshot of bleibtgleich.dev/work
bleibtgleich.dev — Maksym Bleibtgleich's portfolio (Kyiv, UX/UI designer & developer). Recognized by Awwwards, GSAP, and CSS Design Awards. Heavy use of motion as a signal of craft rather than pure decoration. The interaction itself argues for his skill before you've read a word.
Screenshot of sashasatchi.com
Sasha Satchi sashasatchi.com Sasha Satchi, an art director and still life photographer. I'm studying interaction design, not photography, but her site caught my attention because of how creatively it uses UI and UX to support the work rather than compete with it. Which is what I would like to embody through my casestudies and have the portfolio support that. not want to go.

What I've concluded

Across these references, the sites use the viewers curiousity as a vessel to explore their work. By applying intresting unique ways of navigating each portfolio, as simple as beautiful image hovers and as complex as animation graphics. Entry points (homepages, project thumbnails) tend to stay true to the designer and immediatly showcase their skills and focus, also maintaing fast and legible ux. The only friction that shows up is once you're already committed to going deeper into a project. That's the pattern I want to borrow: friction as way of exploring and making my portfolio memorable.

3) Target Your Audience

People who want to pay me?

My target audience would be employers like art directors, buisnesses and recruiters. Or just any other creative indivduals who are curious about my work (want to collaborate?) My real design problem is that "friction" cuts two ways depending on who's looking: a fellow designer or an art director will likely read intentional friction as craft and stay longer because of it. A recruiter skimming dozens of portfolios in an hour needs a fast, legible exit if my site doesn't match what they're looking for. Friction there just reads as a bad, slow website.

Resolving that tension is my actual audience strategy: keep the entry layer (homepage, project index) fast and scannable, and let the friction live deeper in, inside individual project pages, where someone has already chosen to invest time. I'm designing for two audiences moving at two different speeds through the same site, not one generic visitor.

4) Introductory Framing and Concluding Call to Action

If friction is the whole thesis, the homepage needs to teach that in the first few seconds — a cursor behavior, a hover state, something small that signals "this site rewards attention" before any text explains it. I don't want a plain hero and nav that could belong to any portfolio; the first interaction should already feel like mine.

The closing call to action shouldn't just be a static "contact me" link — it should mirror the opening interaction in some way, so the site feels like it has a shape (a beginning and an end) rather than just stopping. Still deciding exactly what that looks like — likely tied to whichever concept I pick in Step 5.

5) Inspiration and Concepts

Mood Board

Mood board collage of color, texture, and typography references
Mood board exploring: grain/analog texture, deliberate misalignment in type, and a restrained, mostly-monochrome palette that lets interaction carry the visual interest with pops of color.

Concepts

  1. Javascript interactive animation Last year I coded a javascript interactive art work that I feel like could be a powerful interactive element to my website. I've changed the text to have my name but I need to figure out how it could become more than just decoration. May change the words so it says something about my UX not just my name.
Screenshot of javascript interactive animation
Screenshot of javascript interactive animation
Screenshot of javascript interactive animation
  1. Weighted Interactions — elements physically resist the cursor: drag, spring-back, magnetism. The friction is tactile — you feel the interface push back.
  2. Maze Navigation — a nonlinear structure where finding a given project is itself part of the experience, rather than a straight list. The friction is spatial — you have to explore, not just scroll.

Leaning toward Weighted Interactions right now — it's the most buildable with CSS/JS I'll actually learn this semester, and it lets me keep the entry layer (Step 3's fast audience) mostly untouched while concentrating the friction inside project pages, which lines up with the audience strategy above.

6) Thumbnails and Sketches

Sketches of two case studies
Early case study sketches
Sketch of Homepage
Sketch of homepage, simple layout, with image or two that showcases what I can do (maybe a javascript animation)
sketch of about me page
Sketch of 'about page' that has an asymetrical grid where you can contact me and says a bit about me etc...
Projects page sketch
Projects page sketch, showing each of my projects, where you can see passion projects, mixed media and my ux case studies

7 Wireframes and Prototypes

Homepage

Initial homepage of portfolio
Homepage wireframe The Image represents the javascript interactive art work thats says "MAREN MCHUGH". This the user can change the kaleidescopic shape to read what the words say, it stays this big for a moment and then begins to shrink smaller.
Homepage once loaded
Homepage static/official Once the javascript artwork has shrunk to the end point, should still be there in the middle of the screen but lots of white space around it. Only once that is in place will the screen split into four and as you over over the four parts different aspects of the portfolio appear, such as my two case studies "recess" and my textile project. The third quarter of the screen will be "about me". Thats where you can contact me etc... and the last will be my "passions" or art, something along those lines to showcase my other interests and multimedia skills"

Recess:UX case study

Initial homepage of only UX case study recess called Recess
Recess loading Homepage wireframe Recess is my (so far) only UX case study that I did in Sydney Australia. Recess is an interactive life sized crayon with a very simple digital interface, that asks users to pick an emotion (displayed on the screen on different blob' illustrations expressing various emotions) from that a little paper slip falls out below the screen. The paper slip 'gives permission' to adults to let go and do a silly activity no more than five minutes. Examples include: do a cartwheel, lie in the grass for 5 minutes, colour in the back of this slip etc... No one needs to complete these arbitary tasks but in our user research young adults and students at the university said that the tasks were so simple and easy that when they completed them they actually had fun. Some reported feeling more present and grounded. Othersfelt it was a bit silly but light hearted and reminded them not to take things so seriously. We also discovered that the interface with the blob emotions were a bit confusing and not everyone understood immediatly that a slip was coming out and where to get it, even though the interface does explain this. The useability testing was an immensly helpful insight to understand how recess would be perceived and interacted with and whether it actually worked.

Its meant to be a ceremonial object for adults to connect with their inner child. Its supposed to lead with curiousity, the size and colour (red) of the sculpture would make passerbyers curious to investigate. Idealy it would be set in densly populated ares like at a university campus where young adults are busy doing their studies and may need a much needed reminder to play

Recess Homepage once loaded
Recess Homepage static/official I thought it would be fun if once you open the Recess case study that the title could come down the screen on its own little 'slip', I tried to show it in the wireframe. This way the reader could visually already get hinted to what the case study involves. How to do this though I have no idea.

Textiles major work

Initial homepage of only textile case study
Textiles major work homepage This is my textile major work that was selected for a best in state exhibition in NSW called TexStyle in 2023. I wanted to include this major work, mainly because it is my baby, this dress took a year to make and well and truly formed a love/hate relationship to it. But more importantly I think it reflects my mutimedia interesta nd versaitilty, even though UX is my focus I do value my other creative ambitions and I personally view them as equal in how my creative process works. I may be wrong, but I think this would be valuable for an employer. To see I am versitile and have range in what I do, also gives my portfolio a better representation of me and what I like and am good at.

Passion Projects

Homepage of my other miscellaneous projects
Other creative projects homepage This is the third product page where it showcases a range of mediums in which I create things, from painting, print, illustration, textiles, photography... This is a page for me to play with and show the true expanse of my love for art and creative thinking. Again not necicarily UX focused but this is my Portfolio and I want it to truly be a mirror for my self and I feel this is inegral to my creative process. I do not strictly participate in one form of art making and I think I would be limiting myself if I didnt try at least to showcase my range and other maybe less appreciated works.

About me + contact page

Homepage to contact me and read about ME
Contact me and read about me here! I want to do like an asymetrical minimalist contact page and think of something fun to show about me...

8 Responsive Mockup (optional)

Optional — skip unless there's time after Step 9.

9 Photoshop Comp

Not started. Final comp for phone, tablet, and desktop before moving into HTML/CSS build.