When I was told to come up with an app and design its interface for my UI class, I knew almost immediately what I wanted to do. I’ve been teaching myself some principles of UI and UX design for a couple of years now (designing hardware or interfaces is what I want to make a career out of). So far, I’ve been publishing my projects on Behance and my personal site, trying to build a portfolio and learn along the way. I’ve created a fictional tech company which is aimed at marrying power user functionality with creative and intuitive design. After designing a few devices, I hadn’t yet designed the app that would link them all together. This is where I began creating the Hito Devices app.
When I started designing the app, I had three main devices: Hito Phone, Hito Watch, and Hito Abode (a Google Assistant smart display with some added features). Just recently I added Cloud Paper, a folding journal-ish device. I wanted the app to guide a user through setting any of these devices up, allow a user to change device settings remotely (i.e., turn off Abode’s bluetooth through the cloud, from your phone), and give a user access to their account settings. This would need a kind of two-part design, using separate interfaces for setup and settings. Setup is mostly linear, making it as easy as possible to get a device connected and running. This is where most casual users are done. After this, the app expands into more of an open experience. Casual users can tweak settings as needed, and power users will tinker to their heart’s content. By splitting these two into separate designs, I allow the casual users to get what they need done and leave, and the power users to stick around and explore their new device. There are different kinds of settings, though. Quick settings are small adjustments and toggles such as wifi, bluetooth, brightness, volume, etc. These don’t need their own dedicated pages. Then there are the deeper settings such as privacy settings, notifications, and Google Assistant settings. These need more in-depth information and options.
In my UI design, there are a few common ideas: direct manipulation of elements, one-handed use, hiding unnecessary information, and connected animations. The first of these, direct manipulation of elements, is probably the most important in my thinking about interfaces. Using draggable items links a user’s interaction directly to the action performed, making it feel more natural and fluid. This idea is seen in the broader industry through the widespread adoption of gesture navigation on phones in the past year. For the Hito Devices app, I implemented this idea by presenting the devices as ‘cards’ to be swiped through. I also made ‘drawers’ for quick settings. These stick out from underneath the card of a configured device, showing flat status icons with a grabby bar underneath. When the user drags this grabby bar toward the bottom of the screen, it pulls the drawer out and the icons become toggle-able buttons. This design allows the user to quickly check the status of their devices without digging through menus or cluttering up the main screen by having toggles everywhere. I needed to use drop shadows, overlapping, and animation to make these elements feel like physical objects moving around in space in a way that felt intuitive.
The Hito Devices app needed to feel like a Hito product just as much as the devices it managed. I used my fairly established Hito design language to ensure stylistic consistency. The Hito logo is a pretty obvious part of that effort, taking up a good bit of the splash screen and icon. I also used rounded corners, a design choice I’ve used throughout Hito branding to imply softness and comfort. I initially wanted the accent color to match the accent color of the user’s phone (if it is a Hito Phone), using a lilac color as an example.
After writing down the basic ideas for the app, I began sketching frames out in OneNote, starting with the linear setup process. First, the splash screen. Then, the user selects a device to set up, allows Android permissions, and pairs the device to their phone. Next, I moved to the more open settings menus. Devices are once again presented as cards, but with quick settings drawers popping out from underneath them and deeper settings at the bottom of the screen. I also drew in connections between artboards with a different color so they would stand out from the sketch.
Prototyping came after sketching up my initial designs. For my projects, I tend to switch between Figma and Adobe XD. Figma has some advanced features and more flexibility with fills, strokes, and artboards, so that’s where most of my assets are. I initially prototyped the Hito Devices app in this program to easily copy over icons, shapes, and the Hito logo, but realized animation and draggable elements are crucial to the app design; these features are either limited or nonexistent in Figma. XD has an advanced ‘auto-animate’ feature and allows a user to drag elements to a spot designated in the next artboard to progress through the prototype. There isn’t an official tool for transferring files between apps, so I copied elements from Figma as vectors, and pasted them into XD. This works fairly well, but leaves out shadows, blur effects, and sometimes messes with strokes. Because of this, I had to recreate all of the drop shadows and remake some shapes to better work with auto-animate. Lastly, I set up the connections between artboards; this is pretty easy in XD.
Then, we presented our work in front of the class. After that initial presentation, I had some work to do. My icons were inconsistent, my animations were a little messy, only the watch had any settings made, and the accent color I was using didn’t have enough contrast with the white backgrounds to really pop. I started by fleshing out the settings menus and quick settings drawers of each device. Then, I used the watch face menu as a template to create the notification settings, security settings, alarms, and other settings for each device. These menus had to be consistent. Next, I redesigned all of the quick settings icons, and added icons to all the deeper settings. I applied my design language to each, creating a bunch of round icons with thick line weights for each setting and quick setting. After this, I refined the animations. Interstitial artboards with time delays into the next helped split animations into two phases (dragging, and elements snapping into place after). Changing the animation speeds and easing helped connect the artboards more fluidly. My last bit of work on the design was a sort of face lift for the app. I increased the corner radii of a few shapes (for some shapes, this added movement in animations and felt more dynamic) and I replaced the sleepy lilac accent color with a more lively purple to blue gradient. I’ve used this same gradient across my recent projects to represent software. Now the interface felt a bit more playful and more closely matched Hito branding.
When I finally opened the Adobe XD android app to record the animations I had spent so long refining, I was honestly disappointed! There were a number of inconsistencies, particularly in the animations. I’ve been learning pretty quickly and evolving my style every few months. This is great for my own progress, but it means adjusting all of my current projects quite frequently. I went back in, replaced the pairing images, rebuilt the card system, refined animations A LOT, and added in Cloud Paper, my newest device. Now I can say I’m finally satisfied…for now.