MockFlow updates
MockFlow updates
mockflow.com

Build your Customer Journey Map inside MockFlow!

 

New

  

Screenshot 2022-04-13 at 7.45.06 AM.png

Create beautiful Customer Journey maps within minutes using this powerful CJM power-up, to visually represent the stages customers go through when interacting with a company or product, or UI.

CJM is an essential piece of your Product design as it helps to identify the different points of contact with a brand or company, and the interactions that exist along the customer journey.

It helps with the following use cases:

  • Identify pain points and barriers that prevent users from reaching their goals

  • See how users interact with your company’s website, apps or services at every stage of their experience

  • Improve your UX

  • Understand what parts of your product/service are confusing for users and need further explanation/optimization


With our new power-up, you can now create these CJMs with little/no design effort.

VIdeo1.gif

Here are the main feature highlights :

When creating a customer journey map, you have two options: starting from scratch or using a template.

  1. Adding stages and sections is a simple process - just click and go! Think about the various stages your customer journey encompasses, and then add them as stages in your map. Once you have the basics down, you can add more detailed information to each stage by creating sections.

  2. Icon Libraries - CJM doesn't have to be boring! Spice it up with some fun icons from the built-in library. You can color and resize them to fit your specific theme.

  3. Experience graphs are an essential component inside a CJM. Add these with ease using the graph section type and use icons/labels to add more meaning

  4. Use the image section type to break up the text and add visual interest by including illustrations or any other related images.

You can change the color of the stage and section headers to create a customized look. The text color is also automatically updated to make it easier to read.

Once you're done, you can pin it to the design space to share it within the team or export it as an image or csv for using it elsewhere as in your reports or proposals. Check out these sample CJMs created with MockFlow CJM builder power-up and get started

To install this powerup in your MockFlow account, click here.

Create UI instructional guides in a snap with Step Guide Creator!

 

New

  

b2d86e28-39b0-4b1a-a7ef-2e7e12d80242.png

Creating an engaging, professional looking, and easy-to-follow step guide to explain your UI is a crucial part of any product design process.

You can create guides that easily walk other people through a process, whether it’s UI flow, function or feature with MockFlow’s Step-Guide creator.

Here are the top reasons why you should use the Step-Guide Creator:

  • To create a helpful and brief UI guide, you'll need to provide different types of steps. These could be text-based, image-based, video-based, or even embedding cloud content. By providing this variety of content, your readers will be able to follow along with your instructions more easily.

D126b068b9884cf217356202d07c3fb26.png

  • When you choose the step type as image, you have the option to annotate the image without leaving the creator. Add shapes, text effects, and cool stickers to help your stakeholder understand your instructions better

ff.png

  • Now more than ever, embedding rich media is essential to creating an effective step guide. Adding loom videos, MockFlow wireframes, Figma files and more with the embed option will make your step guide more engaging and informative.

  • When you're finished creating your content, you can export it as a PDF, Helpscout, Zendesk, or FreshDesk code to import directly into your support portals.

79a417d3-a292-4a26-8858-eb5a733702a9.png

  • Or, you can create a public link and share it with anyone.

In addition to the powerup edition. it is also available as a free public editor at this link. If you find it useful, please feel free to share the link with them. We created it as a way of giving back to the community. Thank you for using it!

Here are example stepguides created using this editor:

MockFlow partners with Mobile UX London

Twitter_posts (1).gif

#madewithmockflow

An engaging and fun platform to showcase your talent and get rewarded for it.

We know you are passionate about designs. It's time you show your best designs made with MockFlow to the world and win a free pass to Mobile UX London's 4th edition of Festival of UX and Design and a free subscription to this amazing tool (MockFlow) you love so much.

About the event

Mobile UX London (MUXL) - 4th Festival of UX & Design, 21st-25th of March 2022!

Following the success of previous editions, this five days online event will consist of 20+ renowned speakers, live panels Q&A, interactive workshops as well as networking opportunities to

connect with up to 800 UX experts globally, and all available straight from your home!

You will hear from industry experts working at Google, Microsoft, Multiverse, IBM, and more.

The festival will cover topics such as Human-Centred Design, Service Designing the Future, Design Systems, and UX Psychology.

To know more, visit this link.

How to Participate in #madewithmockflow

Choose a design that you have already created using MockFlow or make a new one.

Upload it on Twitter, LinkedIn, or Instagram

In the caption, mention two features of MockFlow you love the most.

Tag our page and use the hashtag #madewithmockflow. Add your project public URL in the comments (of your post).

Prizes

1st: 1 free Pass and six months Free subscription of MockFlow

2nd: 1 free Pass and three months Free subscription of MockFlow

3rd: 1 free Pass and 1-month Free subscription of MockFlow

Winning Criteria

Posts with a maximum number of shares, comments, and likes win the prize.

(Basic evaluation will be done by the MockFlow design team first.)

Terms and Conditions

Submissions are open only until March 16.

Designs must be made with MockFlow.

The caption must mention the two most loved features of MockFlow.

Add your project public URL in the comments (of your post).

The free subscription offer is valid only for users who does not already have a paid membership with MockFlow.

Time to save your development time - with our new UI builders!

 

New

  

UI Builder Power-up.png

When starting any new web project, the most time-consuming part is building the initial layout. What if you could skip through the hassle of starting from scratch on your next project?

That’s exactly what our new release is all about. With the UI Builder power-up, you can now jumpstart your UI development by creating the boilerplate with a simple block stacking interface, just like building with lego blocks. You can choose between Bootstrap and the Tailwind library for building your UI.  We have quite a few layouts of the different sections like header, hero, features, pricing, etc (and many more) for you to choose from. Just choose the style for each section and add the blocks and your boilerplate is ready!

You can now export the HTML and CSS for the created layout and start editing only the content and the images to have the website ready.  Or, you can save this layout as a wireframe to have it as a base/ template for your further edits and pass the wireframe to the developer once you are done with the design.

Here is a short walkthrough for our UI builders and how you can use them!

  • Choose the Bootstrap5 UI builder or the Tailwind3 UI builder from the Add Pinned Powerups section inside your Design space.

sale.gif

  • Click on ‘Add Block’ to view the available blocks - The sections are listed on the left and when you click on each section, the available layouts of that section will be displayed and you can choose the one that fits your design.

Your On.gif

  • You can easily change the layout of a page by stacking blocks in different ways. Experiment with different block layouts to see which looks best.

fresh.gif

  • You can create multiple pages in the same manner and check for their responsiveness by switching between desktop, tab and mobile views.

Add a subheading.gif

Click on export to download the code or save as wireframe to edit further.

Well, that’s not all. You can create your own custom blocks with our in-built editor that has an instant preview option and a code validator. You can create and share components within your team making collaboration even better between developers & designers.

If you liked this power-up, you can invite your friends outside MockFlow too to try it free with the public version (with a few limitations).

Public editors

Now On-board designs and UI for your stakeholders

 

New

  

Screenshot 2022-02-14 at 1.51.48 PM.png

Product tours are the go-to option today for step-by-step guidance for taking the user through the product. This made us think, why not create a tour of your product at the design stage itself?  The goal of a design tour is to provide a more in-depth look at the UI and its functions. Design tours can be used as a way to show off designs, but they also have other uses.

Design tours are an innovative new way for designers to share their work with others without having to go through lengthy explanations or descriptions. The interactive aspect provides viewers with the ability to see what the designer has envisioned from start to finish, giving them a better understanding of how it works and can be a brilliant alternative to sharing only the design over emails or links.

And, MockFlow makes it super-easy to create these design tours with the new Design Onboard power-up!

1. Create steps with point and click

Just import the design - either as a wireframe from the UI drawing project or an exported image of your design from elsewhere and start adding your steps.

stepsadd_f.gif

2. View all steps and edit, reorder and reposition the step indicator at any time

stepsrev_f.gif

3. Preview your tour before sharing and make any refinements.

stepsrev_f.gif

4. Share the tour! Pin the design tour to your design space, if your team members are already on board. Or create a public URL and share it with anyone.

share_f.gif

Isn’t that cool? Say goodbye to phone calls and meetings to explain your designs over and over again, Use design tours instead!

Install this powerup from MockStore

Launching 'User Testing' in MockFlow

 

New

  

Screenshot 2022-01-31 at 12.45.33 PM.png

Design, when backed by research, always produces a better product. User testing is an essential research part of the product design process that helps to validate your designs with real users who form your target audience.

There are multiple junctures in the product design journey where you develop more than one variation for your design - be it the logo, icon, hero text, typography, design layouts, and many more. These are often discussed within the team, and the decisions are made.

With User testing, you can now involve real users and get to know what appeals more to them and helps you make a choice based on actual quantitative data. This type of test is called Preference Testing.

You can now conduct user testing for your designs without leaving MockFlow. Be it the UI drawings you have created within Wireframe editor or any design asset images.

Currently User Testing supports only Preference test. More test types are in the pipeline and will be released shortly.

Here are some important points in User Testing powerup:

Customized welcome and thank you message

It is important to let the users know the background of any user test. You can add this in the welcome message so that you brief the users before they take the test. Also, you can configure if you want to collect the user information before the test or leave it anonymous

Welcome Screen.png

Add upto 6 variations for each question

Each preference test type block has a question and an option to attach the wireframe pages as variations or upload images from your system. There can be a maximum of 6 variations presented to the user. The order of the images are randomized when it is presented to the users, so that users are not biased to the first or the last choice.

Variations.png

Analyze responses and reports

Once the test is published and the responses start coming in, you can analyze them from right inside the power-up. There is not much probe required with the Preference test, as you can directly see which variation was the top choice among the users. Also, you can analyse if it was a clear winner or is in close competition with another. You can also filter each user’s response to understand any pattern among the different questions in one test. And, what more? You can share the results with your team by adding them to your design space or creating a separate public link for the same.

Responsescreen.png

User testing involves many other methods such as survey test, click test and more. We will adding support to these test types too in the power-up soon.

Introducing in-frame collaboration of video assets

 

New

  

comments2..gif

We released the inline comments feature for image files a couple of weeks ago and now it is available for video files too!

When it comes to UI design, video assets are inevitable as your website's home page video or short animation videos. Just like logos and other graphic assets, video assets also need to be reviewed, points discussed and reworked on before they are approved.

Collaborating on video assets comes with its own set of challenges.The large file size is just one of them. Getting your team to sync on the review with feedbacks on different aspects and scenes of the video is the real challenge. And when there are more members on the team, it just adds up to chaos.

It can be hard to comprehend the comments to the exact the time frame in the video. And when there are multiple comments from different team members referencing to different frames of the video, it can add up to the confusion. Sending back and forth emails or messages can bring down the productivity of the entire collaboration process.

You can now count on MockFlow design files to ease this task. Uploading your video asset to the project design space is the first step and all your team members are notified and can instantly access and view it.

With the inline comments for video, now you can go to comments view and:

  • Frame based comments: If you are a reviewer, add comments as you watch the video - don’t bother to note down the time, MockFlow does it for you.

1.gif

  • Real-time discussions: View the comments added by your team members in an overview with the timestamps on the sidebar. Click on one to start a thread. Collaborate real time!

2.gif

  • Auto-view comments as video plays: Just play the video to view the comments added - comment indicators on the track bar` and the full comments on the sidebar - allow you to go with the flow.

3.gif

Now Build Your Own Component (BYOC) in MockFlow

 

New

  

file-48A4lwDzWK.png

BYOC stands for "Build Your Own Component". It is essentially a component by itself that allows to create a new elements from scratch by coding in HTML/CSS.

It provides the following main benefits:

Create custom components that is possible only with HTML/CSS

Creating a coloured shadow, or a complex polygon or a 3D transform is not possible with the existing components available in MockFlow. But by using BYOC, you can bring any css component that you want it to be part of your wireframe. Just copy-paste the code inside the BYOC editor for it to display.

Screenshot 2022-01-13 at 3.18.23 PM.png

Visual editing of component

Once created, BYOC can be used by non-coders for making superficial changes with its WYSIWYG visual editor. Designers can change text, replace font family and also try different images easily without touching its code

Screenshot 2022-01-13 at 3.21.06 PM.png

Bridge designer-developer workflow with first-class Tailwind support

This is one of the points that makes BYOC quite useful as a feature to connect developers with designers in your team. If your team already has a design system of Tailwind components, then they can be directly be imported as BYOC components inside the wireframe. So designers spend less time re-creating the UI to make changes. Also the imported Tailwind components can be modified inside the editor with live preview.

Screenshot 2022-01-13 at 3.28.27 PM.png

Generate specs

Since BYOC is written in pure code, when the wireframe is shared with your clients or developers, They can inspect BYOC components in review mode to generate specs. This makes hand-off smooth and implementation faster.

MockFlow benefits

As BYOC by itself a MockFlow component, it can be resized, moved, duplicated, linked, exported, and also saved as custom component part of your UI packs.

Screenshot 2022-01-13 at 3.46.55 PM.png

That's not all, we anticipate more interesting features coming soon to BYOC, like native support of reactjs and vue based components in BYOC2.

BYOC feature is available to all paid plans starting today.

Introducing live embed for UI drawings

 

New

  

Screenshot 2021-12-27 at 10.24.57 PM.png

We are happy to conclude 2021 with another big feature release. The latest version of MockFlow introduces 'live embeds' for wireframes with preview links. Just like how YouTube videos can be embedded anywhere in webpages, blogs and portals, 'Live embeds' allows users to embed UI drawings.

It is called 'live' for a reason because this embed updates in real-time when changes are made to the project. It also comes with several other functions as listed below:

  • Embeds can be secured with Password protection

Screenshot 2021-12-27 at 9.44.24 PM.png

  • Option to show page listing within embed

Screenshot 2021-12-27 at 9.46.06 PM.png

  • Option to set default zoom for the embed. This helps to set an optimal view based on wireframe page size and your embed frame size.

Screenshot 2021-12-27 at 9.49.34 PM.png

  • Full screen mode - Click full screen icon to enlarge embed to occupy the entire screen

t1.gif

How it works?

  1. Click menu option in wireframe project and select 'Create link'
  2. Or 'View link' if link is already created
  3. After link is created, select 'Get embed code'
  4. Tweak embed options and copy the code
  5. Paste code in your webpage, portal or online document site like Notion.so

Wish all of you a very happy and prosperous 2022. We also hope to start the new year on a big note with many new features to keep track on our mission to make product design accessible for all.

Launching In-image discussions for design files

 

New

  

Screenshot 2021-12-09 at 11.52.19 AM.png

Collaborating on creatives form one of the key steps in designing a product. This is where design files in MockFlow helps by centralizing important assets, iterating designs with versions and getting approvals. Today's big update for image files brings one more important feature which streamlines asset discussions with your team or clients.

Now add live in-image feedback and discuss with threads right on top of the image. Bring location and personality to your discussions using comment mode for Images. With user-profile based comment markers, get context of the area referred to and also the person who started the discussion. Everything is real-time so the whole user-experience of in-image discussion mimics an in-person meeting, which is great for remote collaboration.

Screenshot 2021-12-09 at 12.33.01 PM.png

Here are the highlights:

  • Comments are unobtrusive as they are shown only in comment mode
  • Notifications are sent to collaborators via browser, email and in-app
  • Each version in a design file have their own comments
  • Bubble indicators in markers show the number of comments in each thread
  • Markers can be moved and placed in a different location

Turn good design into great design with contextual discussions.

This feature is available only for image file formats now. However it will be soon available for videos too.