What makes a great design besides having an amazing team or a genius creative mind? Process is the number one thing to not only creating a crafty design, but also creating the entire experience from the client to their end-user. I have had the chance to work with some of the brightest teams and individuals, and I have learned a lot about process and how to implement a great experience atop of a pretty web or mobile application. I am going to share to you what we as a team here at Mossio do with our client base.
- Client Communication: First, we have to manage the incoming inquiries that we receive from prospective clients. We do this using FormKeep and port incoming emails to a Trello board called Sales. This helps keep everything in line and gives our team a high level overview of clients that have contacted us, clients we’re in communication with, rejected and accepted proposals. Trello has the ability to use labels per card so getting a visual overview is like cake. Once we establish communication with clients, each reply from our team and each client response is recorded in Trello. This helps with transparency with our team to make sure that everyone is on the same page if and when we take on the project.
- Tools of the Trade: Getting the job done is only part of the battle. The other half of the fight is making sure that you’re using the right tools that your clients can use to help them be apart of the action. We don’t limit our team to one design tool or another, and we want each team member to use the design tools they are most comfortable with, and what they produce the best results in. In regards with other things such as client communication, apps for feedback loops and delivery we have a more unified structure. We first use Trello for all of our projects and each project has columns which give the client a high level overview of what our team is working on. Invision is our go to tool for client feedback, and flowcharting. For communication we use Slack. Each client gets their own Slack chatroom and everyone that is involved in the project on their team and the Mossio team is invited to that room for communication.
- Daily Rituals: With each project it’s important to have rituals. Communication about the project to our clients is super important. That’s why we have daily standups. During these standups, we talk about what the team accomplished with their project the previous day, we also touch base on what we plan to accomplish the current day. Last but certainly not least, we go into a brief discussion if there is anything blocking us from completing certain tasks within the project. These standups ensure that everyone is on the same page in regard to the project. We keep these standups at the same time everyday as well and through the same medium, through Google Hangouts.
- Weekly Retrospectives: It’s essential to every project that we work on to have a weekly retrospective with the client. Our weekly retrospectives help keep focus on both sides of the spectrum. We don’t only discuss what didn’t go well with the project, but we talk about what went well in the project that week as well. This helps the entire team to see the big picture that work is being done, it’s being done effectively and if it’s not here’s the reasons why. Mossio tries to keep projects on the straightest street possible, but when things go a skew, we like to have action items for those on how we’re going to correct it.
All Good Things Must Have Process
So now that we’ve talked about the tools, the communication, daily rituals and retrospectives, let’s talk about the process in which we come up with ideas.
During our initial week with clients, we typically go through a discovery phase. During this phase we have extensive meetings with the client, their team and ours. We discuss the current problem of their application, we talk about assumptions, we paper sketch, whiteboard, and ultimately user test our ideas before putting them on Sketch or Photoshop.
- Wireframing: Unfortunately, wireframe prototyping has gone overlooked by many freelance designers and even sometimes agencies. However, we can’t forget the importance of a low fidelity wireframe. Mossio uses a combination of Balsamiq and Sketch to create these wireframes for two reasons. The reasons are simple, time and value. We need to quickly iterate what the user experience should be like in terms of a layout and navigation structure. We feel layout and navigation are two of the most important components when creating the foundation of a web or mobile application. So the time it takes in a low fidelity setting is much less than time to create a color comp blindly. The value in wireframing lies within being able to piece together an exceptional user experience while not having creative thoughts clutter you mind with color choices, typography and iconography among other things.
- Color Comps: After we’re all set with wireframes and the client has signed off on these wireframes through Invision, we typically move right along the path of creativity into color comps. Color comps are the concept, the design of the application in which we just made wireframes for. During this phase of the project, the Mossio team will generally start with a moodboard using Inboard App, Dribbble, Behance or Pinterest. These moodboards help us with inpsiration for color choices, typography treatment, imagry and iconography. Also during this phase, we will start to put together what we call Brandboards. Brandboards will define a the colors we’ve chosen by Hex, RGB and Pantone color tones. We will also include iconography style within this document. The icons we put on the Brandboard are not nessessarly icons we’re going to use in the application, but it gives a sense to the design team and to the client what styles we think work best in real world environment. Within the Brandboard we generally will outline typography choices in the form of a header, sub header and paragraph styles. Included will be CSS components so the development team can quickly add these to the stylesheet without too much effort. Color comps are then built, and presented to the client for review.
- Development: If Mossio is developing the product in which we are designing, we will get started with adding the development stack on Github. Typically we work in a Rails environment even on the front facing websites. If we are just doing HTML / CSS / Javascript or jQuery, we will use a static generator such as Middleman so that we can develop in languages we want to use and compile in normal HTML / CSS output. Our typical static development stack consists of Middleman, Bourbon, Neat, and Refills. Bourbon is a SASS mixin library and really helps not only speed up development time, but it’s all clean and tidy in terms of CSS organization. Neat is what we use to develop sites and applications on the Grid. It’s a really cool tool to use and makes building responsive websites and applications a snap. Refills is plug and play javascript components for projects. The development phase is pretty basic, we use github for version control. Mossio has high standards in our code base and believe that the code should be just as clean as the design is lays behind. With that said, we like our development team to commit and push often. Everyone involved on the project must work off their own branch. Branch names should be very specific to what the team member is working on. Pull requests are then done by the developer to have the code reviewed by peers before merging it into master. This process ensures a clean code base to compliment the design.
- Delivery: The best part of the project is seeing the hard work from everyone involved actually come to life on the web or in the App Store. Delivery is an important part of the process as well. Mossio creates a folder (typically in Dropbox) that is very organized in terms of what is there. The folder structure is generally like this: A folder for UX (this houses all the wireframe source files and exported files), A folder for UI (this houses all the color comps, branding boards, branding material, etc) The UI folder is generally structured by UI component. For example if we’re working on an application that involved a dashboard and a campaign manager there woud be two folders, one for Dashboard and one for Campaign Manager. Each folder would hold the source files as well as exported formats of the color comps. Other folders in the tree may include fonts, moodboards, iconograpy, etc. It’s important to have a solid delivery so that clients and even your own team can easily find certain files and access them at any point.
Four Day Work Week…What?!
That’s right, Mossio works on client work 4 days out of the work week. Typically this is done Monday through Thursday. Why? The answer to that is simple. Team building! On Fridays we generally do design exercises where the whole team is involved in one way or another. Design exercises could be anything that we’re super passionate about at the time. Whether it’s working on an internal web or mobile application, or a design exploration of a product or service we use and love but their application or website could use some TLC. We’ve actually landed a few projects by doing design explorations for companies. So in return we’ve helped bring our business closer by bringing the team that runs it closer to each other, and we’ve built client relationships off of our design explorations. It’s a win win situation.
We also like to have our team rested, so that extra day can sometimes help with getting the creative mind rejuvenated to start back up again the following week cranking out extremely well put together user interfaces and exceptional user experiences.
The Conclusion
The biggest part to take away from this article is simply that in order to build really great products from really great ideas is to have an amazing process behind your creativity. It’s important to have client communication and show that you have a grasp on the product you’re working with. It’s essential to have the right tools for the job so that it not only makes your life easier, but your clients as well.
The cornerstone of any successful project that is delivered and in the wild will encompass the communication, the tools and of course the process in which you get your projects done. Keep in mind that a design process and even the tools you use will be ever evolving into bigger and better things.
