You are probably hearing more and more about ‘hybrid apps’. Well, I thought it might be interesting to share with you 5th Finger’s recent journey to create a hybrid app with the Dominick’s iPhone app and Safeway. Here’s a short case study on our decision to make a hybrid app.
Objectives
- Create the most sophisticated grocery app in the market, and set the ‘high bar’ for app quality and features in the grocery industry.
- Provide fast on-the-go access to the amazing savings in the Dominick’s ‘just for U’ loyalty program, plus allow mobile coupon clipping and shopping list management.
Requirements
- Ensure the browsing of large volumes of coupons is fast and responsive.
- Remain flexible to a changing and evolving backend environment (APIs, Webservices & Websites).
Challenges
- We had two competing objectives: the app had to be fast and responsive, pushing us towards a native app approach. Also important, was a way to update the app without having to wait for Apple to approve an update because of ongoing changes to some of the key backend pieces after launch.
Solution
- We looked into the possibilities of a hybrid app to deliver what we needed. Most hybrid apps tend to be simply a mobile website running inside an app ‘container’. We didn’t feel that this typical approach was going to be an acceptable solution due to the need to show 1,000+ coupons in a quickly navigable way.
- The solution was to architect the app as a hybrid app, but with mostly native code. The key being richly interactive screens and areas which would be likely changing in future, as HTML driven experiences.
- This gave us the best of both worlds and an app which feels very much native, but still gives us the benefits of flexibility on areas needing it.
- Let’s look at some examples of the screens which are native: My Card, My List & Offer Screen… (Native Code)
- Registration Screen… (HTML5 Hosted)
Results
The consumer feedback to the app speed and usability has been extremely positive.
The registration screen has already gone through one backend update since launch, which has been made much simpler with the decision to go hybrid for that piece.
What’s Next…
Other areas of the app may also make sense to change to hybrid…
For example, at some point in the future, we may wish to add timed, promotional elements to the home screen of the app.
The best approach here would be to convert this page into a cached HTML5 screen. This is where the HTML5 code sits on the local device, but when the device was in network coverage, it would be able to update the home screen with the latest promotions/layout.
We could even change the entire look and feel of this home screen if we had the desire… with a Halloween theme for example.
I hope this case study was an interesting look into the decision process behind going hybrid and it helps you make an optimal decision for your app.
You can check out the current version on the Dominick’s Apple iPhone app here.
- Steen Anderson, 5th Finger
