UI/UX Design, Art Direction, Branding
Space Simplified by Twentythree
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:
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.
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.
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.
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.
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.
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.
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.
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.
Along with the new logo, I defined a new colour palette, which I put to use all throughout the website as previously defined.
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.
We received positive feedback from the users and stakeholders. I continued to tweak and improve the design and functions of the website to further enhance the user experience after the launch.
