dbydita.com

Design a website and app to expand the service offering for training online and to connect with a new audience, including selling branded sport fashion through e-commerce and accessories to existing clients and beyond. The goal of the website is to grow revenue and lunch a brand identity for an award-winning athlete who is currently a personal trainer.

Brand & Strategy Kickoff

During a 5-hour workshop, we jointly developed brand attributes, target groups and goals. The goal was not to find the best solution but to make quick decisions, to get commitment and to be able to act strategically despite limited budget.

Brand Attributes & Mission Statement

By brainstorming and prioritizing brand attributes in various categories we created the basis to put together a mission statement – this took us just about 30 minutes.

Culture How would we be described by our clients?
‍Target Groups How would we describe our target audience?
Voice How do we want to sound to others?
Feeling How do others feel after being in contact with us?
Impact What tangible impact do we have on others?
X-Factor How are we different from others?

In this case, the main goal was to gather information for creating the future website design and to allow objective discussions about it. Still, this exercise can be used for so much more, for example, to define the “filter” marketing copy has to run through (voice attributes) and what it should be about (x-factor).

“Dita is a gold medal winner in the discipline of aerobics. She is currently a personal trainer for men and women who wish to build an athletic shape or undergo body transformations such as losing weight”

Definition of Target Groups

To empathize with the different types of users, we developed the personas, which are based purely on existing clients and assumptions for new potential users. These served as a starting point to reflect on the needs and challenges of the user and possible solutions to be considered later in building the information architecture.

Setting Goals

By brainstorming and prioritizing ideas in terms of efficiency (“How can we make us in-person experience be easily approachable online so that can drive results?”) and awareness (“What can we do to be seen as a brand?”), we quickly came to a roadmap with the next steps, focusing not just on the website, but also on the organization itself – I believe that a strong organization is more likely to create strong products and services.

____________________

Learning

In retrospect, I think this exercise was not the most successful one, since we relied or research only in Dita’s existing clients and some friends located in Tirana. This was done to save time, but also the budget was tight. This may become an issue in the future mostly because there is a culture differentiation between the capital and the other cities in Albania.

We went ahead with assuming that the main problem to solve for everyone located out of Tirana was “accessible and quality at home training”.

Finding a Visual Style

After the first workshop I took the mission statement and the brand attributes to craft three different design directions aka stylescapes to present to the client right before starting the second workshop.

It was decided to go with the first approach because, duSe to the Dita’s philosophy and “into the woods” training style, green would be more related to nature, where she trains her live clients. The color palett was also part of her personal preference.

Information Architecture

Content Audit

To understand what the content would be, I asked Dita questions about her actual training process and communication with her cilents. I also performed an audit of social discussion, a few similar websites and apps. Based on this, we collectively decided what to include and how content can be integrated into an intuitive information architecture.

Sitemap

Joint development of the sitemap, considering the defined proto-personas and the respective solutions to their problems and motivations as well as the objectives of Dita.

Evaluation via Tree Tests

To ensure an intuitive understanding of the site‘s structure I tested the sitemap on-site with some of Dita’s clients and a few friends who might be potential users through so-called tree-testing by giving them relevant tasks, such as “Where would you click if you wanted to know more about Dita’s training style?” Based on the test results, the sitemap has been adjusted accordingly.

Building the Site Structure

Jointly creating low-fidelity wireframes. The advantage was a direct buy-in of the approximate structure.

Web Design

Everything was finally sewn together!

The website will run on WordPress and is currently under development.

Conclusion

Due to the flawless collaboration, after the workshops hardly any revisions were required, neither in information architecture nor in visual design.

As a learning: If there was more time and budged, I would have interviewed a broader group of people. In addition, instead of two, I would build at least three personas, also test the sitemap and site structure more thoroughly.