Skin By Salima - Responsive website re-design & development

Skin By Salima - Responsive website re-design.

R O L E S  &  R E S P O N S I B I L I T I E S

I was the sole UX designer that worked on the Skin By Salima responsive website re-design.

Responsibilities

Some of my responsibilities included:

  • UX and competitor research.
  • Creating paper wireframes.
  • Creating digital wireframes and low-fidelity prototypes.
  • Creating high-fidelity mockups and interactive prototypes.
  • Usability testing and design iterations.
  • Accounting for accessibility.
  • Maintaining brand consistency and tone throughout the new designs.
  • Website development, site functionality and deploying the final product.
  • Maintaining, optimising, and updating the website when needed.

T H E  P R O B L E M

Among other reasons, the main problem was that the old website was not generating enough traffic or business for the client, and the hosting of the website was a little expensive for a start-up company that is in the early stages of business.

R E S E A R C H

When carrying out audits on the business’ direct and indirect competitors, I uncovered insights into how the re-design could improve traffic to the site.

For example, websites that failed accessibility tests, had a lack of content or their site lacked branding (for example). I have found that conducting these audits can reveal potential ‘gaps in the market’ and highlight opportunities where the new website or app can excel past the competition.

I also analysed statistics and analytics provided by the client to narrow down specific problematic areas with the original design as well as insights into what was already working well for the business. This analysis helped guide the process of re-designing the website going forward.

Actionable Insights based on collected data

After analysing the analytics data from the old website, I created a simple presentation to present the data to my client. We then used that data to synthesise actionable insights based on how we could improve on the previous user experience when designing the new site.

From there we discussed the proposed information architecture on the rebuild and created a site map to help guide the new designs.

Image showing an early site map for the skin by salima website.

F I N A L  D E S I G N S

The solution was to re-design the old website and develop it on WordPress from the ground up onto a different web host and server.

Below is a sample of the final designs at different screen sizes.

You can view the full website design and re-build by visiting the site itself at skinbysalima.com.

The image shows various web pages at different screen and device sizes.

A C C E S S I B I L I T Y  C O N S I D E R A T I O N S

Typography Hierarchy

I used headings with different sized text and weights to provide visual hierarchy.

Landmarks

I used landmarks to help users navigate the site, particularly those users who reply on assistive technology.

K E Y  T A K E A W A Y S

Impact

Review by Salima M. (CEO of Skin By Salima):

“Nick is very professional and explained the techy stuff’ to me very clearly. Nick also has a friendly approach, and no question was too big to ask. Thank you, Nick, for making a wonderful website and making the process easy! “

What I Learned

I learned that when re-designing a website, you can uncover some surprising insights and hints on how to successfully improve the user experience using analytics data. The re-design will need to be monitored closely to verify if the re-design was a success overall.

It’s important to have metrics that are measurable and comparable to verify if changes and tweaks carried out to the user experience of a website, app or service has improved matters.

Need a user-focused product service mobile app responsive website user interface design?