UX/UI Design & Research
Team: 1 ( just me )
Timeframe: 2 weeks
Tools: Figma, Pen & paper
Role: Product designer
Solution: Click here
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 devices 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.
I joined Veratize to help elevate the design esthetic and to help launch the next iteration of the app.
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 "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.
The patterns are simple and they will most likely stay that way, but how can we add branding, additional functionality, and elevate the esthetic, while keeping it simple?
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.
How do we incorporate branding and the current design into something new that is useful, unique, and yet still familiar?
Leadership had requested that the cards be stackable to minimize the amount of scrolling needed from the user. Incorporating this, I sketched many layout styles and different page views.
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.
From this point, ideas converge, wireframe are created, and design fidelity is steadily increased.
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. Between the two options is the refresh button. This button allows the app to reinitialize to the current state (locked/unlocked) of 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.
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.
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.
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.
