The Iterative Design process at TokBox
We had the opportunity to talk with Charles Diggs about his work and, about how he incorporates web and mobile prototyping into his design process.
Looking for a flexible prototyping tool to create, iterate and test
To translate his team ideas and his own into end user experiences, the designers at TokBox work with different tools. Their everyday workflow incorporates prototyping tools to help them start designing fast and right. They start with quick clickthroughs to validate ideas and then develop them into high-fidelity prototypes as the ideas evolve with feedback and testing.
On previous prototyping projects, Charles found himself doing a lot of rework because of simple interface tweaks that needed to be made. What could’ve been small changes to screens in his web wireframe turned up being long hours redesigning entire screens. The prototyping tool he was using at the time didn’t have dynamic enough features and did not give him enough control over the details of his prototype design.
It was time for him to start looking for a more efficient tool that would allow him to make rapid iterations in real-time without having to start over when editing screens or flows.
For Charles, the real value of a prototyping tool comes from its time-saving functionalities and features. Because in the end all prototyping tools will get the message across to the client or customer, if you put that many hours into it. His new prototyping tool would need to be one that allows him to get his message across in the most efficient way.
“My experience with other prototyping tools wasn’t bad. The issue for me though, was needing to jump back into the design program to make corrections, and then jump back into the prototyping tool again.”
The prototyping tool should help him translate his ideas into tangible and clickable designs and allow him to develop those ideas through rapid iteration and collaboration with his team.
We, better than anyone, know the key to any successful prototype is to allow for quick design and rapid iteration based on user testing and feedback.
The design process: get the best out of your prototype
After doing his research and taking into account his upcoming web project — a login system for a global navigation website, Charles went for the prototyping tool a coworker first recommended him. Justinmind seemed to have everything he was looking for, now he just had to put it to work.
“A coworker told me about it. I had a project coming up that would need prototyping so I looked it up. It definitely seemed to fit my needs.”
Charles explains how he introduced Justinmind into his workflow and how he incorporated it into each step of the design process he follows at TokBox.
Here’s a simplified look into how the design process goes for Charles, it basically involves multiple iterations of a four-step process:
Evaluating different ideas to convert the initial idea into an optimal experience that achieves the expected goals is key to getting started. Once the idea and goals are clear, a quick clickthrough can be created.
From the very beginning, Justinmind proves itself useful — with its pre-designed widget libraries and functional widgets, Justinmind makes this step easy and fast. The challenge here is achieving a design solution fast while showing the overall flow clearly. Justinmind’s rapid design method lets you build a clear mockup that you can show to evaluate whether it meets the corresponding needs and expectations.
Team members may all have their own viewpoint on how the UI and UX should be and how it should function. During team reviews, the team members of the project review it and give their feedback. Once the content and features are set and validated, a more detailed prototype can be built.
Based on feedback, the design is further developed into a high fidelity prototype. Having detailed screens and a complete view of the overall end user experience, allows for real-time testing, iteration and validation. Mapping and testing the entire design enables the designer and reviewers to consider to overall UI and flow as well as the details and, to check for requirements and specifications compliance. However, this only makes sense if you can do iteration fast, without having to start over for every small change.
“It’s pretty cool, I really love how you can experience a mobile prototype on the actual mobile phone with the app”
The web or mobile prototype can be shared with the product team at large and with developers (and executives if necessary) before development starts.
Turning design mockups into rich prototypes fast with ready to use working widgets
Charles was able to create, and share, more robust prototypes with a higher degree of creative control. All the development specifications and requirements for the project were easy to visualize through the prototype. Moreover, the whole iteration process was made simple and, he was able to create the login process quickly and validate it with broader team members and developers.
Building interactive wireframes rapidly provided him with early and constant feedback to improve the final design and ensured him that the project was moving in the right direction. Early design decisions based on content and, functional and visual fidelity, results in avoiding possible re-work before development work is undertaken.
“What differentiates Justinmind from other prototyping tools I’ve used is the granular level of creative control that the designer has access to.”
The level of interactivity he was able to add by using drag and drop, fully functional widgets and cards, was high to say the least. There is wide variety of rich libraries of ready to use elements and working widgets, that made building a highly interactive web prototype fast and easy, with these libraries the main difference is that the hard work is already done for you.
Charles is a visual interaction designer at TokBox where he focuses on creating user interactions and visual systems. As an interaction designer, Charles is in charge of creating high fidelity prototypes to test different end user experiences. Before TokBox, he worked for different companies in health and wellness and, entertainment. He has worked for companies such as Mattel and Disney.
Based out of San Francisco, TokBox is a web based communications platform that offers “an industry leading suite of features to power real-time communications” its features include: mobile and web SDKs, archiving, text chat, messaging, analytics, firewall traversal, multi-party support, Internet Explorer plugin and more. Their open source platform helps developers and enterprises respond to the real-time video needs of their own customers and clients.
You can download Justinmind along with its pre-designed widget libraries to see how it can fit your design workflow, after all it is free to try!
Originally published at blog.justinmind.com.
