Project Stakeholder
TribalScale Website
Designing a website to showcase TribalScale's design services
Project Snapshot
Tribal Scale is a Toronto-based tech innovation firm that builds digital products, trains companies on digital product development and provides venture capital for startups. My role was UX UI designer and I designed a website for them to showcase their design team and the design services they offer.
Problem
Most of the work that Tribal Scale does is code-heavy development and they are not attracting enough design work to the firm. This leaves their highly-skilled and experienced design team under-utilized and closes the door to a potentially large revenue stream. My goal is to figure out a way to bring more design work to the firm so they can utilize their skillsets and increase the firm's design revenue stream.
Solution
I designed a website that showcases Tribal Scale's design services, their team and their previous projects. I started by interviewing users to figure out what information they want to see in a design agencies' website. Then I researched the competition to see what content they were including in their sites. After two rounds of usability testing with wireframes the Tribal Design website was born!
My Role
UX design
UI design
Client Communications
Timeline
Overall: 2 weeks
Discovery & Research: 1 week
Design & testing: 1 week
Stakeholder Discovery Call & Interview
During a discovery call with the associate director of design at Tribal Scale, it was clear that the agency wanted a new website that they could use to attract more design-focused work to their firm.
I prepared an interview questionnaire to dig up a little more information and found out that Tribal Scale:
Would like a competitor analysis to determine what design services they should promote.
Is unsure what content to display on a new design website.
Wants to turn their design department into a revenue generating group.
User Interviews
I recruited and interviewed 8 users for this project. They were between the ages of 30 and 45 years old. 50% of them were entrepreneurs that had already had a website or mobile app designed by an agency, and the other 50% were people interested in finding an agency/designer to design a website/app for them. The fact that these users have either gone through the process of picking an agency or are prospects, makes their knowledge and insight more valuable for this project. Learning what content these users expected to see in a design agency website was the key finding. Below is a list of the content they are expecting to see when they open a design agencies' website.
A portfolio page showcasing their previous works.
A Team page with information about the design team's members.
A list of design services offered.
A list of clients the agency has worked with in the past.
User Persona
In order to empathize more with my users and put any bias aside, I created a user persona that contains the collective characteristics and goals of my user base. I created the persona from the interview responses I received earlier in the process. I referred to this persona throughout the design process to help maintain a user-centered approach to my design.
Competitive Research
I conducted competitive research to find out what type of content other design agencies were including in their websites. Tribal Scale gave me a list of 10 competing design agencies whose websites they really like. Not all of them were digital design agencies, so I chose 5 digital agencies to analyze in depth. I searched their websites and made a list of the content that each website has. Additionally, I also made a list of the design services that these websites offer. The charts below show what content and services each competing design agency has.
Making these charts helped me figure out what content I will need to include in my website design so that Tribal Scale can outshine the competition.
From this comparison, I found that design agency websites all have the same basic content; home page, services page, portfolio page, about page, a blog and a contact form. Some of the content that not all websites have includes testimonials, industries served, process, careers and awards. These are opportunity areas where if I include this content in my website, it might help to stand out above the rest.
Tribal Design Website Site Map
Site Map
From the research performed, I have found out what content the users would like to see on the website, and I also found out what content the competing design agencies are showcasing. Using this information I created a simple site map that shows the main pages the website will include along with the type of content one can expect to find in each. The intent here is to keep the site map at only two levels so that navigating the site is simple and efficient without having to go into more than 2 levels of information.
Lo-Fi Wireframes & Testing
Knowing what content I had to include in the website, I moved forward with Low fidelity wireframes. I spent some time looking at how the competing design agencies were structuring their websites to get some ideas. I grabbed what worked and discarded what did'nt and put together some hand sketches.
I tested these wireframes with 5 users. The testing plan included 7 tasks associated with navigating the site and finding information from each of the 6 screens that I had created.
Testing with these tasks I hoped to learn about usability issues within different flows of the website. From the testing I learned that users were confused with the names of two pages, the "Work" page and the "Blog" page. So I changed their names accordingly in my Mid-Fi wireframes.
Click image to zoom in.
Mid-Fi Wireframes & Testing
After incorporating the feedback I got from my Lo-Fi wireframes, I created mid-fi wireframes and prototyped them so that I could test them with users again. Similarly as before, for the test, I asked users to navigate the entire site and advise of any issues they encountered with navigation or information finding.
The biggest changes that resulted from the feedback were:
Add a Welcome Banner to Home screen to differentiate from "Services" page.
Remove filter icons on "Our Work" and "Media" page.
Change layout of "Project" Tiles in the "Our Work" page.
Change the layout of the "Media" page to only include either Articles or Podcasts, not both.
Reduce the amount of information in the Team Member Tiles in the "Our Team" page.
Hover over mockup screen and Scroll!
UI Design
For the Hi-Fi wireframes, I kept the same color palette that Tribal Scale already used in the existing firms' website. This would maintain uniformity and consistency with their existing clients and would deliver a corporate and clean look for new potential clients. The top navigation bar and the layout of the sections within the pages were optimized based on user feedback.
With a 2-level site map, the final website provides a easy to navigate site in which one can learn about Tribal Scale's design offerings in a quick and efficient manner. Micro-interactions and animations were also added to the elements across the entire page to make the experience more engaging for future clients. Check out the Prototype below!
Next steps & Learnings
To continue working on this project I would test the Hi-Fi prototype with more users to get their feedback on the final design. I would incorporate that feedback and iterate on the design and then submit the design to Tribal Scale for their feedback and final decision on a path forward.
Working on this website design sprint of 2 weeks made me realize the importance of two things. The first being how important it is to research the competition when trying to come up with a website design. One can gain much insight from looking at what others in the same field are doing. The second thing is how important it is to give the users the chance to test your product prior to developing it. The feedback that I got from users resulted in significant changes that improved their overall experience using the site.