Building a mobile application with GrialKit and UXDivers

02 Jan 2020

Building a mobile application is hard. Building a beautiful mobile application is even more difficult. As a mobile developer without strong design skills, building a good-looking application for people to use directly from the app store is quite a challenge.

On-top of design, the typical price for a mobile app can vary depending on the quality of the app you want and the platforms you need to support. I typically believe that a mobile app is much like a car purchase, you can get a reliable app typically starting at $25,000, however if you want that high-quality, turbo-charged Ferrari app, you’ll be looking to create a platform starting around $100,000 or more.

Why does it cost so much though? There’s a lot that goes into making an app and supporting a small team through it all.

Based on an estimate on howmuchtomakeanapp.com, my application “Lawn Care Timeline” would cost $69,300 straight from my pocket to create. Maybe it’s just me, but I don’t exactly have $70k to spend on a side application when I can do a good majority of the labor with my background in mobile development.

However, with time being the limiting factor for me, I looked outside of my abilities to find experts who specialize in UI/UX and have familiarity of a consistent implementation across mobile platforms.

After doing research about how I would go about creating a consistent and beautiful cross-platform mobile application, I found GrialKit which is a Xamarin.Forms UI Kit that offers stunningly beautiful XAML templates & controls. Needless to say, after checking out their samples and features, I found the “Holy Grial” of UI kits for Xamarin.Forms.

In addition to providing a beautiful UI Kit, I learned that UXDivers(The creators of GrialKit) also offer mobile application UI design services in which they will jump-start your application’s design and provide you with a XAML implementation at the end of the 3 sprint process! Naturally, I got in touch with Pablo over at UXDivers to see if they’d help me design my application.

Enter GrialKit and UXDivers

After jumping on a call with UXDivers, it was obvious that they know how to create the most optimal UI/UX to ensure your users have an intuitive experience with your mobile application. Not only do they combine a majority of their UI/UX decisions with years of mobile design expertise, but they also have a breadth of knowledge for both the Android and iOS design systems to create a cohesive experience across platforms.

Pablo and his team over at UXDivers took on this project with open arms to help deliver high-fidelity user interfaces for an application that is designed based on what users needed in a DIY lawn care app. I was quite impressed with the high quality and agility the team were able to deliver the final result. The design & development craftsmanship was beyond my expectations. I mean, take a look at some of the final screens they created based off some initial mockups:

The final result exceeded my expectations. As a mobile developer who has a decent sense for design, not only did they take into account everything I wanted this application to look and feel like, but they continued to iterate until it was done right. I’d like to talk about how they took my concepts and made them a reality through a three sprint process.

The First Week (Sprint #1)

In the first sprint, UXDivers designs the visual identity of your mobile app. This is accomplished by creating a subset of screens that set the visual style of the application such as the navigation, colors, fonts, icons, images and overall the visual language used in the application.

Needless to say, the first week was quite empowering. The team took on the application with only a few details provided to them.

First, the team needed to know what the application will do. This gives them the best understanding for how to best design the application. Providing the team with information such as the mission behind the app, the high-level features, and mockups provided them the context to bring amazing coloring and details to the application.

Next, the team wanted to know of a general theme that I had in mind for the lawn care application. For me, it was primarily green colors to represent grass with a bold red to represent a lawn mower. This helped provide them a palette to start from and refine of which I wanted to see in the app.

Finally, the last thing we discussed was the mood of the application. In other words, how do users want to feel when using the application? Do they want to feel empowered to tackle lawn care? Do they want to feel ecstatic that they found an application to help out one of their most hated chores around the house? The team helped provide a mellow and energetic mood to the overall app.

The Second Week (Sprint #2)

Next, UXDivers then applied the style from the previous sprint to every single page and created the application’s workflows within InVision.

We moved into high-fidelity mockups with design as the forefront of the decisions being made to the application’s flow. This is where majority of the UI started to come together with a consistent minimalist vibe across every screen with lovely icons to add a bit of playfulness to the app.

The Third Week (Sprint #3)

Finally, UXDivers took everything previously created from the first two weeks and implemented these designs into a clean, beautiful, developer-friendly Xamarin.Forms XAML that any developer can take and run with.

The team delivered a complete Xamarin.Forms project with each XAML file so it could easily be hooked up to our ViewModels and backend to get into our user’s hands as soon as possible.

With best practices in-mind, UXDivers provided well-formed XAML that you would be mistaken that a human wrote it. Not only did it help provide me with the context of using the best controls and patterns for each screen, but it also set the tone for how each respective ViewModel should be hooked up given they also include real bindings that have sample data representing each screen.

Summary

UXDivers did an amazing job throughout their three sprint long process to provide my side project with legs to deliver to market on time for our launch in Spring 2020. For developers who want to focus more on development and let professionals handle the design side, the UXDivers team delivers beautiful designs for your Xamarin.Forms application by providing your with every page, template, resource directory, font, and image you’ll need to deliver your app to the market.

If you’re not familiar with UXDivers, you can find out more about their services and check out their fully customizable products.

It was a pleasure to work with Pablo, Mauricio, and all the other fine folks over at UXDivers.