PROJECT INTRODUCTION
Sooth
This is a re-design project for a women's health start-up. They help women find the best contraceptive pill for them. There was already a website, but it needed to be re-designed both visually and in terms of the UX, and information architecture.
Brief
To create a brand identity including branding (fonts/ colour palette) and user interface of the website.
Outcomes
Logo
Site map/ UX plan
Website
Mobile version of the website
Objective
The website must convey a large amount of information in a clear and easy to understand way. It must also look clean and medical/science related. Users must feel at ease and trusting of the site, and be comfortable enough to share their own experiences, and recommend to friends.
Scroll down to see the process.
Old site
On the left. This is what the sooth site used to look like, before I re-designed it.
DESIGN DEVELOPMENT
Identity
The name was the only thing that existed in terms of a brand identity before I was asked to join the project. So I had to create an identity and colour scheme to go with the name.
I wanted to make the site look as clean and minimal as possible, and to have a medical theme. This was in order to be appropriate to the concept and reassure people, therefore creating trust in 'Sooth' as a brand.
In order to do this I chose a minimal colour scheme made up primarily of green grey and white.
I also played around with creating a logo symbol, however eventually decided to stick to just the name, as a logotype.
Social Ads
The client wanted to promote 'Sooth' online through paid ads and social media, so asked me to create some suitable ads. These are shown left.
UI DEVELOPMENT
Initial planning
I started by mapping the user flow, and functionality that would be needed on the site. I also started sketching out visual ideas, for how each of the screens could look, and the interactions.
Web design developement iterations
On the left are my intial mock-up design developement, for the web site and mobile version of the sooth site.
USER PROFILES
User profiles
User profiles were created to figure out how the site should look and what features would be needed. These were based on hypothetical women that I thought would be potential users.
WIREFRAMES
Wireframes created for the mobile version. Created with the aim to discover how each of the sections could best be connected and the information presented. The site is very text heavy so I decided to create an expandable menu, as it would allow all the information to be available to the user, but in a manageable way.
USER JOURNEY MAP
I also mapped out a typical user's journey of the site, shown below.
MOCK-UPS
GUI Mockups
On the left and below are the finished mockups, for the mobile version of the Sooth site. Displayed here are all the main screens, shown in an approximately chronological order of how they would appear on a typical user journey.
PROTOTYPES
Below is the finished prototype, please click to try it out!