Revolutionize the industry of keyless entry

The Business

Veratize is a Houston-based start-up led by entrepreneur Fahd Lakhani. The aim of Veratize is to help innovate the industry of keyless entry. All manufacturers of keyless entry software only allow their software to interface with their hardware. With the Veratize software, a user will not only be able to access any keyless lock hardware that they own but also have access to a whole host of additional functionality.

The Ask

I joined Veratize to help elevate the design esthetic and to help launch the next iteration of the app.

Team: 1
Time frame: 2 weeks
Tools: Figma, Ink & Paper
Role: Concepting, Prototyping, Design

The Solution

Would you like to see what I created?

*Click*

Understanding the Current Iteration

The backend of Veratize is exceedingly complex and has required a great deal of attention and care. Knowing this, the front end has largely been left in an M.V.P. form.

The Pattern

The "card" was chosen to be the primary pattern of the app. As an information container, the cards could hold all the relevant elements such as text, rich media, buttons, etc. Additionally, cards can adapt their size to that of different devices and screens, balancing user interface and user experience. Within the cards will live a button for the primary action of the app, to unlock the selected door. Currently, the button is the industry-standard pattern for this function across all similar apps.

Current Wireframes

As you can see, the design is still basically wireframes. The patterns are simple. They will most likely stay simple, but how can we add branding, additional functionality, and elevate the esthetic, while keeping things simple?

Current Branding

A lower resolution Veratize logo is what I had to base my color palette and some design decisions off of. I started with a slight redesign of the logo; mostly with redrawing the "V" and modifying the color gradient. Finding the correct typeface, adding a slight drop shadow, and saving into a vector format put the finishing touches on this beautifully scalable new logo.

I color sampled the original logo for the most predominant colors. I then created a broader palette for more options during the design phase.

Original logo

New logo

New color palette

The Task

How do we incorporate branding and the current design into something new that is useful, unique, and yet still familiar?

Sketching

Leadership had requested that the cards be stackable to minimize the amount of scrolling needed from the user. Incorporating this, I sketched out many layout styles and different page views. Here are just a few.

Creating Micro-interactions

One of my favorite brainstorming techniques is 6-8-5 Sketching, a time-restricted ideation exercise. The sketches are rough, but I gained a few great ideas that I developed for a new micro-interaction for the primary function button.

Prototyping the app

Here is where it all starts to come together. Every day seems to bring a new iteration on the design. Taking a few hours away from the screen and returning helps to put things into perspective and highlight things I was missing previously. Design is iterative. To move forward is to change.

The Solution

Through iteration of the original design, I have created an app that stays within the perimeters of its chosen patterns, more fully embodies its brand, and is an exciting twist on the original. The cards stack but still offer enough room for readability and a generous touch target for those cards in the middle of the stack. A card in the middle of the stack can be accessed with a single tap and unlocked with just one more tap, minimizing the amount of actions needed. The ellipsis in the upper right corner of each card offers a deeper dive into the functions offered for each lock. At the top of each individual lock's page, just under the address, can be found the new lock/unlock interaction. Just between the two options is the refresh button. This button allows the app to reinitialize to the current state on the lock in the case that the lock was changed manually. On this page you will also find Lock settings, notes, and the locks geographic location.

The settings page offers basic functions: the account holders name and details, additional settings, a contact page, and a logout button.

You may have noticed, in the navigation bar, that two different sections contain cards: Locks and Keys. This is part of the additional functionality provided by Veratize that will be discussed in the next iteration of this case study. For now, please enjoy the images below, along with the link to the interactive prototype

Would you like to interact with the prototype?
*Click*

Recommendations moving forward

  • Usability test and collect user comments
  • Further iterate on the UI patterns for optimization
  • Continued research for adding or removing functionality

BONUS DESIGN

Loading Screen Animation

What's an app without a loading screen animation? Following a similar process as above, I explored what a loading page for Veratize might look like, then created it.

Sketching

I knew I wanted to incorporate the logo somehow. I played with different ideas of how to bring it into frame and then back out. I also wanted to add something special that spoke to the function of Veratize; the magic of keyless entry. I played with wave forms, ripple patters, shooting stars, and even "magic sparkles"... Needless to say, the sparkles didn't pan out. I kept sketching and eventually I found it.

Veratize magic

The magic shimmer that runs through Veratize has the power to unlock. And coincidentally enough, an unlocked lock looks like an upside-down "e". A bit of animation work and I ended up with a great morphing element in the logo. A simple moving fade proved to be the appropriate entry and exit of the logo. Keeping these transitions simple helps to highlight the magic in the morphing lock.