Medical institution website development

Medical institution website development

We got acquainted with bsmu.by team in September of 2016. We scheduled a meeting, agreed upon all the necessary documents and launched the project in a week.

We had the following goals:

  • develop a modern looking website and adapt its layout  to relevant devices’ resolutions;

  • it should be obvious that the website represents a medical institution the moment it loads;

  • website should feature ‘Schedule a consultation’ form, which sends data via e-mail;

  • website should be available in Russian and English;

  • website should be challenging for titles at various international website awards.

Usage of stethoscope in site design was banned :) A week after project’s launch we have completed development of Main Page design prototype.

 

0b45cd17e1.jpg

 

Having received feedback from the customer, we decided to implement several changes to the initial design:

  • News block got moved to the 2nd screen;

  • Re-designed ‘contact information’ element;

  • ‘Our Services’ block was reduced to 2 lines of text;

  • ‘Our Services’  featured a slider.

Those changes resulted in the following design:

 

2db183a299.jpg

 

Since we’ve been tasked with developing a website worthy of challenging for international awards, we decided to put an emphasis on its design. Development of page layout and design took us 2 more weeks.

We’ve used the following unique elements:

Services icons

service_1.pngservice_2.pngservice_3.pngservice_4.pngservice_5.pngservice_6.pngservice_7.pngservice_8.pngservice_9.pngservice_10.pngservice_11.pngservice_12.pngservice_13.pngservice_14.pngservice_15.pngservice_16.pngservice_17.pngservice_18.pngservice_19.pngservice_20.pngservice_21.pngservice_22.png

Stock photos were used in layout for presentation purposes only. Many page layouts were approved without changes. We’ve recommended posting of articles in their full, as opposed to the then existing practice of preview posts.

Before:

 

1479312320591.png

 

After:

 

10214a0ddf.png

 

Timetable had to be in the form of a single table, putting emphasis on the consultation line’s phone number. 2 renditions were presented:

 

7398bc33ed (1).png

 

and

 

865b13397c.png

 

The 2nd option was chosen.

Once all page layouts have been approved, our designer started working on mobile version of the pages, since projects team leader set ‘mobile version priority’ course.  

This was our first project to have total separation of Front-End and Back-End development. It turned out to be rather simple in practice: Front-End developer converted page layouts to HTML and uploaded them to repository. Then Back-End developer stepped in and developed page functionality.

This helped us reduce:

  • hours allocated to development by approx. 10%;

  • test execution time by approx. 30%

  • total bug amount by approx. 30%

Extra hindrance we’ve encountered:

Our client’s website was hosted on a server with outdated software. Moreover, said server was operating 15 websites simultaneously. Fortunately, BSMU specialists, in collaboration with the current hosting provider, were able to solve the problem in no time.

Project Summary:

Front End - 90 hours

Back End - 140 hours

Design - 80 hours

Testing - 40 hours

2,5 months’ worth of work.

Technology stack:

Programming languages:

Без названия.pnghtml5-css3-js.png

Layout

CSS.pngHTML5_logo_and_wordmark.svg.png28742416.png

Database

MySQL.svg.png

Means of development (libraries and frameworks):

1280px-LaravelLogo.pngphpstorm-logo.png2color-lightbg@2x.png1280px-JQuery_logo.svg.pnggrunt-logo.pngmarinamilette_sass.pngLESS_Logo.svg.png

Testing tools:

jmeter-logo.jpgselenium-ide.png2000px-Redmine_logo.svg.png

0 comments

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.