fabiochiu/medium-articles huggingface dataset:
Wondershare Mockitt: An Easy-to-Use Prototyping Tool Designers Should Consider
By: Vidia Anindhita
Tags: Interaction Design, Prototyping, Design, Tools For Design, UX

Wondershare Mockitt: An Easy-to-Use Prototyping Tool Designers Should Consider

A Jukebox music player prototype made with Wondershare Mockitt

Prototyping tools are like my best friends at work. I need to know which one is right for me, depending on the team and project I’m currently working on. I don’t have only one go-to tool since I work with different teams, and I need to adjust to their cultures. I use Sketch, Figma, Adobe XD, and Principle daily — it depends on what tool my collaborators are using.

Each tool has its own benefits and downsides. But, I think it’s part of a designer's job to keep updated with the trends and be fluid using different design tools. We need to know what tools are right for us. After all, what matters is how do we communicate our ideas at a specific time frame. Although switching between software can be frustrating.

I once said I didn’t need any more prototyping tools unless it brought new value to my work. I like to explore new tools, but I promised myself I wouldn’t use it unless I could learn it very fast, and it helped my work.

I recently discovered Wondershare Mockitt, a relatively new cloud-based prototyping tool with comprehensive functions for real-time collaboration. I gave it a shot since I read the reviews, and surprisingly a lot of people liked it. Although I don’t think Mockitt is well-known in the West. That’s why I gave myself 3 hours to learn the tool and see whether I’d recommend it or not. As a result, it took me less than what I expected to master it!

Here’s the interactive prototype I made with Mockitt in less than 3 hours. Without any prior knowledge of the product.
Fun with XD
By: Crab T
Tags: Prototyping, Pixel Art, Portfolio

Every child likes to create their own game, few can successfully do it. I luckily had a friend who made what is now, my favorite card game. He based it off BANG! a board game in which you have a specified role that determines your end goal.

I decided to take his premise and turn it into a proof of concept for a full app.

After wireframing and proving the concept to myself, I decided to stick with the design and come up with art for the game. I decided pixel art to be the best route to go for the design of the game, as it’s a simple art style that can show effects very well.

The game would start off asking for the user to host or join a game, using the profile of their preferred app store, so there would be no login necessary.

The game would have a nine digit code for users to access games, the code can also be easily copied from this screen, so users can send it out as a text to friends, or write it down if they need.

Once the game is ready to start, users are given three random characters with specific abilities meant to help them get the edge on opponents. They also are given a random role card. The roles are either Overlord, everyone knows who you are and your goal is to kill all Heroes. A Hero is someone who’s goal is to defeat the Overlord, Minions, and Traitor. Minions Serve the Overlord, trying to end all Heroes and the Traitor. Lastly, the Traitor’s end goal is to be the last player standing.

The main aspect of the game is playing the table. A good game is based around convincing other players, with the Overlord starting off strong with direct influence over the Minions. Having a text chat feature is the most important aspect of the game, if players have no way to communicate through voice they need a way to play.

Players can swipe up on their cards to scroll through and see what they’re holding. Players have a minimum of five cards in their hand, and they can hold as many as they want. Cards have a shield, burst, or sword icon in the top left, which are icons meant to be reactions to certain card effects, such as traps, enchantments, etc.

It’s important to remember everything you can about players. The game will give you the basics, health, character, and name. The meat of the player inspection is in notes, that let you keep tabs on what players said, and what you think of them.

When a player finally dies, everyone is met with this screen, letting users finally know a players role.

When a player wins, they’re met with this screen, finally knowing who their allies are. After a few seconds the screen takes the users back to the lobby, where they can either play another round or leave the match.

I learned a lot about XD’s prototyping in this project, most notably the auto animate feature. Building three or four different screens to represent one feature was interesting and new to me.

This project was built and prototyped with Adobe XD here.
Why you need design engineers on your team.
By: Jide Lambo.
Tags: Designer, Collaboration, Prototyping, Front End Development, Engineer

photo by Jide Lambo

We have heard of the term “Unicorn designer” and this is someone who has design skills and also quite comfortable with writing codes. Having someone like this in a team can act as a connector or collaborator between the design and engineering team. This can help achieve critical business solutions faster.

The name of the discipline is design engineering, and a design engineer is someone who specializes in the intersection of the disciplines of designing and engineering. — by Natalya Shelburne.

People with these skillsets often go with titles like Design Engineer, Frontend Designer, Design Technologists, and UI or UX Engineer.

Design engineers can contribute by doing user research, wireframes, mockups, prototype with pen/paper, prototype with UI design tools, and even develop interactive prototypes using frontend codes.

A design engineer can demonstrate a healthy business value because they can quickly experiment, present, and test ideas from the design process through to the development process. This also entails having a healthy collaborative soft-skill in order to get the best result.

Someone with these skillsets can set up a design system, document patterns, build responsive UI components for major screen sizes, guide engineers to follow UI specs, and best practices. They can be very useful collaborators because they’re bi-lingual and can easily communicate their ideas, and also understand their engineering team mate’s views. They know when a design is not feasible to code and can also guide engineers on specific CSS to achieve certain experiences.

Having a solid foundation and knowledge of the right tools needed for designing and engineering an experience can help the team prototype ideas fast and develop useful business solutions.

In one of my past job experiences, I paired up with engineers. I would conduct user research so we can find out our customer’s needs and also connect them to our business’s goals. In some cases, I was able to create a low-fidelity paper prototype, and the whole team could communicate their ideas by either making changes or sketching their ideas. I also designed prototypes using tools like InVision or Craft and demonstrate the user flow. Working closely with my team as a design engineer helped me present designs very early, get regular feedback, and allows me to iterate faster.

I also provided interactive prototypes, which are built with HTML, CSS, JavaScript, or other JS frameworks. The benefits of using this approach are:

it is closer to the end experience.

prototypes can use user or mock data via API to get the entire user’s experience.

fast iterations can be made, tested, and the code is almost ready to ship.

Below is a quick walk-through on how to create an interactive prototype:
Turn ideas into products
Tags: Prototype Company, Prototyping, Prototype Supplier China, Prototype Manufacturing

Turn ideas into products

We learned that “turning an idea into a product” can be a confusing thought process, especially if you don’t know if your design will work. So, we’d like to share with you how we can help our customers turn their ideas into real products.

First, you need to understand that no design process is exactly the same, because no idea is exactly the same.

Before you start, you should make a cost estimate based on type, size, and complexity. You also need to prepare for potential cost changes based on the development method selected during the development of the design.

Several prototypes may need to be created before the design is ready for production.

During the conceptual design phase, your design will gain its initial form and functionality, but keep in mind the manufacturing method and cost. We suggest at least 3 concept ideas so that we can offer you various possibilities. Once the agreement is reached, you proceed with concept development — this involves engineering and debugging the selected concept so that it can be prototyped.

Prototyping is one of the important links in turning ideas into products. At this stage, we will use CNC machining, sheet metal manufacturing, 3D printing, vacuum casting, or other rapid prototyping techniques to build your design. Each material has different chemical properties. Choose a plastic prototype or a metal prototype according to the functional properties to be verified.
Case study: improving dental hygiene
By: Sara Gustafson
Tags: Case Study, Prototyping, Toothbrush, Voice User Interfaces, UX

Case study: improving dental hygiene

Speaking for myself, I know that going to the dentist is an intimidating experience, and leading up to my visit, it is always a gamble of how well I have been taking care of my teeth. From this experience, I believe there should be a more simple way to track your dental hygiene knowledgeably. In comes my idea for ToothFairy.

ToothFairy is an IoT toothbrush attachment that can connect to any toothbrush and lets the user know– in real-time– how well they are brushing their teeth. The device also connects to a mobile application that logs toothbrushing history so the user may track their dental hygiene trends at any point. This application allows users to collect Sparkle Points, which are rewards for a toothbrushing session. These rewards will aid in promoting good dental hygiene habits. I underwent several prototyping methods–analog, mobile, and voice user interface (VUI) prototyping– to evaluate ToothFairy.

ToothFairy logo and slogan

Goals

The main takeaways I want to gain from these prototyping techniques are if the ToothFairy design is desirable and useable. Feasibility is more challenging to evaluate with these particular prototyping methods as there is no way to evaluate how challenging this device would be to develop. Not fully understanding the technical undertakings for ToothFairy, leaves my investigation scope to desirability and usability.

Implementation

The prototyping methods I chose will allow the user to test the entire flow of the ToothFairy experience. The analog prototype will act as the physical attachment to the toothbrush. Using construction paper and a laminator, I created a realistic, waterproof, and low-fidelity version of the ToothFairy device.

Analog Prototyping Materials

I used double-sided tape to attach the analog prototype to a toothbrush.

ToothFairy device in-environment

The next prototyping method, VUI, will enable the user to hear what the actual device may prompt them during a toothbrushing session. I prototyped 3 different conversations for the user and ToothFairy: turn on ToothFairy, brush teeth with ToothFairy, and redeem Sparkle Points.

ToothFairy VUI Conversations

I used these conversations to craft a dialog flow chart that maps out each conversation pathway and detects error states.

ToothFairy Dialog Flow Chart

Lastly, the mobile prototype will allow the user to see how their toothbrushing data may be explored after using ToothFairy.
Human Made Marketplace + Documentation
By: Emerson Young
Tags: Case Study, Prototyping, Zero Waste, Design Process, Adobe Xd

The Project

In my adaptive media class, we are creating a brand with multiple media outlets. For example, we are focusing on a podcast and branding it on another form of social media. The brand I chose to make mine about was zero waste. Zero waste means living a life that’s a lot more sustainable and focuses on waste prevention. Zero waste is not just not using straws to save the turtles (sksksksksk) but to limit our waste that goes into our lands and oceans. A sustainable life also focuses on the carbon footprint we are leaving on the planet. An excellent way to find out your carbon footprint is this questioner that takes an in-depth look into your footprint that you are leaving on the planet.

The Mobile App

For this project, I was asked to create a mobile experience for users to download to their phones that will be an alternative media for the zero waste company I had come up with. The concept I came up with was an eco-friendly low/zero waste marketplace for those to sell their homemade goods. The zero-waste community is vast, and this would be big for small businesses and those who find it hard to find eco-friendly options in their town or city. Human Made is made with the idea of removing Amazon’s use within those lives who are concerned about their carbon footprint.

Link to the XD Prototype

To start, I went for a clean, natural design. I wanted the user to feel fully involved within the app as well as the community. I went for earthy undertones of browns to bring in the eco-friendly vibes straight from the beginning. As well as, I chose the fonts that I felt resembled nature, homemade, and delicate. I didn’t want the user to feel overwhelmed initially, so I tried my hardest to create a calm and warming feeling from the beginning.

This concept was very original and would bring an incredible feature into the zero waste, eco-friendly community. This will give a great outlet to those who work hard to create homemade products to sell.

Thus, I present — Human Made, Zero Waste Market.

Human Made | Prototype

The pages

When creating the pages of the app, I had the user in mind. I made features that I would want to use within the app and design features that would pop up during holidays or events. That being said, I added a gift-giving guide. I also wanted to give the users the option to search for specific products they might be looking for. Also, I came up with suggesting searches based upon topics that they searched for in the past or searches similar to what they have looked into before. Since this app is for the community’s people, I wanted to make features in the mindset of what I would like.

This app was made in hopes for people to turn to when they are doing personal shopping and gift-giving. The world is full of plastic, so giving all the reusable, eco-friendly homemade products to a home would be an excellent place for those to shop. Human Made is the perfect sister brand to Planted Zero; thus, it is just a store for those to shop while following the brand and trying to make a difference in the world.
Metrics Prototype Feedback
By: Ubiquity Press, U
Tags: Prototyping, Metrics

To involve the open access community as much as we can with the Advancing Hyku project, we’d love to get feedback on our most recent designs for the Metrics view. You can find the prototype here and submit any feedback you have here. We’d love for you to play around with it! Keep in mind that this is only a prototype, so not everything is clickable. If you need some help seeing what to click on, try clicking anywhere to see clickable areas briefly light up blue.

And just to be clear: while these views show how metrics will appear in Ubiquity Press repositories, the designs are open source and will be incorporated into the Hyku codebase.

Some questions we’d love for you to consider while you’re exploring this feature:

Does your experience navigating it feel awkward, or does it feel organic?

Is there anything that confuses you? Is there anything you find unclear?

Is there anything in particular that you like?

Is there anything you think is missing?

Do the views of the expanded metrics show what you want them to show? Does anything feel missing?

Is this something you could see your institution using?

We look forward to hearing from the community and using this feedback to make our designs and work more reflective of our partners’ needs.
New Platform Sizze! Create prototypes of High-Fidelity and export to React code.
Tags: Handoff, Design, Prototyping, Code

Hello friends! Today we are pleased to present you new Sizze platform. Here you can easily prototype mobile app screens using base of prepared components and instantly upload the result to React or HTML code.

We are a comprehensive solution for the development of design and its instant integration into any project, making work easier and saving time for developers and designers.

sizze.io

Code React

You can immediately view the element code and quickly copy it now. We are sure that the code was structured perfectly and could be easily implemented into any project.

We plan to develop export for other popular UI frameworks in future.

2. Base of components

We have developed base of templates that can be easily customized for novice users or users, who value their time. Our database contains all available elements of IOS applications (in the future Android and Desktop). This significantly saves time and makes it possible to quickly assemble high-quality prototypes.

We are currently updating the list of components on a weekly basis, following the current trends in mobile design.

3. View Mode

When we were developing this feature, we didn’t want it to be just static screenshots, we wanted to add some dynamic to the project. Especially for this in view mode you have the opportunity to see hovers and clicks for the created pages, it is also possible to switch between the light and dark versions.

4. Functional

We know how important it is for users that the editor is convenient and fast, therefore we have optimized it for all browsers and added the basic functions of modern graphic editors.

sizze.io

Sizze is still very early, but we would love to see what you can build with it at this stage!
How I Built An App To Help Hikers Track Their Journey
Tags: Hiking, Prototyping, Product Management, New England

During the COVID-19 pandemic, I was looking for a fun way to improve my product management skills. I wanted to work on a problem I knew well and could solve for others. My criteria?

✅ Build a product to help people do something better in their lives

✅ Design, create, and launch it in less than a month

How I Decided What to Work on?

Earlier in 2020, I committed to hiking all of New Hampshire’s 4000 Footers, a set of 48 peaks in the White Mountains region.

After a couple of months of hiking, I quickly realized there wasn’t a great way to track my journey. I wanted to quickly see which peaks I had summited, how many remained, and remember the order I had completed them.

I relied on boring spreadsheets and wondered if there was a better way. My friends felt the same way: we wished there was something out there to address our needs. I couldn’t find what I was looking for, so I decided to build:

Helping hikers track + document their 4000 Footer journey in the White Mountains

I thought this was the perfect project to work on. Here is how I designed, built, and launched the Summit Chase over the course of a month.
UX/UI Case study: Socially responsible business.
Tags: UX Design, Prototyping, UI Design, Logo Design, UX Research

Learning by helping is a Social innovation lab, whose methodology is designed for the creation and development of projects and start-ups regarding social impact and non-profit.

Together, in collaboration with Arrels, a NGO with the purpose of helping homeless people, we are about to create the website of a social real estate agency. Cool, huh?

RESEARCH

Our goal is to find out the values ​​and aspects that our users appreciate in brands and that condition their consumption decisions. In order to better accommodate and communicate our brand values to them.

But first of all lets have a first glimpse into what do people really think about Real Estate Agencies and their charged fees. (over 200 interviewees)

70% have a negative or very negative view of the Real Estate Agencies.

80% consider Agency fees too expensive and with no value.

Users think Realty Agencies lack transparency and proximity.

Yes, indeed. This is a difficult subject in Spain with a long way to go. Nevertheless we have no abandoned hope yet!

That is a reality and more and more, brands are seeking to have an impact on society, a purpose beyond selling products, they are called Meaningful Brands.
Case study: A voice assistant for getting the news
By: Cameron Wood
Tags: Case Study, Prototyping, User Experience Design, User Experience, Vui

Case study: A voice assistant for getting the news

Concept

For our final project, I decided to keep working on Scoop, my news-getting VUI. The voice assistant helps users stay informed on top stories and also handles political queries. A few weeks ago, I made conversation flows for its five core tasks. For my final project, I decided to further develop Scoop by designing a VCD prototype.

Goals

Many people use voice assistants to get the news. Not long ago, these systems were not designed to handle such queries. When making Scoop, I aimed to create a VUI that specializes in these tasks and also considers the ethics of biased information. In addition, I strived to provide functions that other voice assistants don’t have, for example, particular political queries.

As for the device, I worked toward a design that suits the needs of users who wish to stay updated but don’t have enough time to dedicate to reading the news themselves. By further developing my prototype, I hoped to explore the intricacies of building a device tailored to an audience with busy lifestyles.

Implementation

My project was carried out in four phases: ideation, prototyping, testing, and refining.

Ideation:

The typical design for a VCD is simple: a power button, speaker, volume controls, and a microphone switch. When I first began ideating, I struggled to imagine what would make my device different than other voice assistants. So I took to Pinterest for inspiration. While looking at different VCD designs, I also referenced images of old-fashioned radios.

Since my device is for a rather specific type of user who values listening to the news, I decided it would be fun to reference old radio designs with Scoop. I also decided to make the device portable by adding the classic “boombox” handle that is still included in Bluetooth speaker designs to this day. After collecting inspiration, I sketched out my design ideas. Next, I moved onto prototyping.

One of my initial design ideas for Scoop’s VCD.

Prototyping:

Based on my initial design sketches, I created an analog 3D prototype for my VCD. I built it using thin cardboard, a heavy-duty x-acto knife, and a hot glue gun. For the power button and volume controls, I made paper attachments to indicate the on/off status and volume level. For the microphone switch, I cut an extra piece of cardboard to slide back and forth.
Mockup, Prototyping 도구 소개
By: 민현기 Min, Hyun-Gi
Tags: Mvp Development, Prototyping, Agile, UX

Learn more. Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Make Medium yours. Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore
4 Must-Have Prototyping Features for Designers Who Value Efficiency
By: Mohana Das
Tags: UX Design, Prototyping, Design, Productivity, Efficiency

The market for prototyping tools is a competitive one. There are so many great products built to enable designers to deliver the best experience for users. For a UX designer just starting out, the choices are endless.

In order to pick the right tool for you, you’ll need to explore everything at your disposal — including the heavy weights in the arena like Sketch, Axure RP, Invision and the new contenders such as Figma, Adobe XD or Wondershare Mockitt. Unless you try them, you won’t find the hidden gems that attract you to a specific application.

For example, even if its relatively new, Mockitt solves quite a few pain points I’ve had with my usual tools. And it made me think — why don’t more people know about this? They absolutely must!

So, I’ve prepared a (non-exhaustive) checklist of features to look for in your tool of choice, especially if you’re aiming to improve efficiency and declutter your workspace!

1) All Purpose Collaboration Tool

When I was at a corporation, they spoiled us with fancy equipment, innumerable product licenses and high-end machines. (It came with the added hassle of integrating several different tools into your design process.)

Now that I’ve gone freelance, I’m beginning to feel the pressure on both my CPU and my pocket.

What designers like us crave is a “one-size-fits-all” answer to our needs.

From wireframing, low-fi and hi-fi prototyping, design reviews, integrating stakeholder comments, to final presentations and dev-ready designs — its important to have one tool that does it all.
How to use overshoot to upgrade your UI animations
By: Martin Andersson Aaberge
Tags: Prototyping, Design, UI, UX, Animation

When you have spent a lot of time developing your prototype, it is nice to breathe some life into it. Animation is a perfect way to sell how your design will respond to user interaction.

Sometimes, you might find your animation feels a bit dull. You feel you have done everything right, but it still doesn’t quite sit. Your clients even tell you it feels stiff — Maybe it is…

Today, we are going to look at a simple technique that can give your animation an extra edge. It is a known principle that has been used for over 100 years, but maybe you haven’t had the chance to implement it yet.

We are talking about overshoot.
How to fix scope changing on IT projects
By: Martin Majling
Tags: UX Design, Prototyping, UX, Development, Project Management

Changing the assignment’s scope is probably the most common problem of an IT project between the client and the supplier. The scariest part is when a client requests changes without adjusting the budget and deadline.

There are many ways to avoid this problem, from describing user stories to the budget reserve. But only one is sufficiently visual and accurate to help the client imagine how the proposed solution would work. It’s prototyping.

Starting with the post-its.

Start with the main area like main functionalities, registration, setting, profile, etc. Then add expected pages and information to every main area.

Sketching with a marker on paper.

Every single page is sketched in low-fidelity with a coarse flip-chart marker on A4 paper.

Prototype digitization

Depending on the project type and testing needs, are prototypes from the middle to high fidelity. Most often, I’m using Axure because it helps me add realistic interaction and conditions logic.
Training a machine learning model to recognize Magic: The Gathering cards
By: Juan F. Mena
Tags: Machine Learning, Artificial Intelligence, Prototyping, Design, Product Design

Data collection

The first step was getting the data for the model to work with. I could have just looked for images of Lands on the web, but I wanted to build this model using my old cards.

I took a bunch of Lands from my collection, and in order to capture each one I decided to use the Office Lens app (coincidentally, also made by Microsoft).

Office Lens is a free mobile app that acts as your portable scanner. I normally use it to scan documents, but in this instance, it worked great capturing the cards: the app automatically detected the card, trimmed it, and it enhanced the final image. Everything with just one tap.

I used Office Lens to quickly capture each card.

I knew I needed to have at least 5 images for each Category or Label to better train the model. So I ended up capturing about 7 different cards for each one of the Land types: Forest, Island, Mountain, Plains, and Swamp.

Data labeling & training the model

This is where Lobe comes in. You will use Lobe primarily to do 3 things:

Data labeling. Building the Machine Learning model. Training the model.

And the best thing about Lobe is that it pretty much does #2 and #3 for you.

One pro-tip to save you tons of time when doing data labeling: Instead of just throwing a bunch of photos into Lobe, dedicate a few minutes to create folders and name them using the Labels you want to use in your model. Then put the images in their corresponding folder.

Folder structure to optimize data labeling in Lobe

And now, you can drag-and-drop your folders into Lobe. Lobe will now apply the folder name as the Label to each image within the folder. Again, this saves a lot of time in this process. (The alternative would be to manually label each image in Lobe.)

The following image is a snapshot of the latest state of my project:
Advanced prototyping
By: Mohd Bilal
Tags: Prototyping, Oneplus, Logitech, Product Design

Academic course

Project outline

Duration - 1 month

Faculty guidance — Ankur Khare

Project objective

To understand the right prototyping process and decision-making involved behind each product in the stage of prototyping.

Process

Choosing product Taking measurement Orthographics view Choosing the material Understanding material properties Building froms

Choosing product

Keeping the process in mind I had planned to focus more on learning the process and steps involved rather than focusing on making a detailed prototype of any complex product so I preferred choosing one plus adapter without the cable.

Gauging measurement

Measurement was performed accurately and efficiently to reduce the chances of errors

Examples of Measuring Instruments

Vernier calipers

Micrometers

Measuring microscopes

Roughness meters

Optical CMMs

Profile measurement systems

Coordinate measuring machines

I had considered the scales technique with 1:1

The filleted lines were considered 2mm in radius approximately due to a lack of tools(radius gauge).

Orthographic view

The orthographic view was made to understanding three-dimensional objects into two dimensional also to understand the Importance of alignment and no of views in order.

On paper

Digital

Rapid prototype (Paper modeling)
Prototyping is the shortcut to the success your team needs
By: Joshua Miller
Tags: Design Thinking, Prototyping, Design, UX, Figma

Prototyping is the shortcut to the success your team needs

So, you’ve got your team together for a brainstorming session where the the blue sky thinking begins. The conversation probably centers around what might this thing be and/or what should this thing be. However, after about 20 minutes the conversation devolves quickly into a philosophical debate that leads to nowhere where team members check out. This is the point where you need a prototype.

Prototyping helps key stakeholders and other organization members align quickly around an idea quickly poking holes into the ideas and showing problems that block it from coming to life.

You might have heard all the assumptions about how the should be this way because that’s what X Company is doing. Yet, a conversation hasn’t been had about why X Company did what they’re doing, who their market is, and what research they performed to go to market. A prototype can clarify all of this information and more.

Guerilla prototyping doesn’t have to be fancy.

Whether you’re making a fancy digital prototype in Framer or Figma or you’ve drawn up a mobile phone on a piece of paper with some tap options to take to office mates, even the simplest prototype can provide information both on usability, generate further divergent ideas, and give you that initial feedback to start to carve away at the design. If nothing else, you’re going to come away surprised at the findings and potentially have your team’s assumptions validated.

Your prototype will give you a confident platform shortcutting the back and forth convergence and divergence in the design process all while refining the idea further. I’ve built an entire user flow before having it eventually turn into a product idea I didn’t even imagine would be built all because we went straight from ideation to mockups to learn as much as possible in a short time span. Prototypes give my team a platform to discuss technologies to leverage, ways to scale, the true meaning of the product’s purpose, and the business and user goals it might solve. That initial brainstorming conversation led to the fragmentation of ideas now becoming solidified and documented via a prototype allowing everyone to agree on the holistic and realistic success criterias.

For more on prototyping, follow along here on Medium at: http://jshmllr.medium.com/follow and jshmllr.com
Mobile App: LikeIt — Shopping made easy with trust and first-hand experience
By: Paul Deepakraj Retinraj
Tags: Mobile Apps, Prototyping, Retail

App Concept:

LikeIt is an iOS mobile app (prototype) built for shoppers to share and recommend their recent online purchases and experiences with their friends and families. This allows for shopper’s friends and families to get better customer experience before purchasing a product and also shoppers to get some discounts on future purchases and also.

Target Audience:

All retail shoppers who purchase tend to items online but looking for a trustworthy product and first-hand experience before purchasing it.

How it works:

User:

People can log in with Facebook or Twitter accounts or register their account.

Once the user is logged in to the app, all retail items they get to see on major online retailers (like Amazon, Walmart, Target etc) will be shown on the shopping page under each category.

User can select and make a purchase on any item there directly, as it has the payment gateway built-in to integrate with the retailers.

After a few days of use of the product, the user will be asked to share their experience on the purchased product with their friends and families with a custom note recommending or sharing their own experiences.

A notification would be sent to all their friends and families with the user experience on it.

Friends and Families:

Once notification received from their friend or family member, people will look at the experience and recommendation and make a decision on the purchase. This allows people to gain confidence before purchasing any product by feeling first hand experience from their own friend or family member sharing it.

If they choose to purchase the same product that was shared and recommended by their friend or family member, they can also share their experience with their friends and family circle.

Once the product experience is shared via this app, the people who share their experience will get some discount on the next purchase on this app.

Screenshots:

Login Screen

Featured Items

Shopping categories

Login screen

More option screen

Retailers on the map

Best offers and deals for the day

Track order page

Login or register page

Register page

Share experience on Facebook

Share this app on Twitter

Please Note:

LikeIt app team or any affiliated party does not own any inventory of the retail items but all the items are intended to be sourced from major online retailers.

app team or any affiliated party does not own any inventory of the retail items but all the items are intended to be sourced from major online retailers. At this time, LikeIt app is at the prototyping stage and so is not available in any app store yet.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
UI Design Blog
By: Isha Sharma
Tags: Prototyping, UI Design, UI, Illustration, Graphic Design

This year, I’ve been iterating over my graphic design & UI skills. I’ve created website & app prototypes, so as to refine my skills & learn something new this lockdown. I’ve been continuously updating my personal portfolio, as well as, my Dribbble account.

Now, you can scroll down and enjoy some of my prototypes & illustrations.
How to Make Simple Interactive Buttons in Figma in 2 Steps
By: Mike Gorrell
Tags: Interaction Design, Prototyping, Design, Figma, Tutorial

Like many other product designers, I was a Sketch user for the past few years. It’s easy to learn and understand, I liked integrating with InVision for building prototypes, and features like auto-stacking with Anima made it easy to work with more dynamic content.

Then I joined the crew over at Y Media Labs, a team that has completely migrated over to Figma. I had dabbled in it a bit, but never used it as my primary tool. It was sink or swim for me. And that’s when I realized that Figma is simple, easy, and powerful as all get out. In just a couple weeks I found myself not only understanding how to design like before, but also uncovering some “Figma hacks” to really bring my prototypes to life. Here’s one that I’m really digging these days:

Bringing it to life

At YML, we have a mantra of “prototypes over presentations”. Walking through a prototype makes your design solutions feel real, and communicates so much more to your clients or stakeholders than a static design. It also helps you as a designer to not fall into the “Dribbble trap” of designing (maybe it looks nice in a little screenshot, but how does it actually work?). Making buttons that actually behave like buttons is a small step to make your prototypes really come to life. Let’s dig in.
How Big Organizations Uses MVP & Prototypes Development and Succeed Vigorously?
By: Jasson Smith
Tags: Mvp Development, Prototyping, Minimum Viable Product

Majorly big enterprises do not launch their products to market directly without seeing how their targeted customers interact with them, so what they did is they launch a beta version of their main products, and then share with a specific audience, to see their reaction, and the drawbacks of the products, and what are the things need to be updated for the main product.

Now, why do they do that?

Functionality Centric Development Approach

Clearer Picture of Challenges

Initial Glimpse of UX for Beta Product

Users Pain Points Understanding

Easy Interface for Users

These above are just a few of the advantages that MVP offers to build a digital product, and prototyping is the 1st phase of development any of them, to understand the targeted market, and what are the preferences of those individuals, and how to consumes content, to build a product that they have never seen.

And because of incorporating prototyping & MVP development in the actually mobile or web based app building process help making right every aspect of them, and because of that these organization reduces the chances of getting failed after launching it to the actual market.

Furthermore, many of you have seen big firms, like Facebook, Instagram, Reddit and many more have launched a beta version of their new update to understand their existing audience, and to acquire a new set of audience to their similar platform, and by releasing these beta versions, they tested out many experiments, and because of those experiments, they launched their final versions, and they do get success in many cases.

*Therefore we need to understand the power of prototyping & MVP development for any digitalized business in the market, who is online, or willing to be online, and dominate market with it’s incompetent Digital product. This is my own experience of building mobile and web based application from scratch to see how the audience behave after launching the beta versions, and then launch the actual final product to the market.*

However, any of you have any questions on Web & Mobile App design and development, I would love to answer them, and help you out getting better at this sector of tech revolutions.
PET CARE SERVICES
By: Vrinda Aggarwal
Tags: Dogs, Pet Care Service, Paper Prototyping, Prototyping, Pet Care

THE SECOND STAGE : PAPER PROTOTYPING

After the research was complete, we had to move forward individually. In this stage I chose ‘dog grooming centers’ as my subject.

I further researched on the ‘dog grooming centers’, about what all services are present, what equipment is used and what are the modes of grooming.

After researching, I decided to provide dog owners with ‘grooming at home’ service, and for this I started working on designing a website wireframe.

FIRST PROTOTYPE-

The name of the website is ‘doggo day out’ which offers home grooming services. The services provided are

bath and dry,

nail clipping,

ear cleaning,

teeth cleansing,

paw massage,

mouth spray,

full body hair cut,

30-minute massage,

Fur coloring,

fur extension and

fur braiding.

In this prototype, I included a home page with the logo, ‘about us’ section, ‘dog of the month’ section, ‘our services’ section and a ‘booking section’.

After presenting this prototype to my professor, I got a feedback to make a more user friendly prototype.
The WAZIHUB project launches the second edition of its Innovation Competition
By: Wazihub Iot
Tags: IoT, Prototyping, H2020, Wazihub, Waziup

After a successful first edition, the Wazihub consortium funded by the European commission under H2020, dedicated to the creation of affordable IoT solutions in Africa by young entrepreneurs, launches the call for applications for the second edition of its Innovation Competition.

The initiative, the first of its kind in Africa, puts into competition teams from six (6) different Tech Hubs, partners of the project in six (6) countries namely Ghana, Kenya, Senegal,South Africa, Uganda, Tanzania.

The WAZIHUB (www.wazihub.com) project aims at enabling startups and entrepreneurs to innovate and build low-cost, IoT prototypes using the WAZIUP (www.waziup.org) technology. WAZIHUB’s main objective is to empower affordable and open IoT solution adoption in Africa. The project consortium is formed by 10 African partners and 4 European partners and provides free capacity building and low-cost end-to-end technology.

In the first edition, a total of 117 applications were received (representing more than 400 entrepreneurs) and 31 teams were selected to join the competition.

The selected startups covered a range of sectors such as Agriculture and Farming, Construction, Covid-19 response, Security and Disaster prevention, Health, Smart city and Home automation, with vast potential to create positive change in their communities.

For this second edition, the 30 selected teams will be supported for 15 weeks by the partner hubs in their business development, but also in the technical aspects, particularly development of minimal viable products. Entrepreneurs will learn how to build working prototypes or improve on their solutions with the technical support of our trainers.

Each selected team will receive a Waziup IoT development kit and €200 voucher for any additional requests. These kits will be used to develop their minimal viable products.

Applications are open to developers, engineers, and IoT enthusiasts until december 10th with their existing IoT prototypes or ideas.

A cash prize of €1,000 will be given to the best team of each hub.

Application link: https://forms.gle/qxBxuaAyyGpBJuzPA

For further information contact: team.wazihub@fbk.eu
Ironhack’s Prework: Design Practice
By: Elena Marsili
Tags: Prototyping, UI Design, Airbnb, Ironhack Prework, Figma

This week I have been working on the UI module of the Ironhack’s Prework, it has been a rollercoaster and I am learning much more than I thought it was possible in such a short time.

With the UI module of the Ironhack’s Prework, I am moving my first steps into UI design. I knew by instinct that I would have liked it but, since I come from a totally different background, I was also a bit scared that this would be out of my league.

In this module I learnt a lot about Color Theory, Typography, UI Elements and Wireframing. At the end of the theoretical classes, the hands-on design practice started.

I was introduced to Figma, a software that I have grown to like a lot in just a few days. As I said, I am new to the world of design, and to all of its softwares, so everything was a bit mysterious to me at the beginning.

The first exercises I had to do in Figma, were like a warm up. I had to learn how to use Boolean Operations and how to create two simple designs (they look simple now, but at the moment I didn’t know where to start): the moon and a rocket.

The main challenge for me while doing these first exercises, was to understand how to identify the basic shapes that compose an image, in order to reproduce it just using circles, lines and polygons.

The next exercise consisted in copying the Airbnb Desktop landing page at the best of my capabilities. This was the given page to copy:

And here is my version of it (I tried to maintain everything as similar as possible, the only thing I had to change was the background image, because I wasn’t able to find the same one they used in the website):

I did this exercise by trial and error, since I hadn’t found the Figma tutorials yet. Now I know that many things in the design and in my method could be improved.

At this point I moved to the first real exercise: mocking 5 screenshots of an app of my choice.

The app I chose was the Airbnb app.This time, I watched all the videos of the Figma youtube playlist “New to Figma? Get started with Figma tutorials” plus some other, so I had a much clearer idea of what I was doing. Also, I got a bit overexcited about it, so those 5 screens turned into 17, because I decided to recreate all the screens needed to complete the following task: renting a room in Valencia from the 25th to the 28th of November, for 1 person and paying it with a credit card. While watching the Figma videos I discovered how to create interactions and how to build a working prototype, and I wanted to try it.

Here are the screens I designed:

Key learnings:
Agile Problem Solving
By: Elyon Digtial
Tags: Prototyping, Agile Development, User Journey Mapping, Corona App, MVP

MVP for fast Corona testing at a University

Motivation and Problem Statement

Fast testing is conducted in a dedicated location remote from the actual university building

How to make sure that the tested student is able to present the negative test results at the university checkpoint and share as least as possible of private information with as few people as people.

Students arrive at the testing location Fast track test is done in location A (5 min duration) Results are given to the student If negative, student should receive the results On arrival at the university the student must present the test results

MVP Idea

Build a simple app for the medical stuff (tester) to send out an SMS to the student containing test results and additional non personal information.