Nodd Website Redesign

Summary

For this design challenge, I proposed a redesign for the current landing page of a fictional company website. This redesign required me to rapidly prototype and design in a short period of time. The outcome of this project is a professional, efficient, and visually pleasing version of the landing page.

My role

I worked on this project by myself as a UX designer, so I was responsible for evaluating the current landing page and building mid and high fidelity designs.  

The challenge

• Visit the hypothetical site/screenshot of nodd.net. Keep the exact copy, but create a high fidelity redesign of the page

• Welcome to reorder content containers and images

• Keep the aesthetic minimal and cx simple

• Make sure login and join is easy

• Time limit of 5 hours

The problems I looked to solve with my redesign were making information easy to find and creating a landing page that was simple and easy to navigate. The main limitation was the extremely narrow time constraint for a high fidelity design.

The original webpage was an advertisement that presented the features of Nodd, a fictional product/company. To evaluate Nodd's landing page, I audited the current state of the website against UX principles to find visual design and usability pain points.

Major pain points

• Inconsistent alignment of text forces the eye to dart back and forth, which making reading difficult

• Poor color contrast impairs readability

• Excessive vertical stacking of elements requires prolonged scrolling, making information difficult and tedious to find 

• Lack of separation for groups of related information

• Inconsistent styling of related information

• Misordering of information such that a user doesn't immediately know the features of the product

Problem statement: Users need an easier way to digest the information on the landing page since the current experience is tedious and difficult to use.

After my evaluation, I created a mid fidelity design on Figma, where I established the page hierarchy, spacing, and sizing of my elements using grid. I did not worry about colors or images. Then, I created a design system that specified how I would style my elements, which included fonts, spacing, and colors. Finally, I combined my mid fidelity design and design system to create the high fidelity design.

Mid and high fidelity designs and design system on Figma 

Landing page improvements

• Text is aligned left for easy reading. The eye has a left anchor point as users read left to right  

• High color contrast for backgrounds and text 

• Horizontal adjacency for related elements reduces vertical stacking and scrolling

• Color blocking used to separate different sections

• Related information is close in proximity and styled consistently

• Features of the product placed immediately under the page title

Of course, I acknowledge the artificiality of this design challenge, where a major limitation was the lack of feedback. High fidelity designs are usually not created in just 5 hours, and there are typically multiple rounds of user testing involved. If I had more time, I would conduct 3-5 moderated user tests for the original experience to gather usability pain points. I would also conduct another 3-5 moderated user tests for my redesign so that I could receive feedback and iterate upon my design. As it currently stands, my redesign of Nodd's landing page is better than the original, but user testing and iteration would greatly improve it.