Hello world!

I'm excited to introduce Ballpark, a brand new product from the team at Marvel that makes research faster, easier and more inclusive for every team.

Over the last few years we've seen the explosion of companies becoming product and customer-led, with many maturing in ideation, design, prototype and shipping. Yet research and the process of understanding users still remains an isolated activity, with fragmented tooling.

The global pandemic has changed how we gather feedback too, with remote research now dominating how organisations gather feedback, with the decision to choose moderated or unmoderated often coming down to whether you settle for quality over quantity. It shouldn’t be this way.

Today's research tools are either too complex, specialised and expensive. That often means only a handful of team members can actually gather insights. Yet 90% of companies believe that customer experience and understanding users is everyone's role - so why don't we put the tools for research in everyone's hands?

Another big problem is that there simply aren't enough researchers to meet the demands of data hungry orgs. Many of the companies we talk to can only fulfil around 50-60% of research requests. That's only going to get worse as more companies become design-led.

That’s why we’re on a mission to democratise research and give everyone the power to get the answers that result in better customer experiences.

Through our experience of building Marvel, we’ve seen how simple and accessible software can empower millions of people to create and validate ideas. Whether that’s a wireframe, prototype, logo or tagline, we wanted to build something that was flexible enough to test anything.

We think you'll love what we've got in store:

Micro-tasks

We know that actions speak louder than words, and there’s only so much information that a text-based answer can give you.

That’s why we’ve created micro-tasks, a new way to get participants to carry out an action, such as completing a task on a prototype, live website, picking a preferred design or recalling information from memory.

Marvel and Figma prototype support

Avoid shipping poor experiences with features and flows that don’t convert by testing high and low-fidelity prototypes.

It doesn’t matter if it’s a wireframe or an all singing and dancing animated prototype, we support it all. That means you get as close to testing the real thing as possible, with no code required.

Unlimited users as standard

We believe that gathering research and insights should be democratised. The more people that can understand customers, the faster we can all solve problems.

That’s why there are no limits on how many team members you can add to your account, meaning every team gets a seat at the table and moves faster, together.

Collaboration and real-time editing

Understanding your users is a team sport, so we’ve added the ability to invite your team to create and review projects, as well as real-time editing of projects so you can work faster, together.

Video guides

Running moderated tests gives you high-quality insights but is often too time-consuming to scale beyond a handful of interviews.

We’ve solved that by enabling you to add your own pre-recorded video to help participants provide high-quality answers.

Scale to hundreds or even thousands of participants with a single test and get rich, detailed feedback without the time and effort.

Request responses in text, audio or video

Whether you have multiple-choice questions to answer or want to watch how participants interact with your website, Ballpark lets you decide on the type of responses you need.

And much, much more.

We believe that in the future, the only way for businesses to compete will be to deliver exceptional user experiences, and Ballpark is here to help.

Sign up for free and try Ballpark today!

Murat

The post Meet Ballpark – The new product research platform by Marvel appeared first on Marvel Blog.

Every designer is playing a part in the image and feeling that their users get from their products and companies. Interactions are influenced in a powerful and meaningful way, beyond just completing a task. Inclusive design isn’t new, but it’s becoming noticed more and more as companies begin to realise that it’s not only good for people and culture, but also good for business.

What is gender inclusive design?

Inclusive design is simply designing a product/service that is equally as accessible, engaging and effective for as many different users as possible. When we define this around gender, it’s ensuring the same for all who may be outside of the socially constructed binary gender markers (male/female).

The best way to ensure any design is gender inclusive, is to include the awareness within the design process itself.

Key Terms to Understand before starting

[gallery link="none" columns="1" size="full" ids="21259"]

This isn’t a glossary, but there are a few terms that should be familiar across the team before the journey begins. There are many more, but these should support in the beginning to ensure all team members have the same understanding:

Gender - It’s complex. It’s personal. It’s individual. It’s way beyond the realms of he/she.

Sex - This isn’t gender. We’ve split them into two bullet points to ensure this comes across! Sex refers to the biological differences between females, male and intersex people.

Gender expression (or presentation) - This can relate to how a person may look, dress or act that may affect how others perceive their gender. However, gender presentation isn’t an excuse to immediately apply a label. A persons pronouns are what they tell you they are, no matter what you may perceive from their expression.

Cisgender - This term refers to when a persons gender expression matches that of their assigned sex at birth. to give you an example. If a person were assigned male (sex) at birth and identify as a man (gender), they are a cisgender person. However, if you were assigned male (sex) at birth and identify as female/nonbinary (gender) you are not cisgender.

Trans - This is a term for people who’s sex at birth does not align with their gender.

How to use gender-inclusive language

• Avoid gendered words - Try not to use words such as ** “guys,” “girls,” “ladies,” “postman” “hostess”. With these, there is an implication that the person you’re trying to describe falls into a binary gender group. It most scalable to avoid gendered words as much as possible, to ensure you don’t segregate an audience.
• Normalise the use of They - Pronouns are really important. It’s always best to ask your subjects pronouns instead of making an assumption on their gender expression. Normalising the use of They/Them/Theirs means that you have less chance of making anyone feel excluded when talking to or about a group of people.
• Let a user define their name - In many cases, it can be difficult when a user is completing a form field that requires them to enter their legal name. Their legal name may not match their preferred name. When we use this data in communication or marketing it can be emotionally jarring to see it. Let the user tell you their name to avoid frustration or emotional upset.

Gender vs Sexuality

As a proud member of the LGBTQIA+ community, this is one of the most common mistakes that I have seen many make when reflecting on gender inclusivity. Gender and sexuality are very different. Whilst we talk about gender & sex, sex in this capacity is related to defined, socially constructed binary markers.

Sexuality is the word used to define the sexual feeling of attraction that we have towards another person. It’s just as deeply personal as gender, and should be approached with the same sensibility, however it has no impact on someones gender.

Create a vision of what inclusion looks like for you

[gallery link="none" columns="1" size="full" ids="21258"]

Within the Design process we often create a design system, focused on ensuring that all designers are creating content/products that live and breathe the brand image or ethos. This usually involves colours, typefaces etc.

Creating an Inclusion System can be a great step to ensuring that the designs/products being created by your team are not only on brand, but also represent the brands values of a gender neutral vision.

You can begin by reviewing the colour themes/typography to ensure they aren’t inherently feminine or masculine. Make sure your imagery represents a wide array of genders and isn’t too binary. Finally, if you’re going to use icons to suggest gender within a design, make sure you understand their meaning fully.

People feel comfortable in a place where they feel represented. Focusing your design system or themes too heavily towards a binary gender could be causing you to miss out on a wider audience of wonderful users.

Gender Inclusive language is the way forward

Attitudes towards gender are beginning to evolve and see some steps in a more inclusive direction. Whilst many don’t believe that we will ever fully lose the need for some gender specific products or services, there’s no denying that a conversation is being had on how much precedence it has in todays world of design.

The route to a more expansive and less restrictive look towards gender is good for everyone. By following and responding to the message that’s being expressed socially, continuing the conversation around gender being less binary means you ensure that your audience of users feels valued and represented, thus providing them more of a reason to continue to use any product or service you provide.

Start your journey to designing a more gender inclusive product in Marvel, using our in-built design tool and prototyping features. Want to test your your users response to your designs? Capture important feedback through audio and video by creating a User Test from your Prototype. Marvel provides you with a tool to support you in every step of the design process.

The post Gender Inclusivity in Design appeared first on Marvel Blog.

Hackathons are an opportunity for groups of people to combine their skills and ideas to solve problems together.

Participants need to be open-minded, collaborative, and passionate about the issue at hand to use the tools at their disposal and find a great solution to a big issue. As an organiser, you’ll need to make sure that the event runs smoothly and that everyone involved has all the information they need to succeed!

There are many different types of hackathons, where people of varying degrees of tech know-how and experience can participate! These could include “Hack Days”, like the ones we have at Marvel, where new ideas that have the potential to improve our platform are birthed over the course of a day, or others that can go over the span of a few days. Some can be run in real life, while others are online. There can be hackathons where people work as individuals, or within teams. Ideas can even be displayed as prototypes or theories, while in other cases as tangible, working, MVPs.

By the end of a hackathon, everyone involved has a greater understanding of the problem they are trying to address and has worked on a solution for it. Sometimes work done in hackathons has the potential to improve the quality of lives, or even save them!

So, why would you run one?

Well, there are many reasons why you would want to run a hackathon.

1. Socialising

[gallery link="none" columns="1" size="full" ids="21261"]

The pandemic has been difficult for all of us for many reasons. The ‘new normal’ has limited opportunities to meet up with loved ones and make friends in the way we would before; opening up a need for people to socialise in other ways online or with some kind of physical distance.

Hackathons could be a great way for people who share values with one another to problem-solve in hopes of achieving a common goal - online, or offline! In some cases, it could even be a way to start new friendships on a foundation of shared interests and beliefs.

2. Improving processes

Every great startup is nothing without its team. Here at Marvel, we’re lucky enough to have some of the brightest and most innovative people in the design space whose skill-sets and passion are the driving force behind the product we see today.

All of us at Marvel want to see the platform thrive and have brilliant ideas on how to push the product to the next level.

From Marketing to Engineering, to Support and beyond, everyone has great ideas which have the potential to be impactful in the future.

To get everyone involved, we hold frequent “Hack Days”, where members of the entire team can come together to use their unique and varied skills to prototype new features or processes. Many of our best ideas have come from Hack Days, one of which being Handoff (https://marvelapp.com/blog/how-we-built-handoff/), which has now become one of our core features.

3. Learning

Depending on what your role in making the idea come to life is, there's a lot you can learn during a hackathon!

People interested in running their own startup can experience a shorthand version of building a product from ideation all the way to where it can be presented to investors or stakeholders. Some startups with hackathon origins have even become lucrative like Carousell, the Singapore-based startup, now being valued at over 900 Million USD in 2020.

Anyone who would like to improve the UX of a product can learn more about the issue at hand, the users’ pain points, and what the ideal user flow would be. It’s also an opportunity to flex your designer muscles and spec out something that impacts user behaviour in a short space of time.

There are also great opportunities for people who are new to tech to learn how to code or apply any knowledge they may have in a way that could be commercially viable in the future. Because of the collaborative nature of hackathons, there are also opportunities for novices to meet people who are more knowledgeable and learn from them.

[gallery link="none" columns="1" size="full" ids="21252"]

4. Community interest

With all the benefits that come from being a participant in a hackathon, it's easy to see why it’s in the best interest of companies and organisations to host them.

As time moves on, we’re seeing more and more companies demonstrate their values and their ethics with the events that they host and the companies that they partner with. Hosting an event such as a hackathon could be a great way for a company or an organisation to use their resource to solve an important problem, while supporting the personal and professional growth and development of the people in their community.

Now that you’ve decided to run a hackathon, you’ll need to select a theme.

As the nature of hackathons revolve around problem-solving, many of the themes will be related to a particular problem that many people are facing. For example, the Fixathon (https://fixathon.io/), where we participated as “Team WorldKind”(https://medium.com/we-are-worldkind), is centred around finding a solution that combats the effects of climate change.

It’s also worthwhile to see if it’s possible to host a hackathon where the tools used are ringfenced, e.g. where participants can only build something with one programming language or software. One example of this could be building a prototype by only using the tools in Marvel! This is a great way to showcase innovative ways to work with these tools for others in the future.

There are also hackathons that take an existing solution and ask participants to improve it based on certain criteria.

Regardless of what the theme is, making sure that it’s been well-defined before the event means that users can come to the hackathon ready with some ideas on what they’ll be working on and how.

Pre-work

As we said earlier, there are different types of hackathons, which are held over different periods of time, and participants may (or may not) be working in groups.

For many hackathons though, participants will be told about the theme beforehand and are given the opportunity to work in a team.

Where this is the case, participants might need to think about doing the following before the hackathon takes place: • researching the theme • clearly defining the problems they’re looking to solve, and speccing out solutions • finding teammates, and thinking about how to best use each person’s skills • the tech limitations - what tech can be used, whether there are APIs available • what could be possible to build during the hackathon event

It’s also worthwhile to note that as an organiser of the event, you’ll need to lay out the information for the participants so that they can do any pre-work necessary for the event!

For you, your prework will also be in the following

Marketing

This is necessary as your team will need to build excitement and anticipation amongst the participants. Working with social media for example could be a great way to do this. With social media, you can also use platforms like Meetup, to recruit like-minded people to judge the hackathon or even participate!

Prizes

It might be worthwhile to consider giving prizes, and partnering with great organisations who would be willing to add to your prizes!

Criteria

What is the criteria that the participants will need to meet before and during the hackathon, before the applicants and project can be considered?

It's important for the organisers to clearly define which problems they are looking to solve. This is because a lack of clarity in the brief that they output could confuse participants and delay any progress that they make. Defining the scope of the problem comprehensively will also ensure that the solutions that participants eventually come up with will be achievable to create within the time frame given to them.

Judges & Mentors

Great mentors or hackathon leaders are key as they’ll be able to encourage participants to dream big, while also showing them that whatever idea they have can be made within the timeframe given. This is because they have the expertise to be able to act as soundboards for the participants - checking in and making sure that their ideas are viable while showing them how to make the most of their resources.

[gallery link="none" columns="1" size="full" ids="21253"]

Hacking

This is the part of the event where the team spend their time together and develop their idea

• While this is happening, your job as an organiser is to make sure that you help the team get the most out of the experience and create the best possible version of their idea within the defined timeframe.

Many hackathons are created because the organisers felt passionately about solving a particular issue, and it’s good to kick things off by using this passion to introduce things. It might be worthwhile to look at creating a presentation that explains the origins of the Hackathon, its sponsors and partners, the goals for the event and the criteria for each team need to meet to be successful.

It’s also a great time to explain that every participant has a very important role to play. This can be really encouraging for people if the event is their first foray into tech. Asking everyone, regardless of skillset, to bring their unique qualities to the table should also encourage people to explore creating clearly defined roles for each other during the event. This will ensure that they optimise the time they have focusing on different areas of the project. These roles can include:

• Project Manager (person overseeing the progress of the project)
• Marketing (person who’s in charge of marketing the idea)
• Researcher (responsible for making sure that the third party data is correct)
• Designers (person primarily responsible for defining the look and behaviour of the idea; may create designs or prototypes)
• Engineers (people building the tech behind the idea) and more!

You'll also need to have at least one point of contact for the participants during the day and make sure that the participants know who they can turn to if they need help with anything. This is useful because whoever is in this role will be trusted by the participants to help them with any issues that come up. This point of contact may be able to help them if there’s an issue with any of the tech, or if someone from the team needs a soundboard.

Time keeping is key! Many real-time event are held in spaces that have been rented out by the organisers, and will need to be out of the space by a particular time. There may also be special guests who’ll have other commitments, so it’s important to keep them in mind too! This is why it’s important to check in with participants, organisers and any hackathon stakeholders to make sure that they know timings, and won’t have any issues with keeping on schedule.

The schedule should be designed with productivity and wellbeing in mind! Remember to set aside time for teams to brainstorm, work on particular tasks, take breaks and socialise! If certain things can only be achieved in certain spaces, make sure that everyone has opportunity to access the spaces within the timeframe of the event.

Allowing participants to create a rapid prototype would be incredibly helpful to them as they can quickly validate ideas, see whether their idea can actually solve the problem they're working on before spending resource building it, and easily create multiple iterations of the prototypes over time which are influenced by the feedback given by teammates and testers.

Here’s an example of a prototype for a chat bot created in Marvel! http://bit.ly/36d8dde Creating a prototype in Marvel is great for hackathons as the team can:

• collaborate on the same project at the same time
• share the prototype URL to get feeback in comments and annotations
• create a user test to gather data about end-user behaviour while using with the end-product
• embed the prototype in their presentations

Presenting

[gallery link="none" columns="1" size="full" ids="21255"]

Finally, it’ll be time to present the idea to the judges! On top of creating great prototypes, Marvel can be used for creating presentations to show off what’s been built at the end of the hackathon!

A great presentation needs to demonstrate the following:

• Insight: This gives context to the issue to show the current status of the problem and how it’s affecting people. Providing additional insight may encourage the partipants to see this particular issue in a new light, and using statistics in the presentation to emphasise what issues are taking place could be a good start for participants, who may want to use these stats as a benchmark to measure the success of their ideas against.

• Problem statement: In simple terms, what is the issue that will be solved. It’s important to make it clear to the participants what the issue they’re trying to solve is - and why it’s important.

• Impact: It’s important to consider a problem’s impact, who’s affected, and how the consequences could affect them in the future. It could also show the relationship between the issue being addressed, and other issues which are affected by the consequences of the problem you’re trying to solve - ideally, the presentation will have some kind of forecast into how a solution could help a situation and the people involved in tangible and objective terms. Demonstrating the impact of the issue turns an abstract concept into a real-life problem that needs real-time attention.

• Product: Now we all understand the impact of the problem, we can all see why a solution is necessary! Here is where the organiser shows how a solution could address the problem at hand. The organisers will also need to explain that paricipants need to demonstrate why the team chose to take this path instead of another. Even better if an end-product has been created and then tested, as the data can be analysed for statistical significance to further prove why the idea is useful!

• Demo:

This is great for showing the judges and audience how the end-product could work in action! If a prototype has been created in Marvel, it can easily be embedded in the presentation, or even better - shared with the audience so they can interact with it on their mobile devices for themselves!

Following these steps, will ensure that your hackathon runs smoothly and gives your participants a good opportunity to bring their ideas to life!

If you’re running a hackathon and using Marvel, please let us know on Twitter by tagging @marvelapp and using the hashtag #MarvelForGood! We looove seeing Marvel being used to innovate and potentially change the world!

If you’d like more help with this, please contact us (help@marvelapp.com)!

The post How to run a Hackathon appeared first on Marvel Blog.

Starting at Marvel

When I started as a support agent at Marvel, I had no plans of becoming a developer. I had recently finished design school and was looking for an interesting day job where I could do some freelancing on the side. Not only did I find an interesting job, but I found one where I was surrounded by engineers, many of whom were self-taught and keen to support any interest I had in programming.

I spent much of my first two years at Marvel trying to decide the direction I wanted to take my career. I went to design school and got a degree in illustration, so going for a design role at Marvel made a lot of sense. As I looked into it further, I found it quite draining to have my main hobby as my job. Normally after a long day I like to sit down and paint, but that method of relaxation becomes a lot less successful when you’re doing the same thing at work.

I thought I would look further into other career opportunities, specifically directions I could take within Marvel. I had coffee with people from lots of different teams to ask them about their roles and see if they might be right for me. I also spoke with my manager about continuing up the ladder in the support team.

I thought engineering would be a bit of a long shot. I was never particularly good at maths, had never studied computer science, and had always thought I didn’t have the brain for programming. After speaking to a few engineers, I learned that there’s no one type of person who’s best suited for programming. It’s also not something that’s particularly important to have studied in a formal setting. There are tons of resources for people who want to learn how to code and a lot of programmers are self-taught. The most important thing you need to learn to code is to want to learn to code.

My first choice to make when I decided to learn how to code was which language to learn. I was somewhat familiar with which languages were used by which teams from my experience working closely with the engineering team in support. I narrowed my choices down to frontend (HTML, CSS, and JavaScript) or backend (Python).

(There are many other languages used by both frontend and backend engineers, as well as other specializations in engineering. I decided to focus on these two specific areas of programming because I had hopes of moving into a product engineering role at Marvel)

Frontend vs Backend

[gallery link="none" columns="1" size="full" ids="21247"]

If you’re not familiar with the difference between frontend and backend, I find comparing it to a restaurant to be helpful. A restaurant is made up of the front of house and back of house. The front is what you see as a customer - all the tables, seating, and decoration live in the front of house. The back of house is where the ingredients are and where the cooking gets done. It’s purely functional. The front and back interact by the front of house requesting food from the back, the back finding ingredients and making the food, then passing it to the front of house to be served to the customer.

The frontend and backend of a website work in much the same way. The frontend consists of what shows up in your browser - like the layout, colours, buttons, and how they all interact. The backend is where the actual data lives and is organised.

When you log into your Marvel account, the frontend is where you type your email address and password, while the backend is what takes that information and finds your projects to display in your dashboard.

Frontend made sense for me because of my design background. Working with the layout and appearance of a website would naturally be my cup of tea. Plus, I already knew the basics of HTML and CSS from design school and editing the theme for my portfolio website (and from adding glitter to my MySpace page before that). I dabbled in a bit of Python and had coffee with a backend engineer at Marvel before deciding it didn’t catch my attention in the same way as frontend. That’s when I was sure I wanted to be a frontend product engineer.

Learning how to learn

I tried a few different ways of learning how to code and found a balance of each of them that works best for me. The main three methods I’ve come across were documentation, tutorials, and pairing.

Documentation is the most independent method of learning I tried when beginning to code. I started with HTML using MDN Web Docs. A coding language’s documentation will have some tutorials you can work through and a reference section which is a repository of information about the language. Learning solely from documentation can be a bit boring, but it’s really useful to understand how to navigate early on. You’ll be using documentation to reference bits and bobs throughout your coding career. [gallery link="none" columns="1" size="full" ids="21245"]

The next method I tried was video tutorials. I specifically used egghead.io and Frontend Masters to learn more about JavaScript. Both of these sites and others like them have many different tutorials that feel like you’re in a classroom setting. You can watch the instructor go through the material and work alongside them (though you may have a hard time doing the work simultaneously if you don’t have an external monitor or you’re using a small laptop screen).

What led me to decide video tutorials weren’t right for me was the speed. I found myself constantly pausing the video or skipping back 30 seconds because I got distracted. Personally, I need a learning method that allows me to go at my own pace. I still use video tutorials occasionally when I want to learn about the theory behind a practice with lessons that are more lecture based.

Written task-based tutorials are easier for me to follow along with, and Codecademy is great for this. It’s more similar in structure to Duolingo than a university course. A mix of short tasks, self-lead projects and quizzes makes the process of learning less monotonous.

Find a study buddy

[gallery link="none" columns="1" size="full" ids="21246"]

The most helpful thing for me when learning how to code was pairing with a mentor. Having someone looking at your screen and guiding you through a project is a great way to make sure you’re not picking up bad habits. It’s also great for learning tricks to help speed up your workflow. I learned keyboard shortcuts and installed plugins for my code editor that now I can’t live without.

A great option for pair programming is a tutoring program like Codebar. Codebar matches coaches with students to work through projects or tutorials together at weekly events, in addition to hosting workshops. Codebar and programs like it have the added benefit of introducing you to like-minded people to talk about programming with and learn from.

I’m lucky enough to have been given small engineering tasks at Marvel after about 6 months of learning on my own, as well as being assigned a mentor to pair with me on these tasks. Pairing is a huge part of the workflow at Marvel and makes sure that everyone is up to speed and on the same page.

I was lucky that Marvel was looking for a junior product engineer around the time I was ready to fully change careers, but after a year of mostly self-directed learning I was qualified for most junior web development roles. What allowed me to move into my desired role so quickly was a combination of finding a learning style that worked for me and not being afraid to ask questions. Roughly six months after deciding to learn, I was given my first small engineering task at Marvel. Eight months after that I became a full time engineer.

My biggest takeaway from learning to code is that any question will be seen as stupid to someone, so you might as well ask it anyway.

Lain Bader Junior Product Engineer

The post How I Learnt to Code as a Beginner (and how you can too) appeared first on Marvel Blog.

Tackling the future of visual productivity

Introducing Marvel Design Cloud

• Interface design tool - A lightning-fast interface-design tool with real-time collaboration
• Whiteboard tool - Power ideation in every team, with instant access to any company-wide asset
• Presentation tool - Create on-brand presentations with the ability to automatically update fonts, colours and styles
• Graphics tool - Scale content creation with template-drive graphics, powered by your centralised company assets

Whiteboard

Interface design tool

Presentation

Graphics

Technology

Easel - Universal Design File Format

Native support for design tokens

Design SDK, API and plugins

• SDK - Utilise the core parts of the design cloud technology, including rendering, real-time collaboration, and interface layer. That means you can roll your own UI and customise each tool or create something new such as a collaborative diagramming or chart tool.
• API - Access the core parts main platform such as comments, projects, collaborators and more
• Plugins - Build tools for each of the tools that appear directly in the interface

Release plan and beta

The post Introducing Marvel Design Cloud: Whiteboard. Design. Present. Sync. appeared first on Marvel Blog.

Muted Color Palettes

What are muted colors?

Why use muted colors?

Geometric Shapes

Here are some other ways and places to use geometric designs:

Flat Icons & Illustrations

Why use flat designs?

Simple Data Visualizations

What is data visualization, and why is it important?

Retro Designs

Grunge

Pop Culture

Conclusion

The post The 2021 Design Trends You Need to Keep Up With appeared first on Marvel Blog.

Could you tell us a bit about yourself? Who are you? And what are you working on?

I'm Michelle, Design Manager at Moneybox. I joined about a year and a half ago when we were only two designers, and we've been scaling the team ever since. We're now a team of ten designers, and as we've scaled, it's been really important to scale our processes as well.

We launched our Moneybox Mortgage Advice Service earlier this year and did quite a bit of testing using Marvel. It’s a new proposition for us, helping first-time buyers buy their first property. It was exciting to take customers from their savings journey into the actual home buying journey. It was very new, but really fun to work on, and spoke to our mission of helping people with their financial goals. A lot of the team have been focused around that during the pandemic, and it’s been great that it's been a really successful launch for us.

The other big project we've been working on is a redesign of the app. When the app first launched about five years ago, it was designed with one product in mind: we had the stocks and shares ISA, with a round-up feature. We've grown quite a lot since then, and now have lots of different products. We've still got investment products for longer-term goals, as well as products for helping people save for a home, buy a home, save for their retirement, as well as short term savings goals for things like holidays. The app was still very single-product focused, so we needed to redesign it in a structural way to make it useful and workable for those customers with more than one goal.

You were drawn to design from a young age - tell us a bit more about what drew you in, and the journey you’ve taken to where you are today.

I always loved to draw as a child, I used to love drawing buildings and houses. And then I got a little bit obsessed with interiors, and I thought I was going to become an interior designer. I went to college and studied art and design. I came across a module on graphic design. It was the first time I'd ever used a Mac computer or used Photoshop. And I absolutely loved it, so went on to do a full graphic design course at uni.

After uni I joined a digital design agency, which needed quite different skills from what I'd learned in uni, it was like learning everything from scratch again. I had to learn how people used actual websites; luckily I had a great mentor. When the iPhone came along, I had to start designing for mobile which was a new and even more exciting challenge.

We had quite a lot of financial clients at that agency, so I found myself working on a lot of financial products. I found it really interesting. It was complicated and made me use my brain a lot.

I was already a user and fan of the Moneybox brand and app, so when the opportunity to join the Moneybox team came along, I jumped at the chance.

[gallery link="none" columns="1" size="full" ids="21214"]

What were some of the challenges of moving from almost a decade in agency to a start-up/scale-up?

It wasn't too challenging because I had already been doing a fair amount of work with FinTech startups plus some larger banks in my agency work. We'd often go in-house and help them with certain projects, help them innovate. But joining Moneybox was definitely different. It was nice to work somewhere where everybody was aligned behind one product, and focused on one goal. There's also a deeper level of detail required working on one product full time. I enjoyed working on projects where I had to get into the detail during my agency time. But when you're actually working in-house, there's just another level of detail that you didn't quite see working in an agency. I think that's been incredibly useful. That's helped me grow as a designer, a person and a thinker, which I see as a plus as opposed to a challenge 🙂

The other difference was I worked at a small agency, which meant I was used to wearing a lot of different hats and doing a lot of different things. Moneybox is a much bigger team, so it's been interesting to figure out who is responsible for what and how everybody works together. So working in a bigger team with more specialised team members has been a good learning curve too.

You’ve worked on some of the world’s best financial services products. How did you find your niche, and was it by accident or design?

Definitely by accident. The owner of the agency I worked at had a financial background and he had a lot of contacts in the industry. I worked on a project for Barclays, going into the business to help transform the way they worked. I had worked on a few smaller financial products before, but that was the biggest one. I was learning to move from a work waterfall method to agile, working on their online banking platform. That was very, very interesting. A lot of compliance and a lot of things that I didn't even know existed.

I enjoyed it so much, I stayed on to work on the mobile banking app. And that's where I really found my niche - moving from web to app. Smart phones and apps were quite new, and I found working on them really enjoyable. With mobile, there's the challenge of designing on small screens, and lots of different edge cases and patterns to consider. And I just found it really fascinating and challenging.

[gallery link="none" columns="1" size="full" ids="21210"]

What would you say is the most important skill for design leadership to have and why?

One of the most important skills, I would say, is to lead by example. You can tell people lots of great things, but if you're not acting in that way, then it's not going to work.

I think people respect you and look up to you more when you're living and breathing, your mantra.

What are the parts of your role that you really love? Talk us through the best parts of your week.

One of the biggest enjoyments in my role is watching my team succeed. I'm not super hands on anymore, that is the nature of my role as Design Manager, but I've got ten designers to look after and it's been really rewarding seeing the team accomplish things together.

My role means I get to see and appreciate the whole lifecycle of product design, which is incredibly rewarding. We work collaboratively, all designers in the team feedback on designs, so everybody's had input, and helped get the design to the level where it needs to be in order to meet the requirements.

When the design is launched, and it gets amazing feedback, or we see in the data that there’s been a real positive impact, it makes me feel incredibly proud that the design team accomplished that. And the fact that it’s a whole team accomplishment, where we’ve all worked collaboratively to achieve it is amazing and makes me feel really proud.

What advice could you share with other designers looking to become design leaders at a startup or scale up?

It's all about the detail, and understanding all aspects. You have to be able to hold lots of things in mind as a design leader, whether that's helping your team with their personal development or with their design work. While also making sure that the work meets all of the requirements from a user perspective, and from a business objective perspective as well.

I think that's always the biggest challenge: finding a way to balance the business goals with the user goals, which can sometimes be very, very different. Knowing when to put the user first, and when the business goal has to come first. Being able to get into the detail of what backs each of those options, and figuring out the trade offs.

Then once you've launched that feature or product, it's making sure that you're continuously monitoring to see if it's performing well. If it's not, it's down to you as the design leader to highlight when to go back and iterate that and keep improving.

One example of this was the new mortgage flow that we built. We had an optimal journey from a user perspective, it was a lovely prototype. We tested it, and it tested well. But it had a lot of different edge cases, a lot of paths the customer could take, which meant from a technical perspective, it was quite large to implement. From a user perspective, the design would take them on a customised journey based on their answers. But from a business perspective, we needed to get something out quickly by a certain date. The original design was so technically complicated, it would take us over our desired launch date. We had to make a call to simplify the user experience a little bit by creating one single journey, which meant we had to group some questions in a suboptimal way. It wasn't the most optimal customer experience. But we had to hit our business objective to launch by a certain date.

The trade off in this case was the user experience. But we knew after launch we would start iterating to gradually improve it. The most important thing was to launch it, test to see if people had the appetite for it, then learn and iterate from there.

[gallery link="none" columns="1" size="full" ids="21213"]

How do you use Marvel in your workflow?

We use Marvel to create prototypes to present to internal stakeholders across the business. This could be in wireframe format, or high fidelity format so people can get a feel for what we're designing, so they can try on their own devices.

We also have used the user testing platform recently. We did some testing on our new app designs with some of our customers, and it's great that you can get video and audio feedback. Also you can see where they're tapping on the screen to see if they're hitting the right touch-point. That helps us decide if we've designed something successfully based on where somebody is tapping. It's been really useful, because everything is recorded, we can go back and look at it again. Sometimes running the interview yourself, you don't remember every single detail. Going back and looking at it later means you might find a few little nuggets that are useful.

We've conducted both moderated and unmoderated tests. We conduct more unmoderated tests because it's not interfering in somebody's life - you can just send it out to them and they can complete it at any time. But the moderated tests were really great for the app redesign project because we wanted to get more qualitative feedback from our customers and understand their goals, what they like and dislike about Moneybox.

What are your biggest challenges with user research?

User research can be quite time consuming. It'd be great to have template discussion guides that you can use again, especially when you're sending out moderated tests. It would make it really easy to capture that feedback.

The other challenge is where you've done all of the tests and you need to collate all of the feedback. That takes quite a long time. It would be great to have a tool that would capture the key insights, and play that back in a report that could be shared across the company. That would be really helpful to break it down for people, and give them an overview of how the tests went.

Where do you see design or user research going in the next few years?

Design is becoming more and more important in every business, which is great, because it's what can make your business really successful. I think now, people in this age are just obsessed with how things look and feel. I think it's super important to find out what your customers think and feel about your products and services, but also what prospective customers think, feel and desire.

[gallery link="none" columns="1" size="full" ids="21212"]

Where do you go to get inspired?

I get inspired by listening to podcasts and I read a lot of design blogs on medium. Generally I also look at a lot of apps for inspiration. So the likes of Airbnb, Pinterest, constantly checking out what new updates they've released.

I saw something new on Pinterest today, they've got this new feature with an embedded video in a bottom sheet, that you tap and it expands allowing you to explore the content. I've never seen anything like that before. The Airbnb Design Language System series is really interesting as well.

What can we expect next from you, or Moneybox?

At Moneybox we are spending a lot of time improving the app this year. As I mentioned, the app was originally designed to house one product, whereas now we’re an app where you can manage all of your financial future.

Some customers might have one specific goal in mind, say to buy a house, which is typically very expensive. They might put all their money and effort and focus into achieving that one goal. But we also have customers with multiple goals at one time. Our mission is to be an app to help customers achieve all of their financial goals.

We’ve got lots of changes coming this year revamping the app and making it more useful to customers.

Where can we follow you or keep up to date with your work?

You can follow me on LinkedIn @mishaaron

We also have a Moneybox blog on Medium, where we're now posting about our design achievements. We've got a recent blog post up at the moment on our mortgage Advice Service, we'll be writing another one soon for the redesign of the app.

Thanks so much Michelle! It’s been great getting to chat to you and hear about your journey. Looking forward to seeing what’s next from you and from Moneybox 💙

The post Q&A with Design Manager at Moneybox appeared first on Marvel Blog.

• Trust in ability - Embrace the different skill sets and lean into the specialisation that exists across the roles. While there is an obvious crossover between the two disciplines, capitalise on the nuances and experiences unique to each function and celebrate it. 
• Trust in intent - When there are differences of opinion, assume positive intent and use these occurrences as an opportunity to learn from each other. You should both be trying to achieve the same goal, so show the working out that drew your conclusions and take each other on the journey. 
• Trust in autonomy - Establish clear expectations, roles and responsibilities from the outset. Arguably the most significant contributing factor to disharmony across Product and UX is not knowing ‘where the line is’ and understanding that sometimes it overlaps. Finding the boundaries will take patience, time and practise but will pay dividends for the future.

• User interviews. It may be obvious, but user interviews are a shared responsibility. Although owned by UX, interviews should be attended by all facets of the business where possible. Beyond the insights gleaned from participating, which are indispensable, the bond between Product and UX can be strengthened in the process and carried through into the next phases of product delivery.   
• Sketching sessions. Getting ideas onto ‘paper’, be it virtual or analog, is a great way to capture lightning in a bottle. Sketching performed in tandem between Product and UX offers an unparalleled insight into each other's knowledge, perspectives and approaches to a problem. The complimentary brainstorm creates more considered outcomes and creates a space to iterate on ideas together.      
• Roadmapping. Setting out the future path for a business through a product roadmap is not something that should happen in isolation. One of the key seats at the table needs to be the UX function. Without this lens we run the risk of shipping bets that users may not actually want. As we test and learn, roadmaps should be dynamic and adapt to inputs provided by UX to ensure the best results for users. 

The post How a strong relationship between Product Management and UX delivers richer value for Envato users appeared first on Marvel Blog.

Jason Lung is a Senior UX Designer at Tesco Bank, the personal finance arm of one of the UK’s main supermarket brands. Starting his career as a web designer, he’s witnessed the shift toward UX and has learned how to be user-centered in the process.

Tell me how you got started in UX?

My career started back in the early 2000s when I finished my degree in multimedia design. My first job was working in a local digital agency at a time as a junior web designer. So I guess my background would be more similar to a lot of people out there, where you started out as a traditional web designer and then made the transition toward UX/UI design.

While skills-wise they’re not too dissimilar, the new skill sets that I acquired along the way are more to do with understanding the user's needs. So when you work as a designer, a lot of the time you're thinking from a business perspective, rather than from a customer's perspective. Even though that is something that we all knew about, you know, this, this is something we really want to get right.

I think the introduction of UX means that we actually have a term, we have a place to actually talk about things that's more related to the customer. So from that perspective, I think that's where everything started to grow at that point.

Being able to try to incorporate a lot of the customers' needs is really crucial in a project. I picked up on this aspect of my role, during my time working for Argos. They started out with a new team in London where they really wanted to introduce managing the customer's needs. So they built the office on top of an existing store so we could design during the day.

[gallery link="none" columns="1" size="full" ids="21074”]

We could just pop downstairs to show the demo to real users and ask them quickly while they're waiting in the queue. That was really cool guerrilla testing that we were able to do. We made our office space almost a testing hub. So what that means was that I could invite colleagues as well to come upstairs and go through a bit of a user journey with us too. It was really interesting being able to do all of that.

Did you develop your research skills on the job as a designer or from your studies?

Yeah, I definitely learned on the job and I also had the desire to want to know about more as well. So in that sense, I'm always curious about how people will react to certain things. A lot of the time, we try to see it through the lens of the customer when you're trying to pretend to be that customer. That's a good start, but I think the next step would be to find out what would users say about certain things as well.

So even though we have a bit of idea of how things should work, the best way to find out is actually always to ask the customers, and then they’re always surprising us with different answers, things that we never expected. It’s good to be curious and try to verify with the users.

At Argos, did you plan your testing on the shop floor in advance or did you also do it on the fly?

Yeah, there are different overlaps in terms of the kind of design Sprint's we're working on. So we definitely knew, maybe weeks ahead in terms of certain things that we want to change and upgrade. But during a particular sprint, we might try to do a quick user test. But we'll also try and plan something, which is more of an end-to-end journey. Ultimately, that will require more work and planning to do that, too. There are definitely different levels of testing.

How do you work now at Tesco bank? How's your team structured?

We’re getting to be quite a big team now. It's good to see that we've grown from 10+ to 20+ people during my time working there, so it's only been maybe just over two years now. We have a differing range of skill sets. There are people who are more visual hands-on prototyping people, as well as people who really want to carry out lots of UX research and measuring UX as well. So that means we have quite a mixed bag of people that can all rely on each other as well. Sometimes if you want to find out more about certain things or you need a bit of help from someone in that area it is really easy to get that from the team as well.

You mentioned that you worked in sprints in the past; do you have a particular methodology that you follow currently?

Yes, so the good thing about working in Tesco Bank is that sometimes you do have really big projects that you need to have a clear planning structure of how you want to tackle it. For example, if you do want to deliver something for open banking–which is a huge project–you really want to know the requirements, what is the planning, and what kind of research you really want to focus on before you actually get started.

Compared to things where you just want to do a quick reskin of something and maybe you just want to do quick A/B testing, so I will share with customers to get an idea of it. That's where a lot of the time I find Marvel to be really useful to get really quick feedback from people and definitely, definitely love the prototype parts of it as well.

How have you adapted to remote working over the past 12 months?

It's obviously very different in terms of the way we collaborate on a project level as well. What I found previously, was that you could share something quite easily with other designers or even other product owners. Now you do need to plan things ahead a little bit, but I do like how everyone's adapting to that style as well. So that means you can just have a quick chat with someone over teams, and if you do have a question you can try and grab someone quite quickly.

[gallery link="none" columns="1" size="full" ids="21094”]

I think apart from the way we communicate with each other, the way that we work is pretty much the same in terms of how we go about a project.

How do you use Marvel in your workflow?

Sometimes it could be at the beginning of the project. So it really depends on the size of the project and what we're trying to get out of it, in terms of the content of it.

Very early on in the process I use Marvel as a user testing tool to test out really simple concept ideas quite quickly with customers. Then later in the journey, when I want to visualise the experience with different stakeholders that's where the prototyping part comes in quite nicely.

Marvel prototypes are where I can share it quite easily with other people on the team and everyone will have a single point to find out that information. Handoff is also really cool and I love that you know how quickly you can update things as well on the fly. So you don't have to upload things over and over again and that's the beauty of it.

How do you manage the design expectations of other delivery teams?

We mostly have JIRA tickets for a lot of the work. The delivery teams will use that to try to organise the backlog of their items and they adapt different things they want to prioritise. The way we use Marvel is that sometimes I generate a share link and share it with the project teams, and then I also attach the link using the JIRA plugin as well. In the end, everybody gets the same update of the visual journey and they’re able to see the prototype working and understand the UX as well.

How has Marvel’s user testing helped/changed your design process?

I really like the heatmap feature, because it is really good to be able to see how customers actually interact with the prototype or for thinking about how users want to go through that journey. I think being able to see that and collect that data is definitely useful as a designer. It also lets you push forward the idea of the design as well, because there is data to back your designs up. We really wanted it to be less about my opinion about this colour, it’s actually being able to use some sort of data to back it up. So having that to hand is really useful.

[gallery link="none" columns="1" size="full" ids="21085”]

What do you look for when reviewing a user test?

There are different times where being able to see how customers reacted within the videos as well. This is because sometimes it's not just looking at the heatmap and trying to make a quick decision. You can use the video recording to understand the facial expressions from the users and how they actually interact with your design as well, that's all valuable. There are a couple of different data points within Marvel that we can actually use to help us with the design.

Where do you see design going in the next few years?

It's always quite a tricky one with design. The most common-sense way I would say is design and hardware both go hand in hand. So it really depends on what kind of hardware we could improve on, and then the software will follow.A few years back, maybe 2010/2011 is where we had all of the big augmented reality stuff come out.

You know, IKEA was introducing planners, and Samsung introduced the TV planner where you can measure the TV at home and then you can just see that TV in front of you. That’s a really cool thing, but not a lot of us are using it or making the most of it apart from the Google AR stuff. Hardware can enable what the design can achieve, but a lot of the time it’s also depending on the consumer's needs as well in terms of what they really want to use today. I think that's what is really important to us.

Nowadays design is definitely less about making things prettier, but actually making sure that it meets the user's needs. So I think the future of design will be a lot more of that and how we can utilise design and hardware to make things as simple as possible.

The user's needs will always drive the market and if we do have that product at that right moment, I think that's where you see things will start to get really used by consumers. So design is always the same as well: There's no good or bad design, but there's design that actually works for people. So if people are preferring to use it in certain ways, because it's easier for them, then that becomes a good design.

The post Interview with Jason Lung, Senior Designer at Tesco Bank appeared first on Marvel Blog.

It’s often said that actions speak louder than words, and while goal-based and qualitative user tests are a key part of the design journey, sometimes the most informative test of all, is to watch a user interact organically with your design.

Instead of taking notes or trying to manually spot the insights, heatmaps record what the user does in a highly visual way - collecting interaction data on where your users roam around and what they try to do when in a user test.

Heatmaps shows you a visual representation of mouse movements and clicks from your user tests. The longer the mouse hovers or spends in a particular area, the “warmer” the colour of the spot will appear, with red at the warmest end of the scale, and blue at the coolest.

Where an audio or video recording captures the user themselves (their voice, facial expressions and reactions), heatmaps records how they interacted with your prototype beyond simply where they clicked. Watching what they do, especially where they don’t get it right straight away can tell you what to change to improve your UX. Wherever you see patterns where users habitually mess up or click on the wrong thing first, or even hesitate while searching for something on the page tells you where there’s friction that ideally a design tweak would smooth out.

Heatmaps gives you a type of visual highlighting that make the insights spring off the screen, allowing improvements to the UX to be made based on actual interactions.

See how your design performs

At the simplest level, heatmaps can help you understand the usability of your design, and pick which versions of your design work the best. Heatmaps might give you insight into whether some screens in your design are sub-optimal. You might see for example that users are scrolling up and down searching for the button before finding it, or spending a lot more time in some areas than others. Depending on the mouse movement patterns, increased time spent on a page could indicate either increased engagement, or confusion. Heatmaps allows you to tell what’s going on in the UX, pick the best performing designs, and make optimisations.

With goal-based user-tests, heatmaps can give you insight into how easily or smoothly the user was able to reach the goal. For example if the goal was to search for a hotel booking for Spain, you’d be able to see with heatmaps whether they navigated straight to the search bar with no issues, or whether they got confused, waylaid or off track. Even an extra second or two to navigate to something in the design can have an impact on the final product, and heatmaps allows you to get that insight about where something might not be totally clear.

[gallery link="none" columns="1" size="full" ids="21186"]

Which CTA gets the most clicks

Call-To-Action performance and improvements is a key part of the user testing journey. With heatmaps you can easily see which CTAs are being missed or passed over, and which ones are performing well. When you know how the various CTAs are performing, any improvements to the conversion journey through the product can be made.

Problem clicks are also something that heatmaps can help you identify. So if something looks clickable, you should see users click it several times, hovering there without anything happening before moving on. Where your user tries to click (as well as where they skip past and ignore) all gives you insights into optimisations and changes to the design to improve the UX.

Use heatmaps to review your navigation

One of the things most designers want to test out with real users, is how simple and clear the navigation menu is.

Is it easy to find in the first place, can the users easily “discover” it on their own?

Then once they get there, how many clicks do they make before they find what they’re looking for? You might find out through heatmaps data for example that a number of your users click on an option in the menu, only to go right back to choose something else. That might tell you that there are some ambiguously named items in the navigation bar that are leading some users to expect to find something else when they click there.

Lastly, users that quickly skip over some sections might indicate they’re too cluttered or confusing to figure out, and the user has moved on in search of a broader overview of the product. Any unwanted friction in users navigating to where they want to go might lead them to drop off without converting, and teatmaps reveals those friction points to be ironed out in the UX.

Combining heatmaps with other metrics

User Testing in Marvel also gives you audio and video recording of the user, time spent on screen, and the ability to link to a survey within a prototype. Each of those different elements gives you a rich set of insights from different angles.

Heatmaps lets you see how they move around a screen, while the audio and video recording layers in their vocal reactions and facial expressions. The time spent on screen might indicate where there was any friction, or where users typically lost interest. The survey gives an opportunity for the user to give feedback, their thoughts, and any rich commentary on their experience in the product. The survey is also an opportunity to gather quantitative data points on their likelihood to use the product again in the future, as well as any relevant demographic data to overlay into the feedback.

User Testing as a whole, including heatmaps offers a wealth of qualitative and quantitative data on the quality of the user experience, and sticking points, providing designers with exactly where they need to focus to improve the product. User tests can be run on iterative versions of the product until the tests comes back showing an improved flow, less friction, less ambiguity, and ultimately happier and more successful outcomes for users in your design.

The post Improve your UX with heatmaps appeared first on Marvel Blog.

1. Select any project
2. Click 'Share or invite'
3. Click 'Send via SMS' or 'Send via Email'
4. Enter the phone number or email address

• Go to the project or folder dashboard
• Click on Share (blue button in the top right)
• Toggle invite-only

• Click on Team on the left menu
• Click Settings
• Check the box next to Require users to log in to view prototypes

• Open your project with sections
• Hover over the title of the section that you'd like to share with someone
• Click on the white 'Options' button on the right-hand side of the page
• Select the 'Copy link' option on the drop-down box which is revealed

• Open any share feedback by adding commentsproject
• Click 'Share and invite'
• Click 'Embed' and copy the code

The post Improve collaboration with clients using Prototypes appeared first on Marvel Blog.

Spending the time and energy to properly define how an end-product should look and behave is an absolute must. By dedicating time on this step you can help save time, money, and other resources further down the line; and using wireframes is a great way to do this!

Wireframes are seen as the skeleton of a prototype. With a wireframe, it’s easy to outline what elements you’d like to see on your design. This is great for demonstrating exactly how you’d like an end-product to look, and behave, and is a massive timesaver if done with templates.

Looking at both Lo-Fi (low fidelity) and Hi-Fi (high fidelity) wireframing could be very handy, as it will help you get crucial feedback as soon as possible. ‘Fidelity,’ is the level of detail seen in a design - which can range from no detail at all, to a rich, fully finished UI.

Once the design is created, it can be used to build a prototype to give the illusion of how the end-product would work in reality.

Clearly defining your elements

An element is defined as “an essential or characteristic part of something abstract”, but when looking at an element from a design perspective, an element actually demonstrates a part of the user interface that has a very specific function.

In wireframing, depending on their fidelity, elements range from incredibly simplistic and neutral in design, for example, vector drawings in black and white to denote the size and shape of an element, to very intricate and specific such as, realistic, and fully coloured elements with text.

There are 4 types of elements:

• Input Controls: These are elements that require information from the user. Examples of these include text fields, checkboxes, and dropdown lists.
• Navigational Components: These are elements where the user will help the end-user move within the design or indicate their current position within the design. Examples of this include slides, pagination, and a search field.
• Informational Components: These are elements that actively give the user more information about the end-product as it’s being used. Examples of this include tooltips, progress bar, and notifications.
• Finally, there are containers that are used to show multimedia that will also be in the design.

Using wireframing during the design process make sit easier to show the elements that are needed in the prototype. By mapping out elements clearly, stakeholders will see what elements will be built into the end-product, and have a better idea of the intended behaviour end-users will have while using it.

[gallery columns="1" link="none" size="full" ids="21153"]

Gathering feedback on designs

As we said earlier, wireframing is a must-have when designing an end-product. Using a wireframe makes it a lot easier for others to understand a vision without them needing to see an iteration of the built product.

An idea may be clear to a founder, or a designer - but describing this to another member of your team, or a client, could be tricky! This is because they probably don’t have the context to see or understand how the end-product would work.

Instead, when using wireframes, stakeholders can understand where the UX has been a priority in the design process. With this, the entire team can work together during the design stages, better understand the user flow, what steps end-users will be taking to use the end-product and how they’ll navigate through it. Once the prototype is ready to share with potential end-users, you and your team can also easily create new iterations of the prototype by building in the feedback of your testers.

Having the ideas down, in a simple yet accurate form, means that anyone looking at the design can understand what the end-product will look like. This is great, since describing the project without something tangible can be quite difficult, and where decisions on the future need to be made, any room for ambiguity or vagueness could lead to costly mistakes.

On top of that, building a product from scratch without having feedback from your stakeholders, and understanding the logistics involved in getting the product off the ground can be incredibly tricky, and usually ends up being a timesink in a project.

Understanding how a product should work, and look, with feedback from others means that designers and their collaborators can see what pitfalls will lie ahead as soon as possible, and get them fixed without wasting too much time and resources.

[gallery link="none" columns="1" size="full" ids="21156"]

Minimise rework to improve collaboration

Another benefit that we often see from the utilisation of wireframes, is that there’s less total time spent working on working on the design, as there isn’t a need to rework.

By wireframing up-front, all parties involved have the context needed to make sure that the end-product is built properly. As we’ve learnt earlier, clear and comprehensive goals and objectives of the project need to be clearly defined before any building work takes place. Without clear briefs from the people with the initial ideas, the developers responsible for building could very easily work in a direction that’s not in line with what the designers or stakeholders had envisioned - and this wouldn’t necessarily be down to a lack of understanding from the development team, but miscommunication from the team handing off a brief.

By ensuring that the ideas are displayed visually, not only can the team better understand the end-goals of their projects, but if there are any gaps in their understanding of how something could look or work, it’s easy to add comments or annotate the designs to specify to the stakeholders what requires a bit more context.

Another benefit of this is that using wireframes creates an opportunity for better collaboration between the design and development teams before a product is built fully. By development being able to hypothesise what exactly could be feasible to create, within whatever limits or constraints that the development team is under. For example, if there are design features in the prototype that may be more necessary than others, the development team can prioritise which core features should be built earlier in the development stage, and which ones can be included in later iterations.

In short, building a prototype with wireframing is a must in design! Along with saving time, money, and resources, it can also save a lot of stress that comes from miscommunication within a team and can simplify and streamline the process of getting an idea built into a tangible end-product. Get started with wireframing in Marvel today!

The post Why you should add Wireframing to your design process appeared first on Marvel Blog.