Angina.eu

—2022

Angina.eu - UX/UI

CLIENT   —

 

Streptokill
 

MORE INFO   —

 

Angina.eu is mostly informative website about angina and tonsillitis. As it has so much information, client need to reach to everything the easiest way posible. Describing the problems, that are most common during the sickness. It holds customers reviews and their questions and answers.
I developed low and high fidelity wireframes, clickable prototypes, and users flow for the web and
mobile site.

angina_mockup.png

Why was a redesign needed   —

  • Lack of ability to find  the information

  • Information was displayed in a way that poorly conveyed the use of the information

  • The visuals were inconsistent, making the design cluttered and difficult to navigate

Solution   —


I started off the project by mapping out the current architecture of the website and change the layout of information in a way that is more intuitive and user-friendly. This was done in order to ensure that once the user visits the site, they can find the information they need quickly and in an easy to understand manner.
It was decided to perform the design in the style of minimalism, so the all attention was focused to the extended information about tonsillitis.

 Typography   —

roboto.png
Information Architecture: Sitemap
Sitemap.png
Low-fidelity Desktop Prototype

Some of the key changes include improved information architecture as well as a minimalistic design with consistent visuals.

low_fidel1_desk_angina.png
low_fidel4_desk_angina..png
low_fidel2_desk_angina..png
low_fidel3_desk_angina..png
low_fidel5_desk_angina..png
low_fidel6_desk_angina.png
Low-fidelity Mobile Prototype
low_fidel1_mob_angina..png
low_fidel4_mob_angina..png
low_fidel2_mob_angina..png
low_fidel3_mob_angina.png
low_fidel5_mob_angina..png
High-fidelity Desktop Prototype

This high-fidelity prototype for desktop and mobile devices, built in Adobe XD, connects wireframes in the user flow for on-boarding, then getting the right information. 

This wireframe contains the interactive links that allow the user to proceed forwards and backwards within the sequence, and the embedded cues for user navigation are clearly indicated.

 

ui-kit_anginas.png
mockup-web2.png
mobile_mockup.png