Skip to content

Website Example: Fitness Application

Overview of a web design project

Category

Website & Mobile Application

Fitness app web design main portfolio
Client

Fitwins App

fitwins.com
“We used Edge to create our new website to promote our new fitness app, Fitwins. The creativity and attention to detail resulted in a stunning website that perfectly captures our brand. They were professional, responsive, and delivered exceptional technical expertise. I highly recommend Edge for anyone in needs website design.”
Carl R. Client since 2022

Brief

Fitwins originally contacted us to redesign the existing website to improve the conversions rate (the amount of people downloading the app). We were able to offer our full service to improve branding as well as search engine visibility, writing targeted content to reach a wider demographic. This then lead on to app design and development and integrating the website and account systems.

Background

Fitwins is a Sheffield based company creating virtual running and cycling challenges from a mobile app. The business was founded by Carl who sourced investment to improve the online presences of the business.
Fitwins web app design and development project

Research

Analysis of Existing Website

The existing website brought in a steady stream of traffic through search engines but the app download rate was poor. We were able to identify key factors that were impacting this; branding, a lack of content and a website with a dated look. One of our tasks was transforming the visual identity of the company, making them look more credible and professional. During the research phase we looked at several other similar businesses and identified their strengths and weaknesses. We were able to use software and tools to see the following:

  • How many visitors do they get
  • Which keywords do they target in organic search
  • What landing pages they use to attract users
  • What keywords do they use in paid advertising (indicates good conversion rates)
  • What are their popular pages
  • How many back-links do they have
  • Are there any critical back-links that help their SEO

Identifying Problems

Identifying problems related to SEO and search access

Competition Comparison

Comparing the clients website to the competition

Identifying Focus Keywords

Presenting lucrative keywords for the website

Comparing Against the Competition

Presenting lucrative keywords for the website

Data Used for Designs

Research used to guide the website design and content strategy

Design Phase 1

Initial Concepts

Some projects can take a while to formalise a design direction, this project was relatively quick. This was mainly due to spending time early on with the client creating a mood board and having a well written brief.The client requested to explore both light and dark options.

We use online software called Figma to create and share concepts. This enables us to quick get feedback and share ideas with you without wasting time where it’s not needed.

Initial Design Concept One

Web design concept one

Design Two

Web design concept two
Design Three
Web design concept three

Design Four

Web design concept four

Full Page Design One

Homepage design concept one

Design Two

Homepage design concept one

Design Phase 2

Design Heading

The homepage is a good starting point for all website design. Once a direction for this has been established it just a case of implementing the same look and feel across the internal pages. In addition to the homepage we will also design a set of components that can be used across the site, for example, header, footer, form fields, buttons, call-to-actions etc. All internal pages are built from these components but can be adapted for all other pages.

Homepage

Homepage web design concept
Challenge Page
Challenge page design

About Page

About us page design

Blog Page

Blog post page design

Contact Page

Contact us page design

App Design

Mobile Application Design

Once the website was finalised we moved onto designing the app. The same look and feel was to be carried across in all the design work. We created visual for all key pages using a components library to maintain consistency.

Colour Matching

Colour matching process for app design

App Design Concepts

App design layouts

UI Components

UI components for app design

App Page Design

App designs

Marketing

Digital Marketing Design

Although our design specialism is in website deign we take on digital advertising as well. In the examples below created some marketing products that were tied into the new website image.

Advertising Design One

Marketing design of PPC campaign

Advertising Design Two

Digital marketing design for app

SEO

SEO Maintenance

If a website is redesign it’s important to submit the new sitemap to search engines. Any pages that have changed names/URLs must be carefully redirected. New pages must be created to compliment the change. This will ensure any SEO credit that has built up will be retained. Once a site has been switched it’s important to monitor and track the results. This will help you to see what is working and what needs adjusting. We will setup tools like Google Analytics to track your website’s traffic and see how it is ranking for your target keywords.

Submitting Pages

Setting up redirects and submitting pages to Google

Monitoring

Using PPC info to identify keywords

Performance

Loading Speed

Page speed is important for user experience because it affects the overall impact of our website. A slow-loading website can lead to a number of negative experiences for users, including increasing bounce rate (how quickly a user click off a site) – an ranking performance measurement, frustration, and annoying users. These are all negative factors when setting up an online business.

Google Page Insight

94/100

GT Metrix

97/100

Make An Enquiry

Get in Touch

Want to discuss your next project? Get in contact to arrange a call or meeting.

All Enquiries

View More Projects

All Projects

Want to find out more about our processes and the way we work? View more project case studies.

Design Projects