How Justinmind helps prototype mobile apps for the diabetic community
Designing a healthcare mobile app prototype for diabetics was a synch for Mangoman with Justinmind prototyping tool
11 years ago, Cyrus Khambatta was diagnosed with Type 1 diabetes. Overnight, he went from being a sport-obsessed 22 year old kid to someone who had to worry about insulin injections and unknown diet plans.
“Being a senior at Stanford University studying Mechanical Engineering, my life was consumed with math, physics, the machine shop, and lots of beer. I didn’t understand what I had done wrong. More importantly, I just wanted to be normal,” says Cyrus.
Gradually, Cyrus got to manage his own illness through diet and exercise. And the longer he did so, the more he realized that there wasn’t enough support out there for diabetics who wanted to change their lifestyles for the better.
So in 2014 he set up Mangoman Nutrition and Fitness, a company to enable people who suffer from diabetes to control, and even reverse, the disease using diet.
Why Mangoman needed to design a healthcare app
Cyrus quickly saw that his services were in high demand. However, he felt that he wasn’t reaching all of the Bay’s diabetic community. So he decided to take Mangoman to the next level with a diabetes management mobile app.
The aim was to design a mobile app that made it easy for diabetics to record all their personal information in a simple format, and then learn from it. Mangoman’s mobile application looks to harness the power of big data so users can learn not only from their own data but also from that of others. Pretty ambitious!
A data-driven, team-friendly prototyping tool for mobile apps
The guys over at Mangoman set out on a hunt for a wireframing and prototyping tool that would let them prototype with real user data, iterate fast and collaborate continually. That’s where Justinmind came in.
“In terms of usability and functionality, compared to other tools, Justinmind is 1/100 the time investment in order to get something useful back. That is why I think it is fun to use.”
Cyrus knew that the diabetes mobile app he designed would need to dovetail with Mangoman’s wider vision: marketing a nutrition and fitness program to people “looking to make significant changes to their overall diet and fitness regime”.
That meant his mobile app design had to be intuitive and usable not just for the Bay Area’s tech whizzes, but for anyone coping with diabetes. He needed the help of his Mangoman team to bring to life the most user-friendly healthcare mobile app possible.
Read our 6 step guide to prototyping a mobile app
An app prototyping tool that boosts team collaboration
Like many team-propelled mobile wireframe projects, the first challenge for Cyrus was getting different colleagues on the same page regarding the design and functionality of the mobile UI design. Wireframing out a concept collaboratively is a crucial step towards creating a solid mobile UI design for the end customers.
Cyrus and his team took full advantage of Justinmind’s collaboration features even at the dirty wireframe stage. The tool’s teamwork capabilities mean that prototypes can be worked on collectively, even from separate desktops. Team members can open, edit and iterate on the same wireframes and prototypes simultaneously.
Our Teamwork feature means all you have to do is Commit your changes when you’re done and the iterations will be there for everyone to see.
And while collaboration is all well and good, sometimes you might need to make sure you’re the only person working on a UI prototype. Not a problem: just lock the elements you need (screens, templates, masters, etc) of the app or web prototype and avoid iteration clashes. Unlock the elements when you’re finished so your team can go on working.
Cyrus’ team doesn’t really follow a linear process, so Justinmind came in really handy for them. The ability to edit any screen, any animation, any dataset individually at any time, meant that, despite there being four people working on the Mangoman wireframe, Justinmind made the conceptualization of the app concept easier and faster.
There are tons more Justinmind team prototyping features where those came from. Check out how to prototype in teams here.
How prototyping catches UI and UX glitches before going to code
Once they had the first draft of their mobile wireframe in hand, the Mangoman team realized that their initial goal was not realistic. It was over-complicated and would have made building a usable healthcare app impossible.
Luckily, finding those kind of problems at the wireframe stage is actually a good thing. Instead of continuing with the over-complicated mobile app, Cyrus and his colleagues iterated and split the initial idea in two.
The original idea developed into two simple-to-use mobile apps that “were built out in a series of logical steps” and would better fit different end-users. The fact that they were able to iterate with minimal rework definitely made them realize it was the next step forward, instead of a setback. Wireframing with Justinmind got the team to build a highly functional app that is really simple to use and to expand from there.
The entire Mangoman team was able to communicate clearly during the process. Plus Cyrus was able to control all the UI design details, no matter how small, and see them work in real time directly from the mobile device.
“I’m a detail guy, I like to make sure everything is perfect”
Moving from wireframe mobile app to interactive prototype
Once they agreed on the wireframes, the Mangoman team wanted to move up to a high fidelity mobile app prototype. “We needed something that effectively looks exactly like the real app”, says Cyrus, with as many details as possible and easily tested on device. And of course, they wanted to use real user data.
After Cyrus and his team started with their first app wireframe in Justinmind, and realized how quickly they could turn it into a high fidelity prototype where they could import and simulate their own data, they were sold.
Follow this wireframe-to-prototype guide to make your prototyping process as clean as possible.
Prototyping a mobile app with real data
Once Cyrus’ app design project moved into the interactive stage, he could get started on data-driven prototyping. This would be the key to serving the diabetic community with original, personalized information whenever and wherever they needed it.
Justinmind’s data-driven prototyping features allow anyone to create customized, interactive user interfaces fast. Gather real data from real people, import it into your mobile prototype and visualize it in data lists, data grids, charts or menus. Everything can be simulated just like the real deal. You can even add complex conditions and variables for data to interact with.
On top of that, you can customize your data in Justinmind app prototypes and make it searchable.
Better mobile app UI design with high fidelity wireframes
Rich interactions gave Mangoman much more design freedom to create the dynamic content that made the app feel just like a real finished product.
Compared to the limited functionalities of other wireframing tools, with Justinmind they were able to detail the animations between screens, animate in multiple directions, play around with gestures and customize atomic elements for pixel-perfect designs every time.
Being able to visualize the design of the mobile application enabled the team to understand and conceptualize the intended user experience. The visual design also improved communication and iteration across the team, so that in the end, the high fidelity wireframe supported and simulated the powerful technology behind the healthcare app design.
“The tool is simple enough to use that it doesn’t in any way slow my work process down, what is does is it speeds it up and that is important”
Soon the team will be ready to test the final UI design with real users and validate the mobile wireframes so they can be passed on to developers for implementation.
Prototyping mobile apps for the diabetic community – the takeaway
Cyrus and the guys at Mangoman needed a prototyping tool with extensive teamwork features, a smooth wireframe to prototype workflow and, most importantly, the ability to work with real data. Justinmind ticked all the boxes. Download our tool now and see what it could do for you and your team!
