How I build the UX of my Projects
Thu, Apr 19, 18
10 minute read

How I build the UX of my Projects

This documentation is just part of the initial first steps of the UXdesign process, so you should know that what you see here today may be different tomorrow which will be rebuilt and refined to the final product.

Originally posted on Compass of Design Original article link

Darian Rosebrook's avatar— by Darian Rosebrook

On a recent newsletter, I mentioned that I’d be temporarily closing registration for new members of the community while I am working on releasing the new website for members of the Compass of Design.

We’ll re-open when this launches, so if you want to get to use this early on before I publicly release the community 2.0, definitely join us in the community and get in the conversation!* *(:

What I’m making is huge. Especially for just one person to take on.

I got quite a few questions from the subscribers, like:

What exactly are you building?What are you using to create the site?Why not use a facebook group or discourse forum?Are you going to share your process?

So I wanted to take some time and show you what I am currently building and a bit of how I build out the UX of my projects.

This documentation is just part of the initial first steps of the UXdesign process, so you should know that what you see here today may be different tomorrow which will be rebuilt and refined to the final product.

This may also serve as a good overview of documenting your process as you go along. This is almost exactly my thought processes when starting any web/ui project. (:

So a bit of a recap.

Formerly, this newsletter was called the “Design with Confidence” newsletter, and for a few months, it worked that way as a small part of my brand.

But as things started to expand, more people were responding and sharing the things that they struggle with and areas that would make that newsletter more useful for them.

After nearly four months of writing, there were a bunch of people who were craving more ways they could get better as designers. So with me and the others on the newsletter list, I was able to open up the community.

Creating the community was a priority because:

1. The topics from the newsletter were no longer one-sided

I was answering people’s questions directly (and I still do) by writing a newsletter about it. And that led to even more conversation over email. Soon I was having tons of emails from different subscribers that were missing the input of others. This led to me thinking that it might be good to get other people involved in the conversations.

2. Current design feedback channels are broken

If you’ve tried posting work on Dribbble, Behance, Instagram or other places looking for feedback on your work recently, you might notice the same ten people liking your shot immediately or the random comments coming in saying “looks good! you should check out my new logo.”

“Great work! Your projects are an inspiration to me. Check out my recent project.”

I had literally pulled that from Behance with the next ten posts having the same exact comment.

Nowadays, it’s a race to grab attention any way someone can. Anyone can create automation tools that look for things going up on social media sites like these and leaving this comment on the next 100 posts.

That’s how my plan for the community was going to put a stop to this

My goal was to create a focused group of designers who are looking for actionable feedback on their work and getting answers to questions they haven’t had luck with in other places.

We’ve been using Slack as the central part of our community. This chat application helps us share in real-time what we’re working on and converse with each other from across the globe.

As great as Slack and these other options like Facebook Groups, Discourse, sub-Reddits, Forums, and other solutions are, they all solve only a piece of how we use the community.

I seek to upgrade the experience of everyone who’s helped shape how great this community has become.

I always start my projects with a thesis statement.

It’s kind of the “what are we here to solve?” question that should be the focus of how you approach the problem.

With any great thesis, as you do research and start developing solutions, your thesis may become more refined or challenged enough that it changes.

Remember to consistently measure this against what you are trying to solve through design.

The initial thesis.

Design feedback within design community websites has become broken past the point of repair, disconnecting objective feedback from actionable value.

Supporting thoughts: Sites like Dribbble, Behance, and other Facebook groups allow anyone without context or experience to comment only on what they feel about the visuals without thinking about the bigger picture. These platforms have very few steps as a quality filter of serious designers looking to improve and have become more of a popularity contest or “crap on the designer’s lawn” scenario.

Proposed solution:

Building a custom site that takes the strengths that these community platforms have around posted visual work, proposing ideas and resources, and posting questions. We’ll introduce a new way to communicate around design feedback, without the distraction of popularity or spam. We will achieve this change by creating more group participation in providing input and encouraging the use of context and action steps.

Gathering what exists:

My initial steps included about 2–3 pages of notes on what we use the community for now. The notes for this project spanned across my computer (not ideal since that wasn’t currently where the ), my notebook (better), and notes in my sketchbook.

Ideally, you should keep the notes as close to the sketches or develop a system where you hold a record of changes on your project. Otherwise, when it’s time to create your study, you don’t have all the pieces together and have to rely on memory which isn’t as reliable as notes taken at the moment.

I take these notes and build out what we may need for functionality on the new solution compared to what exists for the original. There’s quite a few things you should cover and sadly all my notes aren’t in one place right now. I know, my bad. haha

Things you should cover your list of what to improve:

These things can be hard things to cover if you’re new to creative problem solving, but this is no different than coming up with a research paper.

  1. Outline the goals that you have for the project one more time
  2. What are the functionalities that do or don’t exist right now that you might need to include to create a working model (or minimum viable product) that solves these goals?
  3. What challenges are you expecting when moving forward with your solution?
  4. What other products exist right now that may have solved your thesis either in-part or in-whole already? What can you glean from their experience in solving similar goals? What might you improve?

Start your user flow.

In my previous article that covers how to map ux user flows to brand experience I went over how I build out the actual flow of my site’s functions and actions I want people to take.** You need to start working on this for your own project.**

I take these little tiles like these and start thinking how these all fit together and where a person might expect these to be in the final product. These are just simple representations of what screen functions will be, not necessarily the actual layout that will be used in the end product. It’s important to make that distinction early on, because we want to make sure it’s usable before it’s pretty. (and yes I understand the argument that ugly things sometimes aren’t very user friendly.)

By the way, if you want to use user flow kit in some of your future projects, I’ve made this product available on the Compass site.

This is a collection of UI tiles and a related layout template for the user flow that I made for Adobe Illustrator

Anyone who buys it will have access to any updates I make to it in the future that will make it easier to use and adding more UI/UX thumbnails. I plan on expanding this to Adobe XD and updating the Illustrator version in the near future.

I love making things this way because sketching these things out can turn out pretty tedious. But you’re more than welcome to do this with pen and paper as well.

The UI

After rounding out the routes of the user flow, I start to imagine what I need to create for the working MVP (minimum viable product) and sketch that out. This is mainly just for user face elements rather than full designs, but it’s important to understand how you want to lay things out. You can see on the left here, I’ve got user elements sketched out, and on the right, an example of possible mobile layouts. It’s a sketch vs trying to hard-bake things as pixel perfect.

With any UI design, there are so many things to consider. But I always try to start my UI designs as a mobile-first solution, seeing that the use of mobile phones to access apps and websites is reaching closer and closer to 100% of internet traffic. I want to make sure that I don’t make this painfully difficult for them to use on their devices.

After getting a good feel, I’ll start to move my process to digital. Now that I have a good feel for using Adobe XD, I began creating screens that map to the routes and actions that I’ve outlined in the UX user flow chart.

The beauty of working in Adobe XD is that you’re able to connect these screens into a clickable prototype. You can see though how messy this may become if you didn’t have that user flow chart to compare it to. All of those blue lines below are the routes that happen from one single element on screen. These are things that we sometimes forget to think about as UI designers, that each one of these will need to be templated in code.

Where do we go from here?

Refining the concept and the thesis.

I take what we did all throughout the steps above and refine, get feedback, and continue building out the product.

Because this is my own product and I’m a solopreneur making this by myself, marketing, design, development, and ux all fall on my own shoulders. I expect though that as long as I get the first mvp out, I can continue improving the product as I go.

So if you wanted to check out what I have created so far, you can check this link for the prototype out. There’s nothing here that’s completely ironed out, but this gives you a good sense of what I plan on creating.

I will still have to continue working on the actual visuals, and I’m coding this all out myself, but you can expect that all of this will function in the general manner that you have below.

I’ll probably do the progress updates for this external from the newsletter, but know that these are the steps that I take to build out the UX design of my projects. If you want to keep up on progress and see how things are going, send me a message within the community or reply to the newsletter and I’ll keep you in the loop.

If you want early access to the community 2.0 as I get it out, make sure you join us in the community and you’ll have access to everything we’re doing now, and anything we’re working on in the future.

This process is not glamorous or sexy, but this helps me create the best experience I can for the people that I intend to use this product. So I hope you can take some extra steps necessary to create the best experience for your intended audience as well.

If you have questions or want clarification on any of the areas that I talk about, let me know and I’d be happy to do so.


Darian Rosebrook, Compass of Design

Originally posted on Compass of Design on Apr 19, 2018

Let's Get in Contact

* All Fields Required

Thank you!

I'll review the responses here and respond to you as soon as I can. Thanks!