Hey Shinae

DESIGN PORTFOLIO

LG Hausys has recently redesigned its website, combining two separate Surface product websites into a single website to include all its product offerings and additional information of the corporate. My initial role in this website development project was web content development and delivery, but later seeing an opportunity to enhance user experience I turned it into an extra side project.
 

Work done for LG Hausys
My roles: UX/UI Design
Tools Used: Photoshop, Figma

⚠️ Problem

Once the new LG Hausys website, combining previously two separate websites into one consolidated website, I started to notice several elements that could be improved to enhance user experience. Sure enough, soon later as I was appointed the website manager and content developer, I received questions from Users on how to register for a new account.

 

(Original) Account Registration Form

❓ What Can Be Done to Improve User Experience?

Confused inquiries from Users made me ask the question, what can be done to improve user experience? As I looked more into the matter, I saw the lack of clarity may be the cause. I asked myself, what is then the most user-friendly and intuitive way for Users to register a new account?

💡 Solution

As I saw an opportunity to improve user experience in the account registration process, I decided to do a small side project to offer the company a better way to communicate to Users. Sporadically spending a few hours after work on weekdays and weekends, I created a new Account Registration Form.

The main goal for this side project was to create a form that is both intuitive and is easy-to-follow, especially for consumers who are not always familiar with the industry terms and systems.

RegForm_planning
Planning out what steps to take to improve the usability

Information Organization

Before anything else, the visitors have to determine which of these five user category groups they belong: Architect/Designer, Fabricator, Dealer, Distributor, and Homeowner (consumer). Because both industry professionals and consumers are visiting the website, there needs clear explanations and instructions for each user account. Especially on the B2B level, I have previously learned that many Dealers ask about how to become an Authorized Dealer, to be featured on the Dealer Locator Map. By making the registration process more intuitive, I wanted to reduce the number of potential dealers lost or abandoned mid-process.

I broke down the Registration process into blocks of questions, to better organize the flow.

Sketching and building wireframes

Flow of Information

Once organized into smaller blocks of questions, it made sense to divide the Registration Form into several pages, a direction shift from the exiting one-pager. This is to prevent the Users from feeling overwhelmed to complete the registration process. With added visual elements and explanations on the side panel, I hoped to make the process less intimidating and easier to understand.

✒️ Design Process

Here’s comes more fun. Based on the content organization and wireframe processes in the previous step, I started the low and high fidelity designs to quickly turn ideas into visual representations.

Hhigh fidelity mockup in works
Final high fidelity mockup presented to the team

💻 Design Presentation

When I had the high fidelity mockup ready, I shared the design with my team during the weekly meeting. I had to pitch within a few minutes, so I had to be quick: I jumped right into the before and after, explaining the reasons behind the redesign. The team, especially the Marketing Manager, agreed the updated form is easier to navigate and offered to buy the design to later share with the Global HQ for the upcoming website update!

💭 Final Thoughts

This has been an exciting experience as it started as a voluntary side project later turned into something LG Hausys can use in a real-life application. As an employee who is already familiar with the website, trying to put myself into Users’ shoes has greatly helped; I otherwise would have not known pain points without experiencing the site from their point of view.

Also, this is the first project I have worked on Figma, and it’s been a fun learning process!