UX/UI + Web + Brand
Fitness, Education, Sport apparel and accessories
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.
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.
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.
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.
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.
Everything was finally sewn together!
The website will run on WordPress and is currently under development.
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.