Get started with WFL

Just pick something below to explore my work, services and more.

Latest Articles
Latest Art
Latest Photo
Latest Music

Dev Log: UX design for web app 'Where does it hurt'

February 24, 2019Will Leffert,

UX design for web apps is a critical step in building something that you hope will have any measure of success; having a solid plan of how a user will interact with a web app ensures that, once it comes time to write code, you won't be surprised later on and have to refactor everything.

The UI for "Where does it hurt" has been in my head for months, so it wasn't too much of a challenge to begin the UX design. This time, however, I avoided my usual approach, and went with a style of tool more common in larger business web app design.

I signed up for Marvel, a web-based design tool frequently used to mock up user interfaces.

Typically, I'd do all my UX design in Photoshop; this is a holdover from how I built websites in the past. The issue here is that I'm not quite ready to put together all the elements, and I wanted something I could hop in and mess with on the go, easily collect commentary when the time came, and more.

Plus, utilizing something like Marvel allows me to work faster on my UX prototyping.

Here's where we're currently at with the UX:

I focused on the 2 primary interaction screens; On the left, you'll what your public profile looks like, also demonstrating the "Love" mechanic. I wanted to make it as simple as possible for someone to just click on the heart to show their concern for the users' pain.

The right features the UI for adding pain. You just simply tap on the location, give it a number, and then add your text description (optional).

A few things to note about the UX design for my new web app: The "body" is just placeholder. I'll illustrate something later. That's not as important currently; we're just planning out how the user will experience the app. Second, Aside from the pain points, I am using black & white to mock up the design so I don't get bogged down in the general look. We're not showcasing the final product; just how the user will typically experience it. Finally, this is a "mobile-first" process; desktop will actually be very similar, just expanding out the front, back & sides to eliminate the need to scroll though.

Ironically enough, I had planned on doing this last weekend, but I was sick and in too much pain to work on my pain logging app..