I’m Johny Vino, an energetic designer who combines rapid prototyping, interaction, motion, and visual design to transform thorny problems into elegant solutions.
My work goes beyond conventional interaction patterns and visual styles. I specialize in consumer products that distill complex data into simple and beautiful visualizations. With my extensive experience working in tandem with engineers, executives, and marketing teams, I know how to ensure user needs are aligned with business goals.
How volleyball made me a better designer
Playing volleyball twice a day for 8 years taught me how to make intentional decisions in complicated situations. I had to work as a team, regularly iterate through practice and understand the psychology of fellow players under intense, competitive conditions. These valuable lessons I learned on the volleyball court have carried over to the digital design work I do today.
The family wall helps you to privately share information with your family.
What I did: Product Design, Motion Design, Tone of voice.
The brief: After releasing a beta version, Eric the found of app approached me to address their core problems. I made nine different prototypes for the home page that helped them to understand user needs and make decisions. Then redesigned from the ground up to help the family audience to have a more personalized app. In addition, worked on their tone of voice.
Step 1: Understanding the core of the product
Step 2: Analyzing the existing design
Their initial version performs well as a utility tool. But they necessitate bringing a meaningful connection which serves the family members with emotion and empathy
Step 3: Understanding what MOM needs
The initial week was spent talking to families to understand how they are scheduling life now. The main takeaways are currently available apps don’t give the sense of personal connection. Likewise, a lot of features on existing apps are not necessary for simple family life.
Step 4: Analyzing comments in the app store
Synthesis of research
Features Discoverability issues
The users want to add an event when they are in the calendar, not another activity screen.
They don’t feel the emotionally bounded to app.
Proposed an entry screen with fast access to significant sections (Calendar, To-dos, location, Photos) and made accessibility straight shot.
Dashboard screen more personalized (Calendar, To-dos, Shopping Lists, location, Photos).
Navigation and transition should be easily understandable.
Home screen variations
V1: More dashboard style
We tried a completely different direction focusing on showing all the moving parts in a single screen, but a lot of people felt overwhelmed with the amount of content.
V2: Pure style
So we moved to a much cleaner version with bold cards, and cute illustration to make the app more appealing to kids.
Although users especially like the colored version they still felt that this was like a utility app. So we decided to step back entirely to synthesize the feedback we got from all these 5 versions.
We discovered of paramount importance to test users were seeing the family image as the cover.
V3: Share your Family’s Best Moments
Instead of showing features, we decided to show a large family cover on the home screen.
After testing both versions, we found that most people preferred a larger image. Next, we crafted an interactive prototype.
Get things done!
Bringing the list together aesthetiacally is the primary challenge on this screen. We have tried two versions, one more concise list view and another with categorized colors.
The shared calendar helps organize everyone’s schedules, activities, and appointments in one place that’s accessible anytime, anywhere.
Henceforth we decided to color code the calendar. But when we user tested these versions, people mentioned they dont have many events per day. So decided to make a second version more pared down.
More re-occurring events
Unlike the business calendar, the family calendar has a lot of re-occurring events. Users typically have the same task every day. So enlarged the card bigger with the relevant images so that users don’t need to read the content of the event each time. Finally, we added a more personal connection to the calendar than just a list of activities.
Make parents less anxious
With Real-Time Location and Safe Zone Alerts, you can see on a map where your kids are and be notified when they arrive at home, school or any favorite safe place.
Mom’s particularly though sometimes get anxious by seeing the kids activity, so we tailored the interface to gamified by obscure level of details.
We encourage the users to upload cozy pictures so that they get a warm and gathering of loved ones feeling every time they open an app.
Tone of voice
To reach a wider audience the app Founders wants to change the product position from a family assistant to more personalized family-centric organization tool.
In a preliminary step, we asked 17 users to take a screenshot of what features they use most. Then there were mapped into mood board to create an alternative tagline.
Working closely with the founders we brainstormed to derive and we picked the tone that would resonate with a board spectrum of family-oriented users.
Making anxiety relief, interactive arm wrestling and zero distraction navigation possible with the Apple watch. I contributed the UI design and programmed Arduino for our interactive prototypes.
Project 1: Mindfulness
Team: Addi Hou, Mia Darling, Johnyvino
Problem: The modern world grows more advanced by the milli-second, thanks to technology. The people have instant access to information and communal action channels like never before, but there are many harmful effects of this dependence on smart devices, especially amongst children.
Challenge: Since kids are natively attuned with visual communication and stimuli, we wanted to create a product that is thoroughly engaging while simultaneously helping them to combat the stress of the external world. The ultimate goal was to allow them to focus on self momentarily.
Solution: A product that mimics the users’ breathing patterns through the use of a Hoberman Sphere that is minimalistic in aesthetics. That leads to a relaxed state of mind.
Kids who practice yoga, meditation and mindfulness build skills of attention, self-awareness, self-management leading to more responsible decision making and prosocial behavior
The arrival of the smartphone has radically changed every aspect of teenagers’ lives, from the nature of their social interactions to their mental health — The Atlantic,
80 percent of kids with a diagnosable anxiety disorder and 60 percent of kids with diagnosable depression are not getting treated Children’s Mental Health Report
I fancied making a design alike kid’s toys. We heeded the Hoberman sphere in two kid’s place. That insisted us to connect breathing exercise and Hoberman sphere as both works on the same mechanism.
We envisioned this product can connect Apple watch and Hoberman sphere.
Building the Prototype
To test our idea we chose Aurdino, the stepper motor and made the entire Hoberman sphere to expand and contract.
We tested with 5 kids and monitored their health performance.
From the evaluation, we hypothesized that all the kids felt pleasant and relaxed after using BLOOM for only 5 minutes. We have validated the design with a fair measure of participants. However, we need to examine with a large number of users to authenticate the model.
One kid commented that “I need this for my Dad!” Haha :).
We believe that there is an excellent opportunity to reduce anxiety through Bloom.
Testimonial from a dad
Real world application.
We think the aesthetic elegance and usefulness of this product could lend itself to a consumer right to be installed in a child’s room. Also, the product could potentially be useful in hospitals to aid in the following conditions:
Anxiety and depression.
Even as a waiting room activity
Project 2: Interactive arm wrestling keeps spectators fully engaged and bet.
Team: Addi Hou, Mia Darling, Johnyvino
Problem: Human dependence on technology has made people less physically sociable. We live in a world in which ‘connection’ more often than not means virtual and digital. Technology has reduced physical contact with fellow humans considerably and created a future of challenging human interactions.
Challenge: Create an interactive experience that combines an essential human physical interaction with motivating factors that could keep the users as well as spectators fully engaged.
The time and effort we put into our virtual worlds limit the time to connect and especially to communicate on a deeper level in our real world.
While sports fans typically don’t have any effect or influence on an athlete’s physical ability, they do have the power to make or break some professionals’ psyche and can enhance or undermine concentration.
We live in an era where the boundaries between high and low brow are very much blurred.
The relationship between competitors, spectators, physical devices, physical computing, and surrealism all had something to do with Hands Down.
From the onset, we wanted to make the experience as rewarding for the spectators as it would be for the competitors.
Competitors can request their friend to the participant using an Apple watch.
Heart rate monitor of each contestant broadcast to the viewers.
On screen, we could display 3–2–1 timer for when the match begins to create drama and put the focus on timing.
Display money purse and wins/loss record of each contestant.
On a large screen behind arm wrestlers, we could show a visual display of the heart rate of each wrestler
The struggles of wrestlers on the screen using a simple visualization like a clock hand that sways from one side to the other based on arm angle
Countdown timer for the 60-second time limit to increase tension.
A way for viewers to gamble on who they thought would win and become more engaged through a mobile device app that could be live broadcast on to the screen.
Building the Prototype
To test this idea we made a quick and dirty prototype. We invited 3 teams to participate in the game, it was really intense which we have not expected. You can see the emotion of users in the photos.
Behind the scene:
Project 3: Navigation with zero distraction.
Minimal Navigation straight on your handlebar, through an intuitive LED light towards the quickest and safest routes.
Team: Yumeng Ji, Johnyvino
Skills Involved: Smart object• Internet of Things (IoT) • Connected Devices • Navigation • Artificial Intelligence
Problem: Using a phone while biking lead to accidents. Because notification you will distract people. Moreover, your phone may fall and break.
System diagram and technology thinking
Initially we allocated time thinking about the technical requirement to make sure this project is feasible.
Our idea is to show minimal navigation using apple watch that can be mounted on the bike handlebar.
To validate our idea we prototype a quick version using Arduino.
V1 Feedbacks: Users wants an earlier indication if turns are ahead. The four directions arrows are confusing.
V2 Rounded Version: Dividing by a single arrow is not easily readable. Arrow is not thick enough. The color indication is important.
We have mimicked the colors of the traffic signals to convey the meaning quickly.
How does Navi-pro Work
We connect to Google and Apple maps to the aurdino GPS sensor to bestow the direction.
This project is advised by Matthew Borgatti, Co-founder, and lead Scientist at Super-Releaser and worked for NASA
Help students to find the resources they need instantaneously.
Crafting a holistic look and feel
Solved the problem of a massive drop in login flow
Connecting parents to kids
№1. Student Struggle to final the resources they need.
The initial version we had is super hard to navigate and browse subjects
Brainstorm and Analyze Ideas
The brainstorming started with a conflict of ideas I suggested to showcase only the main subjects on the home screen. My manager advised showcasing chapter and subjects. I remember the day we argued for like 3 hours, it’s around 7:00 pm.
Then both left home. Next day we decided to go to the public school nearby and try both of our idea with users. In testing also we get a mixed result. So that's not helpful.
Then we researched how books are organized and we found out an interesting grid pattern, we literally took that physical arrangement as inspiration and transformed into the home screen. That version solved the overall navigation problems.
№2. Crafting a holistic look and feel.
We are a team of 3 designers. Moreover, there is a marketing team of 10 designers. New features get added every month. That result in a breach of consistency.
Henceforth we decided to make a scalable design system across all the platforms. I worked closely with developers, marketing teams to accumulate their inputs. Further, I talked to our stakeholders to understand the vision of the company.
As a team, we went outside and captured a lot of photographs from the educational institution to understand the theme and feeling schools are using nowadays. I created all the nested symbol library with the proper naming convention which shared across the team.
№ 3. Solved the problem of a massive drop in login flow.
Initially, we assayed to gamify the login flow so we had 12 screens ahead of login, that leads to a huge drop of users.
We stepped back and mapped all possible flow under signup and log in. We literally cut down all the redundant screen to fabricate into 3 screens. After that, I spend a lot of time talking to a different stakeholder and executives to explain the impact I am envisioning.
We released to 50% of the user, and 45% of users signed in and started using our app. This flow ends up being a successful project of the year. Although its a small design work, the thinking behind took us a long time. Besides, we need to explain to exceutive team thoughtfully.
№4. Connecting parents to kids
Started with failure:
Parents requested us to showcase the kids learning behavior. I came up with an idea of showing the graph on the home screen by acknowledging parents needs.
Surprisingly kids stopped using the app after we released this feature because children felt stressful to look at their charts and comparing with other kids. So we removed this featured in a week.
Though we saw a constant request from parents. Therefore we decided to purpose a standalone app which is just for parents.
Parents can observe and give thumbs up for their kid's progress, also they can gift merchandise. That app brings us huge revenue from merchandise that we have not to expect.
The fun team you can find them on Linkedin.
Top to Bottom: Sreejesh & Vignesh, Kumar Gaurav & Satya samanta
About the product: Zoho finance is a unified platform that helps you from invoicing to order management to account, Zoho Finance Plus has all the tools you need to streamline all of your back office operations.
What I did: I worked as a visual designer to streamline complex invoicing, books, inventory, and subscription system into clean interfaces with easy to understand data-visualizations.
Though we had a Zoho invoice creator, 89% of small business owners demand an extensive invoice template library that is unique and humanized.
Henceforth, I created a beautiful and rare looking 30+ invoice template. That increases the Zoho invoice users by 10%.
An effortless way to view various notifications
Our users complained that they get the opverwhlemed amount of notification they get every day. The reason is all notifications look the same. Therefore I come with the idea of adding an icon which classifies each information also makes a list accessible to glance.
After the implementation, the Notification engagement ratio increased by 7 %.
The business owners desired to know the pending invoices when they are creating a new invoice for their clients.
Accordingly, we decided to add a contextual menu which will appear only for the clients who has a pending invoices. Plus, you can view the client entire history.
Worked on the Invoicing.
You may start wondering who is using the windows phone nowadays. Three years back we had a lot of users. I honestly love working for windows design, because it is a plain and bold design. I mostly worked on creating icons and a data visualization part.
Intuitive representation for complex data
The primary challenge we faced in the dashboard is displaying various number more edible.
We chose to arrange numbers logical based on how the sales process work. So that it’s easy for anyone to relate those number logically. Also, provide a little round dot to represent the stage of each order.
The problem we faced in sales order listing is we need to show many columns in a single table. However, we don’t have much space, so we came with the idea of a simple visualization technique of displaying circle, semi-circle with varying colors visualization so that the users can see the overview quickly.
Do more in a small screen
Helped to make the tip calculator app. Plus made for Zoho invoice interface where users can quickly match the invoice and expense.
I designed a standard integration screen for Zoho finance products.
Add an attachment to the invoice.
Quickly add an attachment to invoice. Also, you can download or delete the previous invoice.
Respect native feel
After our success of Invoice template library, a lot of local business owners requested for an android app to manage their business. So we created a simple app with native Android feel.
I did a full visual overhaul of their wireframes and worked iteratively to end at the final intuitive and visually appealing product.
Tags: UI design, Strategy, Web Design, Tone of Voice, Motion Design. Mission team: Jeffrey Su. Company: www.onfocoin.com
Changing people’s perception over cryptocurrency
How might we help an older demographic understand and send cryptocurrency without getting overwhelmed with the technical side?
We were thrilled to work with Johny on our redesign. Johny was very efficient and extremely collaborative. It felt like one team working toward the same goal, and we are so happy with the end result — J.R. Forsyth.
Quick convos with founders
“How to make our app used by people from all ages”
“There is a huge problem in translating experience to the web in dev team”
Giving focus to what matters to users
We made a conscious decision of hiding the concept that this a cryptocurrency app.
But this version flopped because the crypto app is different from the banking app, users don't want to see their balance up front. The principal action they want to have is sending and receiving action.
Understanding of Human Interaction
We stepped back and researched the human history of money changeover. Surprisingly we found an interesting interaction, when we give money our hand will be on top, and our hands are down when we receive money. We decided to bring that experience into digital.
Fun and functionality
Swipe up to send, because our hand will be on top when we give money.
Swipe down to receive, because our hand will be down when we get money
As you know, bring up keyboard is painful, therefore we crafted whole experience is with mere tap and swipe, with added micro interactions to make it delightful.
It’s simple, Literally
We tried to convey the meaning of a personal connection than a nerdy feature details.
Wider Yet same experience
Although we assume everyone has a mobile, still, a lot of elderly users use web experience. I created the design system to unify look and feel across the platform.
All size and shapes
Cryptocurrency exchange for all ages with the accessible and visually appealing cross-platform design.
About the company: Tekion is a unique cloud-built platform, delivering business applications that combine advanced machine learning/ AI, and Human-Computer Interaction (voice, touch, vision, sensors, and IoT) capabilities for personalized and seamless consumer experience. Tekion is currently focused on delivering applications and solutions for automotive OEMs and dealers to transform the automotive retail experience.
Building a beautiful and productive Fixed Ops: The team had a bulky challenge of distilling the complex enterprise system into a consumer-facing product which is more fun and engaging. That’s why they hired me because I had both the Electronics and consumer-facing design background.
What I did: Product Design, Motion Design. Team: Chaitanya medu, UX reactor.
Impactful work I did.
1. Helping computer novice to use the software with a breeze: I have designed a table interactions library which is beautiful yet highly functional. That got implemented across all 17 products.
2. Automotive Customer scheduling: Helped saving service advisor’s time also draws more customers. The app I designed increased the new appointment by 43%, with its user-friendly, personalized recommendation and an automated reminder.
1. Helping computer novice to use the software with a breeze
Enterprise software design didn't change for 100 years, and most of them look like a command line. That leads to day-to-day inefficiencies, bottlenecks in operations and a huge drop in profits.
After our first month of research, we listed down all the possible scenarios dealership need.
We made an initial bird view of overall dealership operation from financing to parts to accelerate the sales process and avoid bottlenecks
Sadly, this version does not work out, because lot users seemed overwhelmed by the amount of data. They wanted us to have a simple table that they used for the past 20 years.
Based on the feedbacks we made lighter and table centered interface.
Work smarter and driving development.
Initially, I designed a screen by screen. However, we had 17 product all of which functionally works the same with different content. So I decided to step back and think on module level. Because our developers are using React native where everything is organized by components. I created a symbol library for them. That increased our production rate by 200%.
78% of Enterprise software is made up of tables.
Listed down all the interaction that could happen in tables. The most surprising thing happened to me is 78% of Enterprise software is made up of tables. Therefore I give more priority to table interactions.
Table Customization interaction
1.Add/ Remove column, Resize row height — Basic
2. Filter, Pagination, Column expand — For Pro users
3. Contrast, Search — For elderly people
View more details
1. Modal, Expand, Multiple popups
2. Slide in
Scroll in the table: Vertical and horizontal scroll vertical and horizontal
Hover action over with action
2. Automotive Customer scheduling
Keep your team focused on their customers.
Using an intuitive list and easy filtering service advisor can stay focused on the customers instead of scrambling with software.
Revolutionize Booking Process
“ On average, advisors spend 21+ hours each month scheduling appointments”
Therefore to enhance this phone-based process we designed an user-facing booking system. That system reminds due dates, service expiration date, recommended parts. There users don’t need to worry about having a separate calendar.
Each dealership can customize their own style, also the app will adapt to any devices.
Proposal both digital and print
After the Manager analyzes a car, he will give you a proposal and recommendation for the things that need to improve in your car. I have designed a simplistic document view with an enormous amount of content.
Simple Yet beautiful
During our research, we found that most users schedule an appointment for the current week or the next week. Therefore we provided the users with only crucial details. Besides, the system remembers their previous advisor and give them a recommendation.
During my time our startup has grown from 25 to 150 people, that gives me huge learning in term of scaling a product. Also, our founder worked for Tesla, so they care subtle detail. Those are huge learning in my life.
Pushing the evolution of Outlook Mail to the next level.
What I did: Product design, research, prototyping, motion design. Team: Miles, Ogden, Charles Riccardi, Dominic Davies, Wayne sun, Erin woo
Apple Watch Design
Our principal designer Miles gives me an opportunity to completely redesign outlook Apple watch design. I spend time with Ogden [Lead developer] to understand what they can push to live next 3 months.
The existing design has a major font hierarchy and information architecture issues. Though before jumping into design, I wanted to make sure I am solving the right problem, therefore I did a little bit of research.
I spent two weeks reading all the comments in the user’s voice and made a list of features users requested.
GDPR Headache time:
I crafted a survey and posted online, but due to GDPR rule, we have to wait for 2 weeks to get approval from admin team. I am really thankful for Montine our researcher helped me on this.
We get a response from people all over the world with a spectrum of users from pro to navie.
The team had a lot of creative ideas which is researched, and they know these features will make an impact.
But they have not put together as a cohesive story. So I took this project and made a high fidelity animated prototype that provokes the sensation of product management to develop the features.
During the presentation to executive stakeholders, our Principal Product Design Manager, Miles Fitzgerald said the work we completed helped them see proof of the concept of ideas in a single story enabling Microsoft to visualize the future.
Helping users to compose an email using one thumb
Helping users to switch between calendars quickly
How to make the search experience easy peasy
Creating new email quickly on the go with coffee on another hand.
Make tiring calendar invite flow effortless using AI and machine learning.
It’s easy to multitask on the desktop, but not on mobile. So created a concept to solve that problem.
Integrating Microsoft to do and outlook calendar app
Do not disturb mode micro-interaction
Quick collaboration with a team
How to integrate the todo in outlook mail, without overwhelming
Surprising research insights
During my interview people always complain about the notification.
If I don’t do this research I will be designing only the watch UI. Considering I did research I know precisely want user needs so proposed this watch notification setting screen that can be included in the Outlook mail.
Outlook on-the-go Story
I assigned this project to myself and made cool looking illustration which blends with outlook theme.
This may not look like a prominent feature, but we spent so much time discussing the word ‘Cancel ’ in the popup.
Because there is a contradiction, we call the pop name as cancellation pop, so users get confused if I click on cancel it mean I am canceling the event or canceling the popup. So we decided to remove it.
Android New home screen
Contributed concepts for Outlook android home to screen to by adopting new material design.
Learning from the design team
Conveying feedbacks clearly and thoughtfully. [ from Woo]
Think and give super smart suggestion on the fly. [ from Siddhant]
Pixel Perfection. [ from Miles & DOM]
Typography, hierarchy, how to be a New Yorker. [ from Wayne]
Super cool at the same time knowledgeable team player,
Cleanmock will help you to spend your energy on what matters — your concepts and ideas.
What I did: Founded and led business strategy for a design presentation tool, after 1 month achieved 10000+ active users and top product on Product Hunt. Collaborated with Tekeste Kidanu. Website: www.cleanmock.com
The UX designer has to make a presentation every day. The repetitive process of masking and resizing for the mockups is such a time-consuming task.
In spite of the fact that there are 100 mockup apps, none of the tools made for UX designer. Therefore I made a quick concept, posted online and asked people to join the slack channel. In a week 2500 people joined, shared their problems.
1. Defining Vision
I made a clear vision that this tool is not for making marketing screenshots or promoting your designs ergo we won’t make fancy angled mockups.
Cleanmock just focuses on showcasing your ideas clearly.
3. Build a community
We’ve prioritized all of our decisions based on community needs
4. Product management work:
Organize the priority of feature.
5. V1 Product Hunt release
We released on product hunt on Jan 18 received many awards from product hunt.
🏆 #1 Product of the Month
🏅#1 Product of the Week
🥇#1 Product of the Day
Problems in V1
In the initial version, we had 3 screens before you actually reach the main application.
We assumed that everyone will pay for our product but we faced a huge drop of 31K users.
Version 2: Showing value upfront.
Without logging in, users can browse all mockups. Once they select the specific mockup we will ask them to signup. This strategy leads us to a lot of paid users.
Pricing users can easily relate too
Other small screens
After our v2 launch
As you can see from a graph, there is a big increase in annual revenue.
Testimonials from people
We are happy to get testimonials from reputable users.
As the product owner, I have to observe users feeling not words. Because humans say something and need something else.
If we expect users to pay for our product it never going to work. We need to show the value first before asking for money.
Understanding the competitive market and writing a perfect UX copy which resonates with your users.