MAHONEY DIGITAL


Responsive website design

Mahoney is a digital agency with offices in London and Los Angeles. It requires an online presence that can showcase what it does for potential clients to view this across any device.

The scope of this project was to create a responsive website. This means one website that responds to the screen width it is being used on, eg a tablet, desktop or mobile device, and adjusts the layout accordingly.

I applied a mobile-first design strategy. I began the design at the smallest screen size and worked my way up, which meant prioritising content due to the limited space on a mobile screen.

PROJECT AIMS

The aim of this project was to understand the type of content required for the Mahoney site based on user needs and expectations. I conducted user interviews, did a competitor analysis and gathered business requirements

A full working prototype was created using HTML, CSS and Javascript. This was progressed to become the final website.

Objectives

Define the users and understand their needs and expectations when using the site.
Establish the type of devices that would be used to view the site on.
Conduct interviews with the business owners to establish their requirements.
Conduct a competitor analysis of other similar agencies.
Define the content required for the website to create a mobile-first experience.
Design and build a responsive website prototype using HTML, CSS and Javascript.
Test the prototype with users and implement feedback where required.

STRATEGY

The project was split into five parts - Explore, Define, Create, Prototype and Test - and formed a non-linear, continuously overlapping process.

EXPLORE

User Interviews

During a meeting with the business owners I was able to establish who their user base was. I was given the details of people to contact that would be suitable for conducting these. I then interviewed five people for up to 30 minutes each.


The user interviews included key members of the marketing departments of large corporate companies, small business owners as well as partnering companies such as developers and branding agencies.


Synthesising the results was then undertaken to find similarities and interesting insights. Key insights:


It was unlikely a potential client would find Mahoney through a cold search but rather through a recommendation.
Outlining the services it provides plus a flexible approach to work. This is key as different types of companies require different types of services.
The importance of client involvement during the process.
A background on who the agency is and showcasing its employees, including bios and pics.
Work examples in the form of detailed case studies.
The ability to view the site on a variety of devices and screen sizes.
Clear contact details including a physical address which is seen as a core trust element for a company.
Evidence that the agency has a voice within the industry, with published articles and blog posts.



Gathering business requirements

In order to understand Mahoney’s business requirements, I set up a round of interviews with one of the co-founders and the agency’s Head of Product. The interviews took up to 30 minutes each.


Key insights:


A responsive website was essential as everybody has one and Mahoney needed to be represented in line with their competitors.
Being shown to be a flexible agency that can adapt to the requirements of a client and offering an end-to-end service which would integrate with an existing team in the client’s offices.
Display examples of key pieces of work that have been completed by Mahoney.
How it stands out from the other agencies.
Demonstrate its personality through the website.


COMPETITOR ANALYSIS

Thorough research of other digital agencies in the industry was undertaken. I looked at all types, from large international ad agencies through to smaller product design ones. It seems there are a lot of similarities with most of the digital agency websites and they are all following the same formula and design aesthetic. If you removed the logos from any of them it would be very difficult to know one from the other, in fact even the logos are very similar.


I also decided to look further afield to get inspiration and insights into how other industries approach responsive design and working mobile-first.


DEFINE

Personas

A total of three personas was established from the user interviews, requirements gathering and competitor analysis.



User goals

Based on the personas and considering the research from the Explore phase, I established a set of user goals:


Introduce and promote who the agency are, what they do and how they do it.
Showcase examples of the work that has been created by the agency in the form of case studies.
Learn about the processes the agency use to carry out their client work and how this can be adapted to the business requirements from any given client.
Teach about the range of services Mahoney offer such as design strategy, UX design, visual design, and web development.
Build an appreciation and exemplify the expertise of Mahoney as an industry professional through articles outlining their opinions on cutting edge technologies and processes.
Provide a coherent way in which contact can easily be made with Mahoney.



OBJECT ORIENTATED UX (OOUX)

The scope of the project was to create a responsive website, using a mobile-first design strategy. In order to achieve this, the process of Object Oriented UX was introduced. OOUX focuses on prioritising content into a single column, or list, and worrying about page layouts later. The single column layout is what you would normally associate with the view on a mobile screen - so mobile-first could really be considered “Content first”.


Using OOUX you can establish content types by thinking about the system (or website in this case) that you are designing, in terms of real-world objects within a user’s mental model. So you could further the statement of “content first” to “objects first”. The design of the actions, flows and interactions can be established after this process.


Object extraction from user goals

The first step in OOUX is to establish the basis of the objects by extracting them from the established user goals. To do this you highlight the key nouns within each of the goals. It is important to look for recurring nouns, such as “agency”.



The chosen nouns then became the basis of the objects used to make up the website.





Object mapping

Taking each noun, I conducted an object-mapping exercise on a wall with Post-it notes. For each one I started working out what attributes would be associated with them, such as titles, image, names, subtitle.


Then I looked at which CTAs would be associated with each one - these are in blue. You can start to see the build-up of each object in column form and see what similarities there 
are across each one and which design elements will be needed to represent them. The purple Post-it notes are metadata and the green represents where there would an embedded version of one of the objects with an object.




Forced prioritisation

Next was to move the Post-it notes in each column into an order that represented the priority of the content in that object. There was a lot of moving around of Post-it notes, which went through a few rounds and even included the business giving their input.


OBJECT MODEL

I then took the Post-it note information and started designing the objects and piecing them together into an object model. By linking them together I could now see how they were related to each other, and as I did this I could see how they would start to form the screens of the website.


SITEMAP

The site structure needs to be thought about before producing any sketches or wireframes. The objects established in the OOUX process now started to form what would be the navigation on the site and allowed me to establish the sitemap.

BRAINSTORM

A brainstorming session was held as part of the Create phase. Post-it notes were used to create as many ideas as possible, ranging from a playground area to show experimental work to vlogs and articles.


Three ideas were then selected to be taken forward into the concept stage and another two were retained as supporting ideas/features to form part of the overall solution.



Primary

Show the fun personality of the agency through the design
Create a set of custom iconography
List out some facts about the agency


Secondary

Give the background, ethos and meaning to Mahoney
Create a section for 90 second video blogs







DESIGN AIMS AND SCOPE

The primary aim was to develop a responsive website, using a mobile-first design strategy. Initial sketches were created and then these were worked up into visual designs.


I decided to make a change to the workflow approach conventionally undertaken for this type of project. Instead of focusing on designing flat screens at a fixed width for all breakpoints, I designed only the smallest mobile screen templates and then moved the designs into HTML, CSS and Javascript, in order to have a fully responsive design and prototype workflow.


I applied this approach to the wireframes and visual design which allowed me to build a fully working prototype which eventually became the live site.


The deliverables for the design stage were:

A sitemap for the website.
Concept sketches and initial ideation.
Wireframes created at the mobile screen size with a fully responsive prototype created in HTML, CSS and Javascript.
Visual designs created at the mobile screen size with a fully responsive Hi-fidelity prototype created in HTML, CSS and Javascript.
A visual design UI Kit.


The prototype shows a fully responsive version of the website and could be viewed by stakeholders on any device or screen size.


The wireframes will be created using Sketch, as will hi-fidelity designs and the prototyping in HTML, CSS and Javascript. The design process followed an iterative one throughout the cycle of the project. Most of the design began with initial sketches and progressed into code as quickly as possible.


CONCEPT SKETCHES AND INITIAL IDEATION

LO-FIDELITY WIREFRAMES AND PROTOTYPE

The next stage was wireframing. The sketches were worked up into screens and a prototype was created. The prototype was used for a round of user testing and the feedback was included in the hi-fidelity designs and prototype.

The prototype for the wireframes can be found here.


Hi-Fidelity Designs and Prototype

The next stage was the hi-fidelity design. The designs were worked up into a final prototype based on the wireframes which had been created following user testing.

The final prototype can be found here.




VISUAL DESIGN STYLE

I then developed the visual design language. Mahoney had no digital design language established. The research showed this was needed to reflect the personality of the agency. Use of colour and typography was used to achieve this, along with iconography. The result is a fun, but clean visual design aesthetic that will help Mahoney stand out from other agencies within the industry.



UI Kit and Style Guide




DESIGN ITERATIONS





Wireframe




Revised design


During testing on the wireframes, all participants mentioned that the choice of font was a bit dull. Altohugh no visual design was applied to the wireframes, it was noted that use of typograpghy could be improved and this was taken through and applied to the heading in the visual design.







Wireframe




Revised design


During testing, a some of the participants commented on the use of the word “Blog”. It was suggested that it was a little bit unprofessional and referenced more causal website use. It was decided to rename this section to “Articles”, which is a more acurate description of the content found in this section.







Wireframe




Revised design


During testing and review sessions with stakeholders,. it was decided that a “Hamburger” would be used for the main navigation. This was updated on th evisual design. I was happy to go with this as the entire site is possible to navigate through contextual links and does not just require use from the main navigation to move around the site.





EVALUATION

Overall, the project produced a very effective website, and achieved all the objectives that were outlined at the beginning.


I was able to establish the user needs and expectations and quickly realised that content was the key to achieving these. It was confirmed that the users would require the site for different devices, including mobile, and this allowed me to focus on a mobile-first responsive website.


OOUX proved to be the key in the UX planning to create a truly mobile-first website. By focusing on the content, and in turn the objects, I was able to prioritise the content types into a list format that would be suitable for any screen width or device.


Originally I wanted to skip the design step and go straight into building out all prototypes in code, but this proved to be a little hard to visualise. I instead resorted to designing key screens at the mobile size and then got coding as quickly as possible and designed the rest of the widths on the fly.


Having a prototype built in code was a great way to share progress with the client. It could also be evolved and added to, eventually becoming the hi-fidelity design and then the final website. This is now a feature I will continue to add to my design workflow for responsive web design.