Research to Reality: Improving the Emote Digital Website

EMOTE DIGITAL UI/UX DESIGN INTERNSHIP

CHALLENGE

  • High competition in the Digital Marketing Agency space

  • Wanted to update the website incrementally to not overload developers

  • Maintaining the SEO of the website

OPPORTUNITY

  • Learn about the Digital Marketing Agency Industry

  • Capitalise on current design trends and apply it to the website

  • Identifying and addressing the target audience of the industry

TIMELINE

December 2023 - March 2024

MY ROLE

UI/UX Design Intern

RESPONSIBILITIES

#

UI Design

#

UX Research

#

Branding

#

Web Design

TECH STACK

Figma

Monday

Photoshop

Research to Reality: Improving the Emote Digital Website

EMOTE DIGITAL UI/UX DESIGN INTERNSHIP

CHALLENGE

  • High competition in the Digital Marketing Agency space

  • Wanted to update the website incrementally to not overload developers

  • Maintaining the SEO of the website

OPPORTUNITY

  • Learn about the Digital Marketing Agency Industry

  • Capitalise on current design trends and apply it to the website

  • Identifying and addressing the target audience of the industry

TIMELINE

December 2023 - March 2024

MY ROLE

UI/UX Design Intern

RESPONSIBILITIES

#

UI Design

#

UX Research

#

Branding

#

Web Design

TECH STACK

Figma

Monday

Photoshop

Research to Reality: Improving the Emote Digital Website

EMOTE DIGITAL UI/UX DESIGN INTERNSHIP

CHALLENGE

  • High competition in the Digital Marketing Agency space

  • Wanted to update the website incrementally to not overload developers

  • Maintaining the SEO of the website

OPPORTUNITY

  • Learn about the Digital Marketing Agency Industry

  • Capitalise on current design trends and apply it to the website

  • Identifying and addressing the target audience of the industry

TIMELINE

December 2023 - March 2024

MY ROLE

UI/UX Design Intern

RESPONSIBILITIES

#

UI Design

#

UX Research

#

Branding

#

Web Design

TECH STACK

Figma

Monday

Photoshop

Client

Emote Digital is a Digital Marketing agency that provide Branding, Website Design, and Digital Marketing services to clients, which ultimately leads to increasing the online presence for customers. They are recognized for being the Top Full Service Digital Company awarded to them by Clutch in 2023.

*Most of the work I had done is under the intellectual property of the company

Challenges

High competition in the Digital Marketing Agency space
There is a high concentration of marketing agencies of similar size to Emote Digital in the industry, and 20 main competitors were identified.

Wanted to update the website incrementally to not overload developers
Developers are always under the pump and this project isn’t their priority as it was an internal project. This would mean that the design changes had to match the budget they can work with.

Maintaining the SEO of the website
The SEO is what made this brand successful, but with that, it is very text heavy, so there were opportunities to convert content to be more visually appealing.


Solutions

Conducted a competitor analysis
The full analysis will be down below. The analysis compares what the 20 other brands do to stand out and to see how far back we are from the rest.

Incorporating frontend development knowledge to designs
Using my background in frontend development, I was able to know whether a design was viable or simple to create using basic CSS styles. In doing so, it increased the likelihood of the designs being approved for development.

Focus on the company’s strengths
Keeping the content as is but incorporating other design principles to showcase the content better or sometimes to hide it to avoid user reading fatigue.

Challenges

High competition in the Digital Marketing Agency space
There is a high concentration of marketing agencies of similar size to Emote Digital in the industry, and 20 main competitors were identified.

Wanted to update the website incrementally to not overload developers
Developers are always under the pump and this project isn’t their priority as it was an internal project. This would mean that the design changes had to match the budget they can work with.

Maintaining the SEO of the website
The SEO is what made this brand successful, but with that, it is very text heavy, so there were opportunities to convert content to be more visually appealing.


Solutions

Conducted a competitor analysis
The full analysis will be down below. The analysis compares what the 20 other brands do to stand out and to see how far back we are from the rest.

Incorporating frontend development knowledge to designs
Using my background in frontend development, I was able to know whether a design was viable or simple to create using basic CSS styles. In doing so, it increased the likelihood of the designs being approved for development.

Focus on the company’s strengths
Keeping the content as is but incorporating other design principles to showcase the content better or sometimes to hide it to avoid user reading fatigue.

Challenges

High competition in the Digital Marketing Agency space
There is a high concentration of marketing agencies of similar size to Emote Digital in the industry, and 20 main competitors were identified.

Wanted to update the website incrementally to not overload developers
Developers are always under the pump and this project isn’t their priority as it was an internal project. This would mean that the design changes had to match the budget they can work with.

Maintaining the SEO of the website
The SEO is what made this brand successful, but with that, it is very text heavy, so there were opportunities to convert content to be more visually appealing.


Solutions

Conducted a competitor analysis
The full analysis will be down below. The analysis compares what the 20 other brands do to stand out and to see how far back we are from the rest.

Incorporating frontend development knowledge to designs
Using my background in frontend development, I was able to know whether a design was viable or simple to create using basic CSS styles. In doing so, it increased the likelihood of the designs being approved for development.

Focus on the company’s strengths
Keeping the content as is but incorporating other design principles to showcase the content better or sometimes to hide it to avoid user reading fatigue.

Competitor Analysis

Steps:
1. Create a judging criteria to analyse other websites in
2. Position the websites/agencies in a positioning map
3. Compare non-ideal and ideal websites
4. Identify the most unique thing from each website and decide if we want to avoid that or we want to adopt that technique
Pitch it to client

Criteria
1. Visual Design: Branding, Colour, Aesthetic, Spacing
2. Functionality: The ability to carry out intended tasks
3. Animation: How engaging and interactive the website is
4. Accessibility: The website’s ability to inform the user how to perform the intended task

Agency Positioning Map based on criteria

Competitor Analysis

Steps:
1. Create a judging criteria to analyse other websites in
2. Position the websites/agencies in a positioning map
3. Compare non-ideal and ideal websites
4. Identify the most unique thing from each website and decide if we want to avoid that or we want to adopt that technique
Pitch it to client

Criteria
1. Visual Design: Branding, Colour, Aesthetic, Spacing
2. Functionality: The ability to carry out intended tasks
3. Animation: How engaging and interactive the website is
4. Accessibility: The website’s ability to inform the user how to perform the intended task

Agency Positioning Map based on criteria

Competitor Analysis

Steps:
1. Create a judging criteria to analyse other websites in
2. Position the websites/agencies in a positioning map
3. Compare non-ideal and ideal websites
4. Identify the most unique thing from each website and decide if we want to avoid that or we want to adopt that technique
Pitch it to client

Criteria
1. Visual Design: Branding, Colour, Aesthetic, Spacing
2. Functionality: The ability to carry out intended tasks
3. Animation: How engaging and interactive the website is
4. Accessibility: The website’s ability to inform the user how to perform the intended task

Agency Positioning Map based on criteria

Final Designs

Designs from the ideation phase was discussed to find out which of the components should be prioritised as these updates were going to be done on a rolling basis.

The info cards and trusted brands section were the first to be approved as that provided the best selling point in terms of interaction and uniqueness.

Learning Outcomes

How to innovate designs while still being in the constraints of the previous design system.

How to formulate and present a developer doc to a project manager
Understanding the start to finish process from when the project is handed to the company to the end point of passing off the developer the designs.

Perform effective market research on competitors in the industry
Through analysis of the individual websites and what makes them unique and effective and applying those theories to my current client

Presenting designs to stakeholders
With this aspect, practice makes perfect and during my time at Emote Digital, I had plenty of practice to present my work to my colleagues.

From Component Design to Live Website

From Component Design to Live Website

Developer Handover

The developer document allows the developer to see what has been updated on the current website with a side by side comparison of the old and new. Comments are also added to inform them the specific states such as hovered, pressed and etc.

This project was completed before the reliance of Figma Developer mode hence I communicated the changes to developers using Frontend CSS terminology in the comments.

Example of the Developer Handover doc, that shows what was previously there and what has been changed

Related Projects

MentorMe: A Career Guide Chatbot

#

Service Design

#

Conversation Design

#

Chatbot

UNIVERSITY PROJECT

FEBRUARY 2024 - JUNE 2024

MentorMe is a service that acts as a replacement to the current University of Melbourne mentoring and academic advising program. MentorMe provides a physical space that participants of the program can use to communicate, socialise and learn.

Responsive Designs with Dinya Designs

#

UI Design

#

Responsive Design

#

E-Commerce

INTERNSHIP

DECEMBER 2023 - MARCH 2024

Get rid of the old and in with the new as Dinya Designs make the change to modernise their website. This project follows my take on responsive design for e-commerce.

UX Strategy with Cléon Clinics

#

UI Design

#

UX Research

#

Client

#

Wireframing

INTERNSHIP

DECEMBER 2023 - MARCH 2024

Begin the design process from scratch with Cléon Clinics. This project showcases the sitemapping and wireframes of a new website and business.

Related Projects

MentorMe: A Career Guide Chatbot

#

Service Design

#

Conversation Design

#

Chatbot

UNIVERSITY PROJECT

FEBRUARY 2024 - JUNE 2024

MentorMe is a service that acts as a replacement to the current University of Melbourne mentoring and academic advising program. MentorMe provides a physical space that participants of the program can use to communicate, socialise and learn.

Responsive Designs with Dinya Designs

#

UI Design

#

Responsive Design

#

E-Commerce

INTERNSHIP

DECEMBER 2023 - MARCH 2024

Get rid of the old and in with the new as Dinya Designs make the change to modernise their website. This project follows my take on responsive design for e-commerce.

UX Strategy with Cléon Clinics

#

UI Design

#

UX Research

#

Client

#

Wireframing

INTERNSHIP

DECEMBER 2023 - MARCH 2024

Begin the design process from scratch with Cléon Clinics. This project showcases the sitemapping and wireframes of a new website and business.

Related Projects

MentorMe: A Career Guide Chatbot

#

Service Design

#

Conversation Design

#

Chatbot

UNIVERSITY PROJECT

FEBRUARY 2024 - JUNE 2024

MentorMe is a service that acts as a replacement to the current University of Melbourne mentoring and academic advising program. MentorMe provides a physical space that participants of the program can use to communicate, socialise and learn.

Responsive Designs with Dinya Designs

#

UI Design

#

Responsive Design

#

E-Commerce

INTERNSHIP

DECEMBER 2023 - MARCH 2024

Get rid of the old and in with the new as Dinya Designs make the change to modernise their website. This project follows my take on responsive design for e-commerce.

UX Strategy with Cléon Clinics

#

UI Design

#

UX Research

#

Client

#

Wireframing

INTERNSHIP

DECEMBER 2023 - MARCH 2024

Begin the design process from scratch with Cléon Clinics. This project showcases the sitemapping and wireframes of a new website and business.

Sean Khoo

Product Designer

Copyright © 2024 Sean Khoo

Socials

Sean Khoo

Product Designer

Copyright © 2024 Sean Khoo

Socials

Sean Khoo

Product Designer

Copyright © 2024 Sean Khoo

Socials