Emotio UX case study
We didn't do their website but in the summer of 2018 I had an interview with Emotio, a digital agency based in North London.
As part of the interview phase I was tasked with:
"Create a landing page showing Emotio as a specialist in website and marketing for the London property market."
The below are my concepts highlighting what I did from sketch to final concept.
So, did you get the job?If you were wondering, yes I was successful in my interview and was offered the role of a UX Designer for Emotio in July 2018. Unfortunately we couldn't agree on a financial package that suited both parties and it just so happened a few weeks later, I landed a new fantastic contract elsewhere!
Design concept (desktop)
View or download
Design concept (mobile)
View or download
Wire-frame designs (desktop/mobile)
View or download
Step 1 - Desktop wire-frame
I began by creating my wire-frames for both the desktop and mobile versions outlining what I wanted my design to look like and how I wanted it to work.
I went for a one page website with numerous calls to action navigating the user to standalone pages only where a mass volume of content may be required. I did this to keep the landing page relatively lean in terms of content.
Section one of the website will be a full page blurred image overlaid with the Emotio logo, a brief slogan and a button linking the user to the portfolio of work. Although an image will be used here there is an opportunity to use a hi-resolution video background here which may bring the website to life. In the bottom corners of this hero image will be two calls to action buttons which when clicked will display both the locate us and contact us information, crucial when trying to pull in new leads of potential work. These elements will slide in from the left or the right depending which is clicked.
On the right-hand side will be a bookmark navigation element which will allow the user to jump between the main sections of the website. When the user hovers over one of the sections a title will display the section’s heading. Different colour eclipse shapes will be used to denote active/current sections.
Section two of the website will contain the leading copy of what the website is about, who Emotio are and the services they deliver. This section will also include two calls to action buttons, “read more” (information about the history of the company and their services) and “make an enquiry” (launch a web form or email).
Throughout my wire-frames there are certain elements and flow of the design which reflects the current Emotio website. I have done this where I feel that best practice has been followed and any deviation from this would not be beneficial. In this instance I do feel that it is best practice to have the introductory copy displayed early in the website for both SEO and CX reasons.
Section three will be a parallax section which will act as a classic break for two areas of content. The background image will be a blurred London/residential image, the top layered image will be screenshots showcasing previous work completed in the property sector.
Section four of the website will showcase featured work or related work in the sector (in this instance it would be projects completed in the London property market). The user will have the option to navigate between multiple projects via a slider element. The section will include the client’s name, logo, case study and an animated example of their work on multiple devices which overlap with the next section’s border. The user will also be able to read the “full case study” on its own standalone page or again have the option to “work with us” which will launch a web form or email.
Section five will consist of a slider showing previous client’s logos with links to their case study pages. When you hover over the client’s logos the greyscale images will colourise to portray an action to the user.
Section six will be another parallax image which will break up the content with a blurred London/residential image. The copy that will go here will be welcoming and will pose the question to the user of “whether they like what they see so far” and if they want to work together. They will also be given the option to switch between sections with the bookmark navigation element on the right-hand side.
Section seven is where testimonials will be displayed in a sliding animation. This area will be clean and minimal to emphasise the positive words client’s have left for the level of service delivered. There will also be space for the client’s logo, the testimonial author and a link to view the case study in question.
Section eight will display the social media feeds and links as well as an option to allow users to leave website feedback and/or a testimonial for work completed. Below this section will be the footer which will be like the current Emotio website design due to best practice. However, it will include both the bookmark navigation element as well as a “to the top” link.
To view a larger version of my wire-frames please click here.
Step 2 - Mobile wire-frames
After completing the desktop wire-frame I began working on the mobile version of the landing page. I wanted to create a completely different experience than merely just providing a mobile adaptation of the desktop website. Here is what I have planned:
Design and actions
The Landing screen will be a completely stripped back version of the website in terms of content. This means that the user will not be able to scroll beyond this point and for mobile browsing they should not need to as everything shown in the wire-frame for the desktop version will be accessible via the calls to action on the mobile landing screen.
I took this approach as I felt that this would be showing another level of our creativity by showcasing our ability to deliver a completely different user experience on handheld devices rather than just scaling down the conventional website. It will also give the user a very clear journey without overloading them with content. I will design the landing screen with a solid background or alternatively a subtle animated background could work here to give the experience a different yet simple touch.
The portfolio screen will be accessed via the "view our work" button. The user will be navigated to an indexed portfolio (via a simple faded animation) focusing on the swipe ethos, again adding another level to the mobile exclusive user experience. The initial launch will display either the latest or featured case study.
An instructional and animated icon will display in the bottom right hand of the device which will show the user that they can swipe both up or down (remain on the case study) or swipe left or right (switch between case studies.) Within each portfolio item the user will be able to view the case study, link out to the finished product/service (if applicable), enquire about similar work, share the page on social media, swipe to the next page or close the window and return to the landing screen.
The menu screen will be launched by touching the menu button at the top right of the landing screen. It will activate a swipe down animation revealing the top menu listings in a very bold font type. This would allow the user to navigate through key areas of the website not otherwise accessible on the landing screen.
The location screen will be launched by touching the location button (location pin icon) which would activate a swipe right animation revealing the headquarters address, social media accounts, operating hours etc.
The contact screen will be launched by touching the contact button (speech bubble icon) which would activate a swipe left animation revealing the contact number for Emotio and a short web form for the user to complete. On each animation the logo and closer menu button will be presented to give the user a route back to the landing screen should they need to restart their journey.
Step 3 - Branding
My goal was to create a design that was both realistic in terms of current Emotio branding but also different to what the current Emotio website looks like. With that in mind I decided to use the brand colours and keep this consistent throughout the design.
A singular font type will be used throughout the design to keep the branding consistent. Areas in need of emphasis will make use of the font's different styling rather than changing the font type altogether. The font I will use will be Lato with the light, regular and heavy styling used throughout.
Step 4 - Bringing the wire-frames to life!
Phew.... That was a lot to get through but I wanted to make sure that I explained the method to all of my madness! After laying out my design in wire-frames then came the fun part, adding colour and details! Below is the final design for both the desktop and mobile versions of the website concept.
Interactions and animations
There are numerous interactions and animations which can be activated at the top of the website. These include:
The menu button which when clicked swipes out from the right and fills 50% of the screen width with top menu items.
The location button when clicked would swipe a blue background from left to right 100% of the screen and the text would fade in displaying information about Emotio's HQ.
The contact button when clicked would swipe a blue background from right to left to 100% of the screen and the text would fade in to display a web form and contact information for Emotio. This would mimic the way the website would work on handheld devices.
Menu slide out - From right to 50%
Location slider - from left to 100%
Contact slider - from right to 100%
Bespoke icons and more branding!
To really create a unique look I wanted to make sure that the main call to action icons were consistent in look and feel but also branded with Emotio colours. The main menu button consists of 4 uneven lines which when hovered over would animate in a 'wave like' animation.
The location and the contact icons also animate when the user hovers over them. Both have a splash of Emotio's blue colour. I wanted to make the menu icon slightly bolder than the others as it would be the primary action button.
Mobile device designs
The designs below are the my concepts for how the website would look and work on mobile devices. The red eclipses highlight touch points to identify the associated action.
Menu interaction (Animation = slide down)
Location interaction (Animation = slide right)
Contact interaction (Animation = slide left)
Portfolio interaction (Animation = fade in) Swipe left or right for next item
All in all I am happy with the design concept. You can see that my digital services background shows quite clearly in my design with clear focus placed on calls to action and a task based design.
I enjoyed the task and hope that my passion to create and eye for detail shone through in my work.