Client and sector
Arda Build is trainer Arda Baloğlu's personalised remote fitness coaching brand. Members buy a package. They follow their training and nutrition programmes online. They ask the trainer questions through the panel.
The brief
The project had two sides. Visitors needed a promotional website showing the packages and members' transformations. Members, in turn, needed a panel that brought their programme, nutrition and messages with the trainer together in one place.
My role and scope
I designed the interface of the website and the member panel. I prepared the screens in Figma and delivered them via Zeplin. The portfolio contains 10 screens. Six belong to the promotional website and four to the member panel.
Process and design decisions
I built the visual language on top of gym photography. The background is dark anthracite. The primary accent is orange, the secondary accent blue. Headings are bold, italic and in capitals. The logo is a monogram made from the letters AB.
Below the first screen of the home page, I placed an orange band with a slanted cut. The band holds the "Peki sistem nasıl çalışıyor?" (So how does the system work?) video and two figures. In the programmes section, I used two large cards for Women and Men. On the packages page, I made the same split with tabs.
The four package cards show the duration in weeks and months. The old price is struck through, and the new price is written large. A campaign code and a "Paket satın al" (Buy a package) link stay fixed in the top bar. I described the package features with six cards: training, nutrition, supplements, cardio, Q&A and video.
In the success stories, each card shows a before-and-after photo and the package the member bought. At the bottom of the page there is a mobile app download area and social media account cards.
In the panel, I placed a fixed menu on the left. The menu has nine items. The selection includes screens for four of them:
- The training programme is split into day-by-day cards. Each exercise card shows set and rep information along with a video icon.
- The nutrition programme is made up of meal cards. Daily calorie and macro totals appear at the bottom.
- The Question Centre is a messaging screen. Members can send photos and voice messages. Shared media and links are listed in the right column.
- On the My Details screen, the time remaining on the active programme and the programme allowance are each shown with a bar.
Deliverables
- Home page
- Packages page
- Arda Baloğlu (about) page
- User reviews page
- Frequently asked questions (FAQ) page
- Contact page
- Panel: training programme, nutrition programme, question centre, my details
Outcome
The ardabuild.com home page is live with the structure of this design. The top menu, the orange band, the Women and Men cards, the four package cards and the success stories sit in the same layout. The site menu also lists the panel sections under the same names.
This project is an example of my website design service.
