Primer Presentation Group

View Prototype

Project Brief

Primer Presentation Group is a business that specializes in helping clients convey their brand or idea in the form of a presentation, workshop, video production, or event.

Project Goal:
Design a responsive website for Primer optimized for client conversion. The website had to be user-friendly and visually pleasing with proper UX and UI design.

About Primer

Services Provided:

1. Media/Event Presenters
Presenters promote your product or service at a small scale event , a trained professional gives an executive level key-note or sales presentation, or a media presenter or host represents you on live television.

2. Video Production
Film and produce video blog content to be added to businesses’ social media channels to help grow brand awareness.

3. Communication Training
Workshops that teach teens the art of confident communication, helping them speak effectively to their class, an audience, or to each other.

Research

Overview

3 In depth client interviews
15 Small business owner surveys — General opinions on PR/Marketing services.

Insights From Research

• The blog on the Primer website was not getting the traction that Nicole wanted it to. Being the primary inbound marketing tool of Primer, it was extremely important users were discovering it. However users weren't even noticing it due to unclear navigation.

• It became clear that Nicole’s clients were drawn to her work ethic and personality. Her brand was a manifestation of her personality, therefore I kept this in mind while designing the site.

• Users found the existing site convoluted, confusing to navigate and lacked credibility.

Competitive Analysis

1. Budget-friendly: Primer has a pricing structure that is rather affordable for small businesses, compared to large marketing/PR firms.

2. Ease of use: Digital marketing and marketing software are easy-access tools that can be used and controlled by owners anywhere anytime. Primer, marketing/PR firms, consultants and traditional ads all require communication/negotiation with an outside source.

3. Beginner-friendly: Primer offers all-in-one services. E.g. Marketing/PR firms might require you to find your own videographers.

Planning

User Personas
Frustrations (Painpoints)

• Not comfortable with public speaking
• Lack of marketing knowledge/skills
• Doesn't know any presenters, actors, or videographers

User Stories

• As the owner of a bicycle care product company, I want to gain more publicity and exposure in the media, so that I can get word of mouth marketing going for my products. 

• As the owner of a greeting card company, I want to make a video for my business so that I can raise my product awareness in the market.

• As a photographer, I want to have videos featuring my work and better my communication skills, so that I can generate more bookings and negotiate with clients more efficiently.

Solution

Design a professional looking website, provide clear information about Primer and its services, incorporate content that enhances credibility.

Design

Visual Language

Mood
Professional, Sleek, Established, Credible, Personable, Friendly, Warm

Colour
Monochromatic, Yellow Accent on CTAs, Main Colour: Green. I went with a monochromatic colour scheme to keep the web site as simplistic as possible. I went with a dark green as the main colour because not only is it the second most widely accepted colour, it also evokes a calming and stress relieving effect. This is especially practical for Primer because public speaking/presenting can be a very daunting event for many people, and the green works as a way of combatting this. Green is also associated with prosperity and progress to convey the theme of professionalism on the site. Finally I chose green because I didn’t want a colour too vibrant (as it would distract from the content) nor a colour to dull. Green was a perfect colour because it wasn’t too vibrant, but it also had some character to it which added a element of design and comfort to the web site. I used yellow as our accent colour for the CTA’s to make them stand out in contrast with the green (both colours worked well together).

Shape/Space
The space I wanted to be open, clean, simplistic, and not congested and disorderly in any way. The reasoning behind this was that I wanted the user to feel comfortable on the site and not overwhelmed by the amount of content, colour, shapes etc. being displayed.

Moodboard

I used green as the main colour for the reasons previously mentioned. The microphone, white office room, and presenter represent the primary services of Primer I wanted to keep in mind and also convey when I was designing the web site. The blue logo in the middle was the design inspiration for the Primer logo. I chose this logo because I felt it was symbolic of connectivity, collaboration, networking and communication as all three strokes from the people are connected. These key words are what I wanted to convey to the user in the logo of Primer. The image in the far right was the inspiration for typography in the web site. I wanted to go with a font that was simplistic yet robust, professional and clean looking yet not too boring. The remaining images were the design inspiration in regards to page layout, each containing an element I drew inspiration from while designing the web site. The two on the right contained a well used hero image, the middle one contained a professional looking navigation bar layout, and the one on the left provided a professional looking separation of information displayed.

Style Tile

For the logo I used the same idea in the logo in the mood board, which is three people all connected through strokes. The two people on the right are slightly smaller and subdued than the one on the right to make the left side more prominent, thus adding some character to the logo and making the text stand out (which is to the left of the logo). I gave it the dark green colour, the same as our main colour.

The variation in green is the use of the monochromatic colour scheme as discussed earlier in this case study. The lighter greens were used in areas where I didn't want the background to be too conspicuous and distracting from the content. The darker green was used in the navigation bar and footer menu as no imagery or descriptive content was used here so it worked well and accentuated the buttons and text that was over top of it.

For the text I used Montserrat for the headings as it was a simple, robust, and professional typeface. For the body I used Avenir as it was a simple and professional typeface however was more delicate than Montserrat which made sense for the body text.

Testing

Additional Observations Included:
• Inconsistent Labels
• Redundant CTAs
• Missing Information
• Testimonial has no name/photo of client
• There needed to be a share option on blog page

Conclusion

I was able to build an effective website that through displaying Primer’s value, was able to convert visitors to clients.