OVERVIEW

In a world where having a website is crucial for a business, the competition between the companies providing an ever-changing platforms on which a website is built is massive. Nowadays, a good communication with the users is essential to stay in the game. 
. . .
This is a story of bringing back hope to a man who worked to create a unique content management system.

binoculars2binoculars2

MY ROLE

This UX concept design project took place on July 2016, as part of the UX certification program at John Bryce college. Working with two other colleagues, I was responsible for the research, copywriting, and part of the design.

 

 

 

 

 

A bumpy start

"Sorry, it’s confidential"

The primary objective of the final project was to produce a web and mobile ux concept solution for an existing or primary product. With each attempt to reach to a potential client, it was clearer that confidentiality might have much higher value than saving costs.

"Guys, we finally have a project"

A project was finally found but as time wasn’t playing on our side, we faced a new challenge:
complete a UX design process within 2 weeks.

We were introduced to a CMS that has failed in breaking through to the market.  As potent as the system might be, the UX design didn't reflect its potential and the UI design was outdated:

oldsitescreenoldsitescreen

... Is this still loading ? 

During our meeting with the client, a guidance in navigating and performing actions was quite necessary.
"I get a lot of phonecalls from clients asking the same questions as you do now" he confessed. It was revealed to us that its development stopped back at 2009.

We understood that even if we planned well how to catch up the 8 years gap, it would be strategically unwise to force newer technologies into this system.

     

    THE GOALS

    Let's get focused

    We met our client, a programmer at heart with a big vision in mind, but with no business model nor strategy even the best products might fail. During the meeting we believe it would be best to help him clarifying and defining the goals: 

    Retaining customers loyalty

    Improving usability and readability

    Reducing helpdesk costs

    papertornpapertorn

    - The Research - 

    Users and audience

    Within this very condensed timeframe and with great confidence from the client, we were lucky enough to meet three of the system's users who told us their pain-points and needs.

    They have expressed frustration, and in some cases took the blame for being so challenged in creating their website and even hired a programmer.

    See what they had to say about the system:

     

    users-quotesusers-quotes

    MARKET RESEARCH

    Exploring some of the leading CMS in the market was both essential and complex. Experiencing these systems as users, we had a head point and could come up with constructive conclusions.
     

    papertorn-upsidedownpapertorn-upsidedown

    - Constraints -

    The approach

    The system development stopped at 2009. Exploring the system even further made it clear that trying to bridge this gap wouldn’t be in the best client’s interest, especially with low resources and budget. Any effort to catch up with today's technologies could result in bigger delay.

    Instead, we gladly accepted the challenge to enhance the system’s strengths considering both technological and resources  limitations with a fresh approach.

    nissanux4nissanux4

    - Design Process -

    Pack for a few days

    Given very broad goals and an aggressive schedule for presenting the concept design, we had to work very intensively and to make very clear and cohesive decisions based on the research. 

    First things first

    Taking care of the most apparent problems: readability, functionality and hierarchy. Finding solutions for these problems was at high priority considering both beginner and advance users. One of the main conclusions was to find solutions to display the most relevant information using this strategic location of the white space.

    whitespacequote2whitespacequote2

    Remove the clutter

    The system offers many features. Though some of them are still in work progress, they appear as active and cause confusion. If it doesn't work - it shouldn't be there. To both improve users' experience and to meet our client needs - they were removed and a future solution was provided.

    writing-828911_1920writing-828911_1920

    - The solution -

    Redivide and rule

    With so many submenus and scattered items within them, it was time consuming finding a desired item and understanting how to perform a simple task.

    Our solution was first focused on redivision to 3 main blocks: Header, menu and content area in which:
     The functional features of the system were rearranged to a simple list of items
     Titles and text were changed and simplified
     White space is now cleverly used to display the most relevant information.

    screen1screen1

    Dashboard :: Rearranged and redesigned
    The information was rearranged and redesigned to be more readable. To provide a solution to the multiple inquiries about the capacity usage, a pie graph was added along with the option to increase it.

    screen2screen2

    Pages :: Unified menus and large click area
    The white space is now used to display the list of pages with the actions menu on top - a menu that was displayed repeatedly before for each of the pages on the list. Hidden page statuses are now displayed along with new ones and can be modified.

    screen3screen3

    Page editor :: Less clicks, no refresh
    It was clear that the system was built by a programmer just by the fact that the editing of the page content was divided to parts. Our solution provided followed the WYSIWYG approach to ease the user and to dramatically decrease the time spent on clicks and page refreshments.  

    screen4screen4

    Developers area :: Same environment, different permissions
    To ease the work process between the developers and site owners/ managers, we created a new feature. This enables the developer to test and upload custome made modules directly to the website CMS.

    mobile-setmobile-set

    Mobile :: Unnecessary actions OUT, Personalized notifications IN
    Understanding the client needs and daily routine contributed a lot to our mobile solution. We reduced the amount of actions on mobile to the most important ones that might require immediate action such as: purchase approval and comments management.
    Also, we understood the importance of personalized notifications and provided a solution that allows users to choose the type of notification and status updates. 

    - Conclusions -

    Start simple, keep it friendly

    Having learned a lot from our own experience as users, we also agreed that the time spent with the users talking about their pain-points and needs was an imperative part of the UX design process. 

    The main steps taken to give the control back to our users were:
    - The number of menu items was limited
    - Hierarchy and visibility were changed to be based on users needs
    - Vocabulary was tuned to be more common and accessible 


    Retrospectively, I can find ways to upgrade our UX work even further with even friendlier conversative interface.