Nero Motion

USER INTERFACE DESIGN
‍2018
SKETCH | Principle

neromotion.co.nz

Nero Motion is a digital agency. They had a portfolio showcasing their talents in digital design and development but the website was difficult for users to navigate and understand the offerings of the agency.

With a new website on the cards, Nero Motion also looked to rebrand to align themselves with the quality of their services. By gathering research and mapping out ideas we were able to create a new identity and website that truly represented Nero Motion.

My role was to conduct design research to inform the look and feel of the identity and website. I worked alongside the creative director and developer to see this project to completion.

Nero Motion home page

Identity Brainstorming

My first task was to brainstorm for the rebrand by pinpointing what the brand represents and what words should be positively associated with the brand. I then started visualising icons that would help reinforce the words behind the brand.

Nero Motion - identity brainstorming

Visual Study

From my initial brainstorming I conducted a visual study and experimented further with matching words to images. This allowed me to quickly test out different ideas for the new Nero Motion branding and to easily discount ideas that just weren't working.

The final logo is a diagonal line icon that represents the N of Nero Motion. It is also a play on the forward slash in website addresses - playing homage to it being a digital agency. The wordmark also mimics this diagonal slash.

Nero Motion Branding Visual Study

Understanding the user

I conducted a quick Q and A to touch on some of the key concerns users would have when landing on the website and ideas on how we can answer those questions. This was helpful in isolating user problems and coming up with solutions on how the website can deliver answers competently in order for the user to get in touch to collaborate on a project.

Nero Motion - questions

Site Map

Based on the questions that the user needs answering I created a site map that would strategically answer them. The most important aspect to implement was that the user journey be as simple as possible and clearly identify and explain each stage.

Mastercraft user personas

Competitive Analysis

With the site map planned, I set out to analyse competitor sites in regard to what does and doesn't work for each page type. I looked at six different websites and highlighted the most successful aspects of each one and used this as the basis for the initial design sketches.

Nero Motion study

Sketches

I started the design process by sketching out the hero pages of the website - the initial landing and the project page. These were the most important pages as they needed to clearly explain to the user what the website was about and demonstrate the calibre of work that the agency created. The challenge was creating a website that was functional and easy to use while still pushing the boundaries of design and animation to show their innovation.

Nero Motion sketches

With the initial pages sketched out I moved to the inner pages and looked at how the structure of the website could work. Simplicity was always kept in mind with the idea that subtle animations and development techniques would aid in making the website that little bit more unique.

Nero motion sketches

Website Design

Based on the page sketches, I designed the website on Sketch in conjunction with the creative director. It is entirely black and white with the only colour coming from imagery. This was done to really showcase the work and allow it to shine. It also helped making the website less distracting so users could progress through the site easily. We were also able to have more control over the colour accessibility.

Along with a refined colour palette we also ensured the wording was simple and to the point. When the user initially lands on the site they are presented with the below homepage. A non-scrollable page, it is direct and to the point, letting the user know exactly what to expect and what services Nero Motion offers.

Mastercraft Kitchens wireframes

Working alongside the creative director and developer, we were able to create subtle animations that show design flare, while also maintaining usability.

With many users using mobile devices to access the Nero Motion website, it was important that the experience did not differ from desktop and that mobile users were able to see the same information.

nero motion mobile designs

Conclusion

We were able to create a brand and website that both demonstrated the expertise of the Nero Motion team while keeping the website simple to navigate and displaying only relevant information without needing all the bells and whistles. With Nero Motion the work speaks for itself.

On any project it is always important to involve the developer in the early stages to ensure any design ideas are achievable and fit within budget and timeframes. This is part of the reason why this project was so successful as we were able to bounce ideas to ensure everything would be functional with that additional wow factor.

The resulting website answers all immediate questions users have and does so with speed. With design trends moving so quickly it will be crucial to test the site with users over the next few months to ensure that their questions are still be answered.

neromotion.co.nz