JavaMifi
Design an internet provider application for millennials abroad.
Design an internet provider application for millennials abroad.
JavaMiFi, a leading Internet Solution Company, specializes in high-tech Mobile WiFi and Travel SIM services for international travel. Catering to anyone needing unlimited internet access on the go—whether they're working remotely or traveling for business or leisure—JavaMiFi ensures seamless connectivity.
When they approached me to serve as a design consultant, the goal was clear: elevate their mobile application to new heights. My role involved reviewing and refining previous designs, defining fresh design styles, and mentoring junior designers. Together, we crafted a high-quality, modern, fun, and user-friendly app that enhances the JavaMiFi experience for all users.
Industries
Internet, travel
What we did
- Stakeholder interview
- Requirement study
- Benchmarking
- Design consultation
- Design review
- Define visual direction
- Assist the design team
- Quality assessor
Coming soon on
The first step in the process was evaluating the initial design, using key design principles like the Law of UX, Discoverability, and Heuristic Evaluation. Leveraging my extensive experience, I provided targeted suggestions for design improvements.
The image below shows the design before our enhancements. Overall, it lacked appeal, suffered from an unclear visual hierarchy, and was overwhelmed with text, resulting in a dull and cluttered user experience.
Issues of Initial Design:
An Unclear Main Menu.
The main menus in this app include Global eSIM, WiFi, and SIM Card. However, using a tab bar for these primary menus is highly ineffective due to its poor scalability. As the app grows, adding new menus will become cumbersome and disorganized. For instance, having ten menus would result in ten tab bars, creating a cluttered and confusing interface.
Bad Information Hierarchy of Product List.
The layout of the product card is inefficient due to the disproportionately large flag illustration. While visually striking, the flag isn't the primary information that should be highlighted. This design choice detracts from more important details and reduces overall usability.
Complicated Bottom Navigation.
In the bottom navigation, the icons and text are excessively large, occupying too much space and disrupting the layout. Additionally, the floating buttons for customer service contacts are intrusive and can frustrate users.
I applied the same thorough approach to conduct a detailed audit for every screen and flow in the JavaMiFi app, ensuring a more streamlined and user-friendly design.
Here is my approach to determine a suitable design for JavaMifi product:
- Conduct client interviews to understand their preferences
- Conduct user interviews/surveys to understand their character and needs
- Benchmarking competitors or other products that can inspire designs to be developed.
From the client interview, I have learn that the client wants a design that has the following keywords:
I created a user persona so that we can have a better idea how is the user behavior, needs, and goals.
Software engineer, 27, married
From Jakarta, currently live no madden
“I want to have a good quality internet connection wherever I travel or live around the world.”
Behaviour.
Adit is married and has 1 child
Adit likes working with companies remotely
Adit can do work wherever he is (WFA)
Because of his WFA work style, he and his family like to travel to various countries around the world.
Needs & Goals.
Adit really needs a reliable internet connection for his work needs
The internet is also very much needed for the communication with his family even though they are in another country.
Frustations.
It's a hassle to get internet access abroad
He didn't want to replace his Indonesian phone number with the phone number of the country where he was visiting, because there were already many client contacts in it
It is difficult to get internet access that can be used together with his family.
Together with the client and the team, I brainstormed and benchmarked other applications that we can look into and adopt some interesting concept to JavaMifi app. Some of the app that we analyze are Klook, My Telkomsel, Gojek, Traveloka, etc.
Visual direction is created based on all the insights obtained: audit design, client and user preferences, as well as benchmarking. Many design explorations have been carried out until finally we agreed on the design below:
Overall, the new design looks more modern and fun, which is also in tune with client preferences and user characteristics. Not to forget, this new design also refers to JavaMifi's visual branding, which has a very distinctive yellow-blue color.
Before.
Old school and dull
Bad information hierarchy
Text heavy
Complicated navigations
Incorrect sizing and margin
After.
Fresh, modern, and fun
Better information hierarchy, from top to bottom the content is easier to understand
Balanced content between text, labels, icons, and graphic elements
Simpler navigations
Pixel perfect sizing and margin
Super app has long been popular in Indonesia, namely: Gojek, Traveloka, Grab, etc. As a big brand, I want JavaMifi to be able to adapt to the trends. I apply the super app style design approach to the new JavaMifi design, which has the following advantages:
New Design.
The Main Menu Helps User to Understand the Product.
When a user open the application for the first time, they will immediately understand what is the application about just by looking at the main menus. Because the main menu represents the main features of the application.
The Better Scalability.
By making the main menu in a grid format, it will be easier if in the future we will add a new menu again without breaking the layout. The new menu can be easily placed on the second row.
The Simpler Bottom Navigation.
The ease of accessing all pages / moving from one page to another is one of the keys to successful UX design. For that reason, we make it as simple and clear as possible.
Navigation in the new design has changed quite drastically. Starting with using a simpler and more modern icon set, as well as a hierarchy that is easier to understand.
Before.
Component size looks too big
Incorrect sizing and margins
Complicated
After.
Size and margin correction
Simple and modern
Delightful interaction
Before.
Too text heavy
Unnecessary giant flag illustration
No call to action
-
After.
Balance combination of text, label, and illustration
Simple flag illustration
Call to action can trigger user to buy
Ability to add to cart and customize the quantity
One of UX principle said that the good UX design should always keep users informed about what is going on through appropriate feedback.
In the JavaMifi app design, users can monitor the usage status of the data packages they buy. I put this monitoring directly on the home page so that users can access it more quickly when opening the app.
I made the design system as a reference for the design team so that they can follow the visual direction that I have made. After being well defined, they continued to work on JavaMifi UX & UI design. Periodically I check the results of the designs they deliver, and ensure that the designs are consistent and in accordance with the quality I expect.
“Not only is he an excellent designer, but he is also a great friend and mentor. His leadership skills are unparalleled and he always goes above and beyond to support his team members.”
“Rizqi & team is a UI/UX design genius! Their work on our project was flawless, delivering a design that not only looked amazing but also functioned beautifully.”
“Working with them was a pleasure. Their UI/UX design expertise is unmatched, and they were able to take our project to the next level.”
“Rizqi transformed our vision into a user-friendly, visually stunning reality. Their expertise and professionalism were evident from start to finish.”
