Designing Type Studio website
Type: Personal project.
Role: UX- UI.
Tasks: Research, Persons, Information Architecture, visual design.
Timeline: July- Aug 2020
What’s the Type Studio?
Type Studio is a website for helping designers, especially young guns to choose the best_ fit typeface through providing a personalized experience, questionnaire.
List of Activities
✅ Define Project brief.
✅ Validate Ideas through research.
✅ Conducting user interviews.
✅ Design UX pillars “ Personas, IA, User flows”.
✅ Ideate & Sketch.
✅ Wireframe & polish design.
Project Brief
Why?
Young gun designers struggle in choosing the best typeface for each project.
Each Project, brand, or website has a special tone of voice, personality.
So young guns can mistake choosing the typeface of a brand or take a while, be confused amongst thousands of fonts/typefaces.
It may take time to master typography, practice it well.
How?
Through the Assistive tool, have a bunch amount of info in order to make as possible as accurate results appear to designers.
All these were assumptions that to be validating … with a further need for understanding people and the problem.
Understanding people/problem
Through identify:
✅ What designers challenges are.
✅ How they choose the typeface.
✅ What tools they use to help them
Research
After preparing my list of questions, I contacted 2 designers of my friends, in order to understand, but the puzzle pieces together. I knew 2 are not enough but I had thought that the data I gathered was enough. So I thought it doesn’t matter how many I interviewed. data matters the most.
Some of the questions asked:
✅ What’s the biggest challenge as a designer in your work?
✅ How did you choose the typeface for your project? How you could determine the right one?
✅ Do you have any kind of steps or process you are following in choosing typefaces? Can you share your process?
✅ What tools, or websites you are using to use them in order to help you choose the right typeface?
Therefore I got started to do some further to
learn more about typography and typefaces
I found some learnings of attributes to choose the best typeface.
✅ Readability.
✅ Kerning.
✅ Contrast.
✅ The tone of the Message.
✅ Best Medium.
✅ Font weight.
✅ X-hight.
✅ Font width ( Narrow, Wide).
Also, learnings about font families
1- Serif: Serious mood.
2- San Serif: modern and streamlined.
3- Script: fun, casual, hand_drawn.
4- Decorative: Not preferred to use, used in special cases.
In addition, the most used and downloading fonts on Google Fonts
1- Roboto (12 weights).
2- Open Sans (10 weights).
3- Lato (10 weights).
4- Oswald (6 weights).
5- Montserrat (18 weights).
6- Source sans pro ( 12 weights)
7- Railways (18 weights).
8- Slabo (2 weights)
9- Merriweather (8 weights).
10- Lora (6 weights).
11- Playfair Display (6 weights).
12- Ubuntu (8 weight).
13- Poppins (18 weights).
14- Noto Sans (6 weights)
15- Poppins (4weights)
“The good thing is most of them are sans- serif, have several weights”
Competitive Research
This step helped a lot to understand what competitors do and what is the gap might need to fill.
The Solid Idea
Well, the website provides 3 paths for users
✅ Have a personalized path users gonna through it to have recommended results with relevant examples to their projects.
✅ Discover typefaces on his own.
✅ Download pro back.
BUT. At the first, I thought that the personalized questionnaire would be the only one direction for designers on the website. I got known that most designers have their own pro back to use during their projects.
That being said… that resulted in having an inclusive platform. It doesn’t matter what experience do you have.
Other UX Activities
Personas
After gathering all data, analyzing it. I Summarized all these into personas
Information Architecture
At first, IA was different, did include only popular typefaces. After thinking over again. Different types of families had been included, adding flexibility to users to pick what they want.
Features List
Keeping in mind designers’ behavior. Most designers tend to use a list of typefaces they love in their projects. Therefore, I added a “download pro pack feature”.
Sketches
Starting to sketch out the landing page with different stories.
Wireframes
Doing wireframes and playing with the layout to get closed to the best.
Roadblock
After landing with the concept “ landing page”. I start to think over how the journey could be convenient, short, direct- oriented to get users to the recommended typefaces.
Some of the questions came into my head
✅ What users would be asked for?
✅ How many steps are they gonna through?
✅ What types of projects, designers usually work on?
✅ What are the different tones of typefaces?
SO, start again to make research. I reached out that
There are different kinds of brands “ Classic, Luxurious, Feminine, Masculine, Modern….”.
Designers work on 4 main categories of projects “ Web/ Mobile, Brand, Social media, Artwork”.
The questionnaire might be good if it would be short. So, it was only 4 steps.
Then, I worked on the user flow & how the rest of the experience would be
Visual design
My imagination about design principles was sticking around freshness and youthfulness, in order to select color could work with.
Working with components
I continued working on the design with visual components while I was designing the questionnaire flow for recommending with typefaces.
Design the interactions…
I picked typing interaction. What I imagined that it would help to convey different tones of typefaces backed it up with visuals on the right side.
Final Experience
https://xd.adobe.com/view/9dcb628b-e155-486b-ac90-d14006825af3-c898/
Style Guidelines
Grid System
Key Learnings
Keeping in mind all personas
If you have a privilege to involve different kinds of people to use the product. Do it.
AI experience is challenging & always being iterative
Trustworthy and accuracy are the key to have the real- fitting experience, the users will love. The more dataset machine gets, the more accurate results will come out according to users' needs and their desires.
Have a lovely day :)