The first step of the development process of this Electronics Hub smartwatch app was to try and create some sketches to communicate the ideas that I had in my head onto paper. We need to design only 3 screens, so I had a fair idea of what I would be doing. For the home page I took inspiration from Apple’s smartwatch UI, which displays all the different apps as circle widgets, that can be tapped to open the app.
The next screen would appear after the user tapped on a device. This would show an icon of that device alongside different settings for that device to adjust it: for example, you could dim the lights in your living room or change the tone of them. Each device will have different options, as each would need to be tailored toward that device. When designing for this app, I was bearing in mind that I needed to include as little text as possible, so I want to ensure that I am making use of icons and colours to help the user understand what they are doing and make the navigation of the app as easy and quick as possible. This app is something that is primarily functional, so no extra elements than only what is needed will be included in the app.
The final screen is where the user will add devices. Once they come onto this screen the user will select what type of device they want to add to the hub. Originally I wanted to make it with 2 textboxes and the user could type in what device it is, but after more discovery work and sketching, I decided to use cards which would display the different types of device that the user can select. Only devices that are compatible will be displayed to the user.
Next I moved onto Figma and started to get some ideas down digitally, to see if my ideas were really going to work out. Since these were only low-fi I didn’t worry about colour scheme or changing the typography, only the layout of the app, and considering the user flow throughout the app. Since I was only doing 3 screens I wanted to try and make them as best as I possibly could, but try to do them efficiently, as when I am working in the industry I can’t be taking ages to do something small. Here are the low-fi screens that I made for the app as a guideline for the further development of them.
Home Screen
Device Screen
Add New Device Screen
The next thing that I done for the development of the app was to add some colour and choose a typeface for the app. I already had an idea in my head as to what colours I would use. I wanted to use a black background as this is a common theme in the competitors that I analysed, and I think that it looks great on a smart watch. For the different widgets I wanted to use different bright colours, that display what type of device it is. For example, all of the lights and lamps will be orange, TV’s and screens will be purple. I love the colour scheme that I chose and I think that it works great having lots of different bright colours that all represent a certain type of device.
For the typography I wanted to use a sans-serif typeface that was fun yet clear and legible. After some discovery I found a typeface called ‘Area’, which I really liked and thought would be great for this app. The 2 variants that I used for this typeface was semibold for headings, then regular for body text.
I then had to give the app a name. This is something that I have always found hard to do, as I struggle to come up with something on the spot. To try and find a name I wrote down some things that were related to the app idea to see what I could come up with. When I wrote down words I would search for synonyms with that word to give me more ideas. As I wrote down words other ones came to my head when eventually I got the idea to name it ‘Omni’. This is because the app allows the user to take control of the devices in their home, and omni means to be without limits and to be in all places, always. I think that this name works well with the app, and is also quite catchy and unique.
The next thing that I done for the development of the app was to create some icons that would be used in the UI. These icons would represent the different devices that I will be including in the app. The icons all had to be consistent and cohesive so this was something that I had in mind when designing them. I started off by sketching out some ideas and came up with some great looking icons for the app. Since I am designing for an Apple Watch, icons are a huge part of making the UI more visual, so designing these icons well was very important for how the overall app would turn out.
