Abielusõrmus.ee Website
Case Study|


This case study illustrates the full process of designing and building Abielusõrmus.ee's website. Abielusõrmus.ee sells high quality handmade wedding rings in Estonia.
Visit website

Start to Finish

There's always a lifecycle and structure to each project. This was the system of how we created Abielusõrmus.

  • project-scope

    Project Scope Brief

    The client provided what they had in mind over meetings and in documents, detailing the scope and work that needed to be done. I met with the team that the client hired for marketing and development to structure our collaboration workflow.

  • abielusormus-laptop-wire

    User-experience Research

    Usability and user-experience research was conducted to define the site architecture. Wireframes for all devices were put together accordingly.

  • abielusormus-laptop-ui

    User-interface Design

    Once the wireframes were approved, user-interface design commenced. The UI kit was created and the design style applied to the wireframes.

  • abielusormus-laptop-code

    Development

    Using the Bootstrap framework, the approved design were coded out into clean and structured front-end code.

  • abielusormus-laptop-ui-2

    Product Testing

    Both the design and functionality were reviewed by the team to ensure it appears and works the way it should on all browsers and devices. The product was sent to the client for review after testing.

  • Ready to Go Live

    Once the client gave us the green light, the site went live. Abielusõrmus.ee became ready for use.

The Abielusõrmus Identity

As the objective was to create a minimum viable product to have a live site to garner leads through ads, we put together some basic branding guidelines before we started on the UX.

Designing the User-Interface

Based on the research and brief, we put together the wireframes that were coherent to how the final design would turn out.

abielusormus-wire-1
abielusormus-wire-2
abielusormus-wire-3

Designed and Built for All Devices

Like all of my work, responsiveness was one of the key focus of creating Abielusõrmus.ee. The presentation of intuitive structure and placement was what we focused on when creating the guidelines of the responsive site. Certain elements are displayed or hidden depending on the device used to access the site. It was important that the site could effectively retain users across all devices.

Defining the UI Kit

Abielusõrmus.ee was built on Bootstrap and embodies Bootstrap 3's default UI kit. With that, I customised it for consistency with Abielusõrmus's brand.

Typography 1

Typography 2

Colors & Buttons

AdWords Banner Design

Once we received the green light from our client, the style was implemented into the banner ads for Google Adwords.

abielusormus-banner-2
abielusormus-banner-3
abielusormus-banner-1

Development Kit & Framework

I used Twitter Bootstrap for our front-end development framework. All of my code are structured with clearly defined comments.

Bootstrap

Modular front-end system

On top of Bootstrap, I built a aystem to support the back-end development with a consistent implementation of the user-interface design. This directly impacts scalability on a positive note.

An Emphasis on Clean Code

The front-end code is strictly and carefully indented and uses the commenting system as titles within the code. This enables any future development work easily understandable by other developers.

Full Retina Support

To ensure images and icons appear sharp and clear in all resolutions, especially those of high-density screens, they are all of high-qualify retina format. Only SVG or monochromatic icons are used.




Regular

Retina Display

It was a Team Effort

Branding, UX & UI Design

Patricia Goh

Front-end Development

Patricia Goh

Digital Advertising

Taavi Raidma

More case studies like this:

Scroll Up