image credit: Shutterstock
Most entrepreneurs excel at communicating their business vision, but when it comes to websites and mobile apps, they sometimes lack the background to explain the finer details of what they are seeking.
If entrepreneurs simply let a product developer take the reins, they may be surprised and even frustrated when the end result is inconsistent with the vision. To minimize misunderstanding and save time and money, entrepreneurs should learn how to sketch board, wireframe and prototype their ideas, web pages and the screens of their application.
If this all sounds too technical, don't worry. Below are tools and tips that can help improve communication between you and your software engineer:
1. Sketch boards and storyboards:Sketch boarding is a simple technique that doesn't require any technology. Using a pen and paper, you should think through the specific parts of the user interface and draw a sketch for each of your application screens. You want to create a lot of quick sketches without worrying about how they look, discuss them and your ideas with your team, and pick the best solution.
Next, develop what's called the "user flow." This refers to how your user will navigate through and interact with all the screens and pages in your application. You can use tools such as templates and special markers when sketching out the user experience.
The sketches you create are also known as a storyboard, and the important thing with storyboards is to find the most optimal path for the user to accomplish a task. Because it's easy to shuffle sketches around, you can explore many possible solutions within minutes.
Related: 10 Must-Know Tech Terms, Translated
2. Flowcharts: In a flowchart, you use pre-defined symbols to represent each step of the process. The symbols are linked together with arrows showing the process flow direction.
The most common flow chart symbols are:
As an entrepreneur, you should use flowcharts to visually communicate your desired processes and user flows to developers. When you discuss flowcharts with your developers, you can identify flaws, bottlenecks and inefficiencies in the flow or process.
As a guide for creating your own flowcharts, you can reference a sample I created for our development team for the TechSpeak for Entrepreneurs event registration.
3. Business use cases: These explain how you should deal with specific situations. For example, if you have a web application with an event registration system, you might want to define how a user purchases a ticket, how a payment is processed and how refunds are issued.
For making refunds on canceled registrations, business use cases could include the following:
- If the user cancels within 30 days of the event start date, refund 100 percent of the registration fee.
- If the user cancels within 15 days of the event start date, refund 50 percent of the registration fee.
- If the user cancels within seven days of the event start date, don't issue any refund.
It's important to define these situational use cases for developers because they probably won't be familiar with the inner workings of your business.
Related: How to Scout for Coders with Confidence
4. Wireframe with annotations and interaction flow: A wireframe is a visual guide that represents the blueprint of a web page and shows what it does. A wireframe usually contains the layout of the content, page elements and website navigation system and shows how they work together. Annotations are symbols used to add notes and details for developers about specific features and interactions.
As a guide, you can reference a sample wireframe I created for our development team for the TechSpeak for Entrepreneurs upcoming events page.
You can draw wireframe layouts using PowerPoint or more sophisticated layout tools such as Balsamiq or Omnigraffle ($79 to $199 for a license). If you need help, you can hire a wireframe expert, also known as a user experience designer, to guide you through this process.
5. Click-through prototypes with links: Click-through prototypes are clickable wireframes that allow users to interact with the screens. The first step is to create a wireframe for each of your pages. Then, you can connect the pages using the links feature that most wireframe tools provide.
Prototypes bring the screens to life, helping you see and understand the problem you are trying to solve and uncover any potential usability issues.
Related: 5 Things That Belong on the Front Page of Your Website