BRanding & website

Space Simplified by Twentythree

Photo of Space Simplified by Twentythree project

The goal of this project was to design a completely new responsive website and brand materials to promote Twentythree’s new brand. Space Simplified by Twentythree, is an interior design firm that provides first-rate retail and commercial design specialised interior design and project management services.

Launch site

YEAR

2018

role

I worked closely with the Company Director, Marketing Consultant and Developer to accomplish this project. My role in the project was to design the user interface and experience for the responsive website. I was also responsible for designing brand materials to increase brand awareness.

Problem

Since there was no budget for a comprehensive user research, I did a quick user test with 3 users and went through the current Twentythree’s website looking for problems that users might encounter. Some of the inconsistencies and user experience issues were identified based on their feedback:

Goals and objectives

I interviewed the company director, marketing consultant and sales executive to understand their problems with the current website and asked them why we were doing this and what we wanted to add to the new website. From there we identified the goals and objectives of the new website.

  1. Build a responsive website to increase brand awareness and sales
  2. Post reliable content, showcase our work with professional images, upload video testimonials from clients to build trust and credibility
  3. Start a blog site to share meaningful content to drive traffic

Sitemap

I started the design process by creating a high-level sitemap for the new website. It helps us to identify potential problems early on, as well as getting stakeholder approval without many visual distractions.

Photo of a high-level sitemap

Sketching

After going through the sitemap with the stakeholders, I started sketching some wireframes on my notebook just to get the ideas out of my mind. I like sketching because it’s easier to identify layouts that work well and those that don’t.

Photo of wireframe sketches

Lo-fi wireframes

Before diving deep into the pixels, I always create detailed wireframes to see how the content could be laid out on all pages. It’s easier to focus on the content and structure of each page and the functional process of the website without visual distractions.

Photo of lo-fi wireframes

Prototypes

After several rounds of feedback from stakeholders, I started creating prototype for all pages. By creating clickable prototypes in Invision, I was able to do quick user testing with few strangers and friends, and also able to leave feedback for each design iteration while presenting to the stakeholders. This helps to identify important usability and functional issues for the next iterations. I’ve also created a prototype for mobile view just to see how the user experience and art direction will feel when use on the device itself. The prototypes have been improved during many rounds of iterations based on observation and feedback from users and stakeholders.

Photo of Invision prototypes

Visual design

Once the prototypes were ready and approved, I started working on hi-fi mockups using Adobe Photoshop CC. This is the stage where I took the site’s wireframes and bought it to life through the use of colours, typefaces, buttons, and all the other visual elements as shown below.

Photo of Montserrat font
Photo of Freight Text Book font
Photo of sprites
Photo of forms
Photo of mobile filter
Photo of home UI for desktop and mobile views
Photo of testimonials UI for desktop and mobile views

Handover to the developers

After final refinements and meetings, I used Zeplin to create a detailed specification to hand over the visual assets to the development team. During the development phase, I’ve also assisted the developers on image slicing and content preparation to be uploaded to the new website.

Photo of handover using Zeplin App

Brand materials

As it’s a new brand, there was a need for a new logo to match the company vision – minimalistic, simplicity and modern. I’ve decided to take a minimalist path and coupled that with a golden brown colour to signify wisdom, optimistic and success which is also part of the company vision.

Space Simplified by Twentythree logo design 1
Space Simplified by Twentythree logo design 2
Space Simplified by Twentythree logo design 3

Along with the new logo, I defined a new colour palette, which I put to use all throughout the website as previously defined.

Photo of color palette

I applied the new logo into t-shirt, letterhead, company stamp and business card. I’ve also designed a company profile for potential clients to view it offline.

Photo of t-shirt design
Photo of letterhead design
Photo of company stamp
Photo of business card
Photo of company profile

Results

The client was very happy with the final outcome of the website. But I didn’t just stop there, I continued to tweak and improve the design and functions to provide great user experience after the launch as the client is looking forward to expand the scope of the website in the future.

Flight Interruption System re-skin

AirAsia Web Check-in