Designing to Reduce Overwhelm & Improve User Focus

I recently began doing UX design challenges with a friend of mine, @enavieve_ on twitter where we take turns picking a design prompt and then post our work at an agreed time. The most recent prompt — which I picked, by the way — caused me to waver from one state of indecision to the next, but I eventually saw it through to the end and produced something to turn in.

The Brief

“Design a landing page for a website where drug addicts connect.”

The brief is a little open-ended, as it leaves the designer to figure out why the drug addicts are trying to connect. To get drugs? To begin romantic relationships? To prepare for the apocalypse? It is anybody’s guess. I decided that the website was for drug addicts struggling with the daily pressures of being clean, seeking others who understood the hardship, seeking support and encouragement.

Problem statement: Mary, a drug addict, needs a way to find other recovering addicts who can help her quit using drugs.

Iterations

The one thing that remained consistent through this design process was my desire to have three distinct segments of the landing page. Everything else changed a few times.

The first paper wireframe vs the one I eventually designed

First, I thought I would go with a cool shade of light green to evoke a sense of healing, peace and growth. I wanted geometric shapes in the background which would help accentuate the text blocks on the page. In doing a little research on existing drug addiction recovery sites, I saw that the geometric accent shapes featured quite a bit so I felt like I was on the right track.

There didn’t seem to be a shade of green that translated what I had in mind, so I switched to blue. Dependable, reliable, trustworthy blue. A safety-evoking colour for a safe space.

Picking a font slowed me down yet again, as did finding the right photos to use. Then suddenly, the idea of geometric shapes seemed chunky, clunky and a little harsh. I knew then that in terms of information architecture, I needed something entirely different. I needed something that was clear, non-judgmental, honest and went straight to the point of why the user was there in the first place. I imagined that to a drug addict at a low point, time would be of the essence and clarity with a sense of calmness could be helpful.

As a fledgling UX designer who is on the hunt for her first UX job/internship, my search for open opportunities led me to this page and left me staring more at the site layout than anything else. It is very elegantly done. It is the kind of simple UI that takes so much effort and work to pull off. The page layout offers fewer choices than most other websites, choosing instead to narrow the user’s focus and help them quickly achieve their goal. I decided to model my addiction site after the same straightforward design.

My Design

High fidelity design

Do I think it is perfect? No. I think a more experienced designer could make it look more sophisticated. I think the items in the footer area could be arranged a lot better, yet this was the arrangement that I disliked the least.

Overall, I like this design because:

  • I finished it, despite a strong lack of self-belief in the beginning
  • It is inspired by the kind of design that I aspire to create: simple, uncluttered, beautiful, highlighting what is important.
  • As a UXer, I have a bit of a crush on Google. This was fun for me.
  • I used it as an opportunity to practice vertical and horizontal scrolling. A first for me, and totally rewarding to do.

Cheers to my future designs :)

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store