Why having a UI/UX workflow is awesome and how to build your own
I always get comments and questions from clients, co-workers, friends and fellow designers about my UI/UX Design process. I thought I would make an extensive guide on my workflow, the approach and the tools I use from the beginning to the end of a typical project.
So here it is: The definitive Shibi Designs workflow!
Developing your own process is almost as important as developing your own design style
Phase 1: Gathering specs & requirements
Although often neglected by many less experienced designers, this is perhaps the most important aspect of the entire work. This stage pretty much makes or breaks the project. A tight and defined scope usually ensures a smooth process and enables you, as a project manager, to know that you are on the same page as your client. During your initial kickoff meeting, I ask every question I can think of about the product’s features, flow, target demographic, competition etc.
As a designer, you may think that your only concern is ultimately the design of the product, which may be true for certain specialized design roles (I’m looking at you Product Designers). I personally like to think of myself as a Design Consultant & Project Manager. I believe that my role requires the understanding of business goals and adapting my design expertise to push for the achievement of those goals within a given time frame & budget.
This step obviously requires A LOT of communication with the client. For me, it usually involves many brainstorming sessions, group Skype calls, sketching ideas etc. The deliverable for this phase is a simple PDF “MVP Overview”, outlining the specs of the app/product and documenting all brainstorming findings & sketches.
Phase 2: Laying down the foundations
The journey of a thousand miles begins with a single step
This is one of my favorite part of the process! Once it is pretty clear what the project will involve, it is now time to use some good old productivity hacks and break down bigger goals into smaller tasks. For this, I like to use Trello. If you are a personal development & productivity freak like myself, you’re going to love this phase!
Before we dive into using Trello for task management, I always want to make sure I’m turning on my time tracking software. I absolutely LOVE using Toggl for this!
This is very important (to me) as it serves 2 purposes:
- Billing clients properly & accurately
- Allocating time appropriately
If I’m going to quote 15 billable hours for a web project for instance, I certainly wouldn’t want to spend 10 hours on market research and run out of time or worse (arguably), have to rush and provide low quality work.
Now, onto Trello. When I joined the team at Dumpster as a UI/UX Designer, I was thrilled to find out they used Trello for task management and task assignment. With its card-based system, it enables our team to use a SCRUM-like management process that allows for fast production and nearly instant feedback. If you aren’t using it already, I don’t know what are you waiting for!
Phase 3: Research & Best Practices
This phase is pretty straightforward. The goals here are the following:
- Research products with similar features and target users
- Identify potential competitors, what are they doing wrong/right?
- Establish best practices
As a general rule of thumb, I try to spend as much time as possible browsing the Google Play Store and the App Store, downloading and trying various apps. Not only does that keep me in touch with industry trends and what’s popular, it builds a critical eye for common practices, things that work and things that don’t etc..
However, if you don’t have time to spend your entire day (supposedly) user-testing Pokemon Go like me, I would still strongly encourage browsing the app stores for products that are similar to the ones you are working on. That will give you a pretty good idea on what to adopt, what to avoid and you can even checkout the user feedback to make sure you don’t repeat the same mistakes.
By others’ faults, the wise correct their own
Once you are finally ready to grab your pen & paper and start sketching, don’t! While you may feel the urge to start implementing, it’s very important to understand what are the best ways to implement your features and especially why.
For that, UI Patterns is the best!
By not only listing different ways of solving common design problems, but also rationalizing about how, when, and why such solutions should be used, it is the goal to create a tool that will help end feature debates, get a clear understanding of why we’re doing what we’re doing, and why we’re not doing what we’re not doing. — UI Patterns
Ok, you’re now finally able to start sketching and prototyping. Let’s get to the next phase!
Phase 4: Low Fidelity Prototyping (UX)
While nothing beats pen & paper for sketches, there are many products you can use to develop your low fidelity wireframes in addition to your sketches.
Here are a few you can pick from:
- InVision
- Omnigraffle
- Balsamiq
- Photoshop
- UXPin
- Axure
Of course there are many different ones. Other than Photoshop, I’ve personally used InVision, Omnigraffle and Balsamiq.
Different services allow you to accomplish different things depending on your goals. I love InVision because it’s free, has clickable prototypes that you can export and view on your mobile device and it allows users to add notes and feedback to the prototype which makes it a great tool to collaborate remotely. Try them out and find out which ones work best for your own needs.
Phase 5: High Fidelity Prototype (UI)
Onto the pretty stuff! If you are a Visual Designer at heart more than a Product Designer, you know this is the moment you’ve been waiting for this whole time…but before, we need to get some inspiration! I promise it won’t be long before we get our hands wet with Photoshop/Sketch.
For visual inspiration, the classics are always a safe bet. Behance and Dribbble showcase some truly amazing work from top designers around the world. These artists often stretch the boundaries of usability to produce UI masterpieces. We’ve already done our usability research so we don’t have to worry about getting inspired by something that we won’t be able to implement.
If you have a creative block on a particular screen and need some specific direction on how to handle a particular situation on a mobile app, I also highly recommend Mobile Patterns. This awesome site features examples of good UI from some of the most used apps (Facebook, Twitter, Instagram etc) for specific types of screens.
What’s really cool about Mobile Patterns is that the screens are aggregated based on a screen-type hierarchy. That means you can look for Newsfeed screens only and analyze how various app designers handle their Newsfeed screens before making yours.
Conclusion
The largest room in the world is the room for improvement
I hope you liked this deep dive into my process and workflow. It is and will always be a work in progress. The more your workflow/process is refined, the more clients you will be able to provide high quality work to. You will also be able to focus more on the creative part of the work without neglecting the essential business and usability aspects of your products.
If you have any questions or stories about your workflow, the tools that you use and the process that help you overcome creative blocks, please do share them in the comments, I’d love to hear what you got!
Thanks!
