Design Challenge: Redesigning 2359 Media’s Website
In 2359 Media, newly hired designers are required to undertake a design challenge to hone their design and communication skills. After I joined 2359 Media, my first design challenge was to come up with a new website design for the company as our current website is already 2 years old.
Before we dive in, here is a summary of my design process.
Persona
During the brief, I was tasked to create two key personas for this project, namely potential clients (Ollie) and candidates (Elaine) who are the main visitors to the website. Before diving into creating the personas, I researched their lifestyles, characteristics and the things they look out for on a company’s website etc. After that, I came up with their motivations, goals, and frustrations which allowed me to understand them as users better and to come up with their user journey.
User Journey
Mapping out both of their user journeys brought my attention to the potential touchpoints with corresponding emotions and possible pain points which led me to develop possible solutions I could include in this revamp. This process also allowed me to consider how the website could serve both personas at the same time with an improved user experience.
Information Architecture
With user journey as a foundation to build the website’s information architecture (IA), I generated the pages and linkages to aid me in designing. The current website aided me as a reference to think about what I should retain and the possible improvements I could make.
Wireframes
With the IA of the website, key low-fi screens are created to explore the visuals. The wireframes went through two iterations as I experimented with conventional designs. Based on the feedback given, the first iteration was very much like the current website with static sections/images. To push my creativity further, I tried to create a second iteration to match our vibrant company’s culture with animations and trendy designs in mind. The end result encompasses the idea of scrolly-telling and glassmorphism, which I will address in the Concept section below.
Style Guide
The typefaces used are Montserrat and Open Sans, which are part of our branding.
Dark and light modes were proposed to be kept for the revamped website — dark mode (with dark gradient background) will have black coloured texts while light mode (primarily white with coloured gradients) will have white coloured texts. Black and white texts keep information on the website minimal looking without distracting users as compared to using coloured texts. This also allows the other colours used on the website — i.e. accent, semantic and brand colours, to stand out.
Concept
Scrolly-telling
Scrolly-telling transforms stories into interactive experiences — content is revealed or changed chronologically as users scroll the page. The reason for including this in my designs is to turn users’ experiences into something more dynamic and visual storytelling heightens a story and hooks the user into its narrative. As the events unfold, I am able to use the design to make what is on-screen come alive and prompt users to scroll further.
Main Element — Bubbles
As opposed to the previous website, with waves as our main element, I proposed to use bubbles in our revamped website. I wanted to showcase 2359’s culture on our website and bubbles might give off a fun, friendly and flexible impression to our users. Including an element like bubbles also creates depth on our website when they are animated.
Glassmorphism
Glassmorphism refers to the frosted glass effect — a background blur is placed on objects which allows the background to shine through, which gives the impression of frosted glass. This is a UI trend that I wanted to explore and include across the website to highlight information, which fused nicely with the bubbles — our main element, placed behind it.
Loading Animation
A loading animation awaits users as they enter our website (homepage) for the first time. It starts with a box representing the great ideas of our personas — i.e. clients and potential candidates. Subsequently, showing how 2359 thinks out of the box and turns these ideas into innovative products, represented by the bubbles coming out of the box. I retained the tagline “We turn great ideas into innovative products” on the website, and turned it into an animation to capture their attention and keep them entertained while waiting for the site to load.
Hi-fi Screens
These are ideal user flows for our personas, Outspoken Ollie and Enthusiastic Elaine.
The different concepts mentioned above are shown in the few key hi-fi screens that are picked out: Home, Services, About and Careers.
Desktop
Mobile
Feedback/Takeaway from Sharing Sessions
There were two sessions with different groups of people in the company — other designers, the marketing team, and also the management team — for me to share my progress and gain feedback for further improvements.
The feedback I got from the design and marketing teams was focused on certain placements of CTAs (e.g. newsletter subscription), as well as several animations/interactions included in the hi-fi. With the content translated from the current website, they also pointed out the need to update some of the content in our hiring and our product pages.
After making these changes, I had another sharing session with the design and management teams. They emphasised the importance of consistency across the website and the colours used for the company’s branding, as well as knowing what the end goal for each page is — based on the needs of the key personas. Other than feedback for the website, there were pointers to improve my sharing session, which was another great takeaway.
These sharing sessions were very helpful and insightful for my progress and they allowed me to interact with different teams during the WFH (work-from-home) period!
Wrapping Up
Redesigning 2359’s website was definitely challenging, especially with the need to account for the company’s branding and business perspective, which fortunately the management team gave insights on. Embarking on this project allowed me to experience an entire design process on my own while also garnering support from my supervisors along the way. Additionally, this project allowed me to interact with the different teams in 2359 as I approached them for feedback and clarification.
Overall, the journey I undertook in this design challenge helped me build confidence and knowledge in both my design and communication skills as a new hire. Through applying design fundamentals, experimenting with design trends, and sharing sessions with the teams, I gained a lot of insights and useful knowledge which signified a successful outcome for the design challenge.
