Website Revamp

Requirements Gathering - Documentation - UX Research - Wireframing - UI Design - Coding

Overview

This is one of the biggest projects I've done! My role was to interview business experts, design wireframes, and later on, code the prototype to be presented to stakeholders.

Challenge

The current site is a lengthy and tedious form which are frustrating to the users. I had to transform a single-page inquiry form into a multi-page website, taking into account the complexity of the form workflow as well as the new functionalities of the site.

Process & End Results

It took about 2-3 weeks for requirements gathering with stakeholders and wireframes to be drafted out. The challenge proved itself when we found ourselves in a labyrinth of user workflow through the form that is complicated to customers no matter which route we took. We eventually settled for the best option, borne by constant discussion with my UX mentor and business experts who knew the users much better than I do.

After wireframes were designed using Balsamiq, I came up with several high-fidelity UI mockups with Adobe Photoshop to give the stakeholders a better idea of the design concept. When the green light is given, I started building the prototype. The prototype was coded from scratch.

We were very fond of iteration; we were always trying to find a better solution. Screenshots of different prototypes were presented to current users for their feedback. UX tests were conducted, specifically A/B and multiclicks tests, using Usabilla & Zurb. We also conducted a round of heuristic evaluation. With user feedback, the design was tweaked until we were satisfied with the final outcome.

Sketching
Sketching.
Wireframes
Wireframes.
UI Mockup
UI Mockup A.
UI Mockup
UI Mockup B.
UX Test
Results from a UX test.
Website
Final look.
Responsive

Corporate Website

Concepting - Competitor Research - UI/UX Design - Documentation & Presentation

Overview

I was responsible to come up with some concepts for some pages of the corporate website. My role was mainly research and idea conception for both the website and a complementary email marketing campaign. I took a step further and created UI mock-ups to give a clearer idea + lighten the load of the in-house web designer. It was for two pages - About the Team and Careers.

Deliverables

  • Design proposal & project timeline.
  • PowerPoint presentation which consisted of 3 different ideas for each page.
  • Wireframes & UI Mockups

Process & End Results

This work is under a non-disclosure agreement. Content is changed accordingly and although this may not be the exact design, it is a close replica of the concept.

Competitor research was warranted. I looked at hundreds of business/corporate websites for inspiration and to see "what’s new out there". I also looked into the latest web trends, to give the website a ‘wow’ factor. I also sketched out various ideas. I find myself always advocating for the simple, minimalist designs. For this design, despite the large percentage of creative agency sites using illustrations, I suggested photography images to cater to the target audience of the company. A parallax design was also recommended.

Idea Conception
Concept for About The Team page: Wireframe.
Idea Conception
One of the 3 ideas.
Idea Conception
Illustrating the accordion concept.
Email
Complementary email.
Idea Conception
One of 3 ideas for Careers page.
Idea Conception
Same idea, different page.

Web Forms & Surveys

UX Research - UI Design - Coding - QA

Overview

My general role was to make the forms as painless as possible for users. Most forms which I have designed and coded are in the professional setting.

Challenge

A majority of the forms & surveys are rather complicated/heavy and user testing before the application roll-out was difficult due to limited resources.

Process & End Results

This work is under a non-disclosure agreement. Content is changed accordingly and although this may not be the exact design, it is a close replica of the concept.

Whether they are simple or complicated forms, my first step is usually interviewing stakeholders to gain a better understanding of the purpose of the forms as well as the desired user behavior. For instance - whether we want the forms to be quick and easy to fill mindlessly, or if we want users to slow down and think while completing the form.

Based on the requirements, I design the forms according to web standards, under the guidance of my UX mentor.

From there on, UI design was very minimal. Coding was smooth-flowing with little hiccups, generally using frameworks which are already integrated into the applications/platforms. The most common frameworks used were Twitter Bootstrap & jQuery UI. I worked with a web developer, where I handled all of the HTML and CSS, with a little bit of jQuery on the side. All forms coded are responsive.

User testing is done when the applications are in beta. Several focus groups were conducted with various users. My role here was jotting down comments, confusions, frustrations, suggestions, the good, the bad - everything - and continuously bounce ideas back and forth with stakeholders to improve the user experience. About 3-4 focus groups were done in the span of 2 months. I also participated in the QA, verifying the test requirements to ensure bug-catching was as detailed as possible.

Some of the suggestions that were strongly advocated included:

  • Use of primary and secondary buttons/links to provide proper distinction.
  • Use of different arrangement/placement of fields to slow down user completion time as it is important to obtain accurate information.
  • Minimize the use of hovers or hover-oriented actions and the distraction that come with it.
  • Use of better UI layout for users to view information easily.
  • Suggested several features to ease documentation/reporting for users (e.g. exporting files and graphs).

The entire process was iterative. Throughout the weeks, there was a significant decrease in user complaints & suggestions.

An example of a web form I was working on:

  • Web Form

    Identifying the problem/need.
  • Web Form
  • Web Form
  • Web Form

    Solution: Introduced a form wizard.
Wireframe
Example #2: Wireframe.
Wireframe
Example #3: Wireframe.

Personal Portfolio

Concepting - Content Management - Copywriting - UI/UX Design - Coding

Overview

The moment I realized that I want to venture into the web industry, I started designing and coding my own portfolio. I have done two so far.

Challenge

Perhaps the main challenge was that I had to do everything, and I had the choice to do anything. There are days where my creativity runs too wild and my head will be stuck in the clouds, drafting out many ideas, only to be met with the reality that my skills may actually be insufficient to complete a requirement.

Process

The key was to find a good balance between what I want to show, what I need to say and what I can do.

Content Management & Copywriting: This is rather self-explanatory. Among many projects, I picked up a few where I actually had some results to show and the ones which I played the most significant amount in. Copywriting was a breeze. I'm representing myself after all.

UI/UX Design & Wireframing: My requirements were simple - I just wanted a clean website where it is easy for users to navigate, for they are potentially hiring recruiters who do not have much time to spend on a site. That being said, case studies & UX research stories can be lengthy, so my main priority was to display the information in a fashion to cater to the notion that scanning is much more probable than reading. Also, choosing apt images to mirror the content.

Coding: I concentrate mainly on HTML and CSS. I made an effort to push the limits of CSS, where some items could be done easily with jQuery but could also be done with CSS, just with a few extra lines of code.

The Result: What you are seeing now! Not much fancy-schmancy web development, animating, flying stuff going on; I concentrated on incorporating web trends & standards such as responsive design, minimalism, importance of content & layouts and the likes.

Here are screenshots of my very first portfolio:

Front Page
Front page.
Second Page
About Me section.

Web Application

Requirements Gathering - UX Research - Wireframing - Prototype Coding

Overview

I was responsible to design the workflow and UI of a simple web application. Functionality is given top priority as this app houses a lot of data and users will be overwhelmed with the load of information. My role was to design the workflow that will make the process of going through all this data as effortless as possible.

Challenge

The tricky part was the amount of information the users had to deal with – we’re talking thousands of lines of data. In addition, users go through a very repetitive process of crunching in similar numbers multiple times. The users usually do the old copy-and-paste technique, but we were adamant on changing that.

Process & End Result

This work is under a non-disclosure agreement. Content is changed accordingly and although this may not be the exact design, it is a close replica of the concept.

Like every other project, wireframes were drafted using Balsamiq, simultaneous with discussions with the business expert. I came up with various designs to tackle the main problem with the repetitive processes.

This was a short-term project and time was an important factor. Hence, we decided to use Twitter Bootstrap to sync the coding process and allow the transition from prototype to the real deal much easier. I was in charge of coding the prototype, counting on my coding mentor to give me some handy tips on jQuery and to ensure that my code is clean.

  • Wireframes
    Wireframes.
  • Prototype
    Prototype with Twitter Bootstrap framework.

Web Design for Non-Profit Organizations

Requirements Gathering - UX Research - Wireframing - UI Design

Overview

Usually a one-man project, where I volunteer to be a webmaster, either designing or revamping the entire user interface of the website as well as updating the content periodically.

Challenge

One of the most challenging (and most common) requirements I was given was to "make the website pretty"; it being challenging as site owners do not have a clear idea of what they are looking for.

Process & End Results

To tackle the problem head-on, I start by asking questions to gain a better understanding of what is wanted/needed. For example: What is the main purpose of the site? Are the users here for information for a specific topic or just looking around? What do we want the users to know?

Before and during the wireframing process, I continuously do some research on sites in the same industry. I concentrate mainly on the trying to make the website as clean as possible, with emphasis on making the main information easily accessible to users. Most of these websites are done on website builders (such as Wix, Weebly etc.). My role is to pick out suitable templates, alter them accordingly to the wireframes and design web banners for events.

Once the final work is presented to the client, I will do my best to explain the justification behind the design, usually backed up by web standards or HCI studies. If needed, I also give suggestions on how to improve on the simple things (e.g. typography, types of graphics), that are typically overlooked by clients. I also update the web content periodically, provided by the client.

Site Redesign
Before Site Redesign.
Site Redesign
After Site Redesign.
Site Redesign
Interested? Talk to me!

I am currently available for full-time employment.

This site was designed and coded with love by Olivia Ng.