Xbox SmartGlass
The Mission
As an Xbox user I was dissatisfied with the overall design of the current User Interface of the Xbox SmartGlass App. I decided to work on a version of what I believed the SmartGlass app should look like based on user research gathered and my own user experience. This would be a modern, user-centric, gamer-focused application that Xbox users, old and new, would resonate with.
The Outcome
This project was a perfect way for me to practice applying new techniques as I learned more about UI design. The evolution of this project allowed me to use my skills as a designer to diagnose a problem with the Microsoft UI and offer a conceptual solution that if implemented could be a step in the right direction for Microsoft and Xbox.
The solution is a fun, vibrant and user-focused UI that puts the gamer at the core of its design. Combining achievements, friends and games all in one place, the user doesn’t need to flick through various pages to see this information. There is room on the home screen for a featured advertisement of Microsoft’s latest titles. This is something the old app lacked, but it is content they show proudly on the Xbox website home page. I’ve made sure to keep the app somewhat of an entertainment hub, for users that enjoyed this aspect of the app, with small icons for games, movies and music along the bottom.
Software Used
- Adobe Photoshop
- Sketch
- Flinto
- Adobe Illustrator
This was a passion project I worked on to practise my UI Skills using Sketch App
SERVICES
Branding
Identity Design
CLIENT
Scarlet
DATE
2018-2019
overview
Research
Research is a massive part of all my projects, and although this was a passion project, I still wanted to ensure I was creating a functional design solution.
I usually like creating mood boards for research, dragging and dropping images from google. When doing this, I am looking for working examples of simple, appropriate and functional branding for brand in their industry. It is also important for me to understand the audience of my client, with Scarlet being a B2B business, their new branding had to be able to thrive in that market.
The logotypes in this image are all companies in the same industry as Scarlet. They all use a bold, modern, geometric sans font that is legible, recognisable and memorable. Logotypes like these are timeless due to their simplicity.
PROCESS
Exploration and Modification in Illustrator
I jumped into Illustrator so I could quickly explore different solutions for the Scarlet logotype. From my research, I knew I wanted to use a modern serif type face much like other companies in the VFX industry.
I chose the Montserrat font because of is modern geometric qualities. I adjusted the kerning (space between the letters) to make the text more optically balanced and then added the responsive part of the logo. I done this by simply writing the name of the company division 3x smaller and right aligned under the logotype. Once i was happy with the design I started exploring brand colours.
PROCESS
Application
Overall, the final solution is simple but it was through the application of this branding that it started to take form.
Although this logotype was made as part of a design challenge, I still wanted to apply the branding to a range of mock-ups so I could prove to myself that the logotype was functional.
With Scarlet being a B2B visual effects company, I knew their branding should be presented using corporate mock-ups. My biggest challenge at this stage was getting the colour to match across all the images and even now I believe I could improve it a little.
PROCESS
Wireframing
Because this was a redesign of an existing app, I found myself drawing from the existing layout to ensure I was meeting the current needs of the business. Also using my user research to make slight changes to please the users of the app and keep them engaged.
These wireframes were made on Photoshop at the time but I have since been using a new software called Figma, a tool built for wireframing, for my most recent wireframes.
Building in Sketch App
Using the high fidelity wireframes created, I went into Sketch app. When I started, I was completely new to this software and it felt like a perfect mix between Photoshop and Illustrator. For this reason, I thought it would be a great tool to create pixel perfect UI designs.
Once I was able to replicate the high fidelity wireframe In Sketch app, I added pictures, along with the colours, styles and effects that gave the UI a modern feel, while avoiding the temptation to follow current design trends.
Adding Interaction in Flinto
Using the handy “Send to Flinto” Sketch plugin, I was able to easily import all my artboards into Flinto and begin creating interactions for the buttons and different pages. This had a learning curve of its own but it wasn’t anything I couldn’t solve by looking online for a good old YouTube tutorial.
This image is an example of a pressed button interaction. The button has the official Xbox green to highlight the pressed area, this colour could also be changed by the user as a customisation/personalisation option.
