Designing for smaller form factors (JioPhone — case study)

As designers, we constantly chase new trends patterns, or guidelines. I had the opportunity to work on an app for a different form factor and that, with all its challenges, brought a lot of learnings.

With the introduction of Jio phones in the Indian market, there’s an exciting product in the market that brings the simplicity of a keypad phone and the abilities of a smartphone. All the magic happens on a QVGA screen of 320x240.

Challenge

Bringing the experience optimized for touchscreen smartphone to a tactile keypad phone. Doing all that with limited device capabilities and features. And of course, we had a fixed deadline of 10 days for the entire sprint.

Demo image showing the form factor of JioPhone 1

Constraints

• Keypad controls instead of a touchscreen. The most obvious distinction with our use case was navigating a smartphone app on a keypad device. Vulnerabilities like touch-points spread across the screen, moving up and down the page structure become evident. The experience needed to be used with a direction pad, and a couple of dedicated menu keys. Typing inputs can be a real hassle with just 9 keys.
• Smaller screen real-estate. Next comes the interesting stuff — screen size. <show the difficult stuff, then include positives>. Breaking down screens to show the most relevant information in an easy and comprehensive manner. This was a good exercise to showcase product clarity and point out the critical CTAs at any point in the user flow.
• Limited features of the platform. What you’ll miss the most on a keypad phone is ironically the keyboard. Low processing power means complex interactions and micro-animations are out of the question,

Research

Reading about Jio-phones and supported apps, we learned that the platform supports either a native app (written in KaiOS) or a web-based app with the proper keybindings (will come to this later). After a quick brainstorming round, we decided to go for a web-based app. This would be an easy transition for our developers, giving a quick turnaround for the entire project.

1. Understanding the useability patterns

We went through some of the default apps like browser, email, radio, etc. to understand how the complex features are optimized, how the navigation works, how input fields and pop-ups are controlled. Key takeaways:

• Simplify the page structure, divide it into a grid
• Navigate the grid by changing focus
• Minimize clicks, avoid branched pages

2. Reading about the guidelines

We looked up the UI guidelines recommended by Jio for building KaiOS apps. This gave us a lot of clarity and frankly saved us the effort of reinventing the wheel with margins, alignments, font sizes. And, also helped us nail down our typography and basic UI elements like list items, CTAs, pop-ups, etc.

3. Competitor Analysis

In an effort to avoid reinventing the wheel, we looked at 3rd party apps like Hotstar, Facebook, YouTube, etc. This confirmed our approach to structure the content on our pages and provided some UI inspiration.

Process

1. Organizing the user flows

We took the user journey from our main app and trimmed it down keeping in mind the needs, motivations and limitations of someone using our app on the Jio phone. Below is the user journey we came up with.

2. Low-fidelity wireframes

With the limited screen real estate, the next step was to modify the user flow into simpler interactions and display information that is easier to scan on a small screen. Some highlights:

• using the dedicated left and right menu buttons for primary and secondary CTAs
• handling use-cases like confirmation modals, keypad shortcuts for long lists, multi-field text inputs

3. Finished UI

Lastly, using the brand colors, components could be put together. Handling a few edge cases (like loading and empty states) and we were able to roll out the application within 2 weeks.

Shelved Ideas

• Interactive Polls:
  One of the interesting features we have in our main app (android & iOS) is live polls during the class. This could be an interesting and unexpected ‘wow’ factor on a device such as Jiophone. We had to drop this because of the obvious development overhead we’d be facing.
• Referral model:
  We’d introduced a referral model in our main app. This gives users access to bonus content and certain power-ups. It would be nice to have this feature in the Jio-app sometime in the future.
• Social Feed:
  With the ability to upload photos of your child and other parents able to like and share your posts, and mentors giving feedback on the child’s work. We have a community or parents, which unfortunately couldn’t be implemented into the Jio-app given the small timeframe and small initial user base.