Cap'Net Pressing

UX/UI Design - HTML/SCSS/JavaScript

header@2x.png
 
 

📋 1. Description of the project

While visiting one of my best friend and his girlfriend in Lyon we talked about her family business. They own several dry cleaning locations in Lyon under the name of Cap'Net Pressing. Marine talked with me about the plans for the business and the issues with the current website they have.

Indeed the website for the dry cleaning is really old looking, not optimized for mobile and also hard to navigate. My mission was to analyse the current issues and to propose her a solution. I started by collecting feedback from her and other people in order to do a complete analyze of the issues. Then a made several iterations of propositions for the new website on whiteboard, design it in Sketch and finally code it to push it online as a proof of concept.

 

🤔 2. Problem statement

2.1 Analysis of the current state

As stated before the website not only looked old (you can click on the first picture below to enlarge it) but it was also hard to navigate and no optimized for mobile. I did a complete analyze of every pages but in order to shorten this doc I will mainly talk about the homepage.

 

2.2 Not optimized for mobile

  • The CSS style of the website did not support mobile devices forcing users to zoom in and out in order to access content.
  • The slideshow on the homepage was using the Adobe Flash technology which doesn't work on mobile.
  • Some elements like the modal to see the dry cleaning locations was really hard to use on mobile.
 

2.3 Confusing navigation and useless sections/pages

The navigation was confusing because first of all there was 2 levels of navigation where there should only have one:

  • A header (In red in the image above "Split of the different sections"):
    1. Our locations
    2. Other businesses in the areas
    3. Contact us
  • A navigation (In blue in the image above "Split of the different sections"):
    1. Home
    2. Services
    3. Our dry cleaning locations
    4. Testimonials
    5. News
    6. Contact us
    7. Map/Our locations

Here are some of the issues I identified:

  • The "Contact us" page is listed twice.
  • The "Our locations" map modal is listed twice, under a different name.
  • The "Our locations" which is a modal displaying the locations on a map and the "Our dry cleaning locations" page listing the dry cleaners can easily be merged.
  • The "Other businesses in the areas" page is useless for the visitor and frankly feels spammy. It lists the websites of 6 businesses in Lyon that also had their website made by the same web agency.
  • The "Testimonials" page which is intended for visitors to leave a review is not used. 2 years after the release of the website there was only 2 good reviews which were posted around the same time just after the release of the website. As a visitor I will guess that these 2 reviews were written by the owner or their family/friends.
  • The "News" page was not used. Only one news in 2 years.

The homepage itself also had some issues but more on the content side were a lot of the text didn't bring any values. Also the link to Google Plus was useless because almost no one use this social network, not even the owner of the owner of the dry cleaners who did not post any content.

 

👨🏻‍💻 3. Process and work

Following the analysis of the website I decided to divide the new website in 5 different sections:

  • Homepage
  • Locations: This section combines the list of dry cleaners and a map.
  • Services: List of all the services offered by Cap'Net Pressing
  • Contact
  • About us

I worked then on the different layouts and pages:

Few of the different layouts I considered. I ended up choosing the layout "gamma".

Few of the different layouts I considered. I ended up choosing the layout "gamma".

Drawing of the "Locations index" page. The reality ended up being a little bit different. For example I was unable to find good pictures for each dry cleaner so I did not display them.

Drawing of the "Locations index" page. The reality ended up being a little bit different. For example I was unable to find good pictures for each dry cleaner so I did not display them.

 

💎 4. Outcome

You will find below the final proposition done after multiple iterations and discussions:

The mockups were made with Sketch, hosted on GitHub for a the versioning and pushed on InVision in order to make it a working prototype and collect feedback.