Epilase needed a new, modern web presence to help them stand out from a crowded market and improve their conversion rates.
UI/UX Designer & Developer
- User Research & Testing
- Information Architecture
- Wireframes & Prototyping
- UI/UX Design
Epilase's previous website didn't portray the high end service they provided to their clients, making them look less appealing compared to their competitors. They had also recently refreshed their brand, so the website needed to align with existing collateral that was already in use.
On top of that, the existing website wasn't responsive, which made navigating their site problematic for mobile users, of which accounted for 41% of their total traffic at the time of the beginning of this project.
Through speaking with the directors during the kickoff meeting, Epilase main target audience were women of middle to upper socioeconomic status who seek expert beauty advice with customised treatments designed specifically for their needs.
The demographics of the target audience were confirmed when reviewing Google Analytics during the discovery phase of the project.
Based on this information and notes from the client brief, I created a user persona to get a better picture of who would I would be designing the site for and to provide a direction and basis for all design decisions moving forward.
The site needed a reorganisation of the page hierarchy and a revised content strategy to ensure users could quickly understand what services were offered and an easy way to learn more about them.
After revising their entire sitemap, renaming pages for user-friendliness and revising content, a simpler structure and user flow was created. In addition to a sub menu for the main Services tab, we implemented a simple sidebar menu on page to provide the user with a way to quickly navigate between Service and Product pages.
With the site structure in place, I began sketching a variety of page concepts on grid paper, which allowed me to quickly iterate and evaluate different layouts before settling on a solid page structure.
Based on those sketches, I produced medium fidelity mockups in Sketch to help the client to focus on the layout, rather than get hung up on details like colour and imagery during the feedback process.
Protoyping & User Testing
Rather than producing static images for signoff, I used Invision to produce interactive prototypes so that the client had better context for the designs they were reviewing. Invision allows users to view designs in browsers, providing an accurate representation of how the website will display in the browser.
Using Invision's prototyping tool allowed me to test the wireframes before building out the design, which gave me the ability to gather quick and precise user feedback via the comment feature provided in the Invision app. This assisted me in speeding up the feedback loop of the design stage before putting on the finishing touches and commencing the build.
Example of user tasks & follow up questions:
- Locate a promotion banner and enquire via the contact form.
- Find pricing for the Laser Hair Removal service.
- Did you find the site easy to navigate?
- What are your overall impressions of the site?
- Was the content informative?
*User testing was done using female employees of Epilase, as project budget didn’t allow for testing with real end users.
With the prototype tested and signed off, a style tile was produced to determine the general tone and creative direction of the site, starting with the brands colours and typeface.
Once the style tile was approved by the client, a UI style guide was rolled out showcasing the various styles and UI elements across desktop, tablet and mobile devices. In addition to speeding up design, it also helps the development process by acting as a key reference point for all elements of the design. I then uploaded the designs to Zeplin to help simplify the design to development handover process.
I developed the site in a way that allowed for components to be reused, but was also easy to customize depending on the requirements of the page. This created a front-end system that was simple to build on, enabling the client to quickly add new pages and additional content in the future. I also optimized for responsiveness across various devices so content could be easily consumed on virtually any screen size or resolution.
The back-end of the site is built on Wordpress as requested by the client, as this is what their previous site was built on and they didn’t want to have to learn a new CMS.
As with most redesigns, I also reviewed and moved over legacy content into the new content management system. It was important not to affect the existing SEO work that was being done on the website during the re-design, so 301 redirects were used to ensure previous URLs matched up with new pages.
A couple of months after the new website went live, the client saw a 21% decrease in the bounce rate on the home page, which lead to more user engagement site-wide. Users were spending more time on the site (19% increase) and exploring more pages (average was 1.9 pages per session, it’s now sitting at 3.2). With the increase of user engagement, Epilase saw the average online enquiries increase from 3 per month to 11.
A key goal of this project was to improve navigation and accessibility on handheld devices. By implementing a responsive design, we drastically reduced the bounce rate on mobiles which accounted for 41% of traffic at the time and increased the average pages per session visited by users.
decrease in bounce rate on home page
increase in average enquiries per month
increase in time spent on site
Facilitating a quick and easy way to gather client feedback is crucial to a successful project outcome. Constant communication with a client at every project stage helps to build trust and quickly get past any roadblocks in the project.
Personas are worth spending the time on at the beginning of a project, even if it's just one for a smaller project. They become a point of reference and someone to keep in mind when every design decision is being made.
Sketching helps to get a number of ideas out quickly and allows you to rapidly iterate and discover the best way forward.
What they said...
"I had been searching for a web designer/developer for a long time and every time I’ve been disappointed. As a small business owner time is crucial for me, therefore I wanted someone who was reliable, efficient and knew exactly what I wanted with a reasonable price. I was lucky to come across Dylan as he is all the above. I have been very happy with his services and would definitely continue to have Dylan work on my website in the future. Highly recommend him."