My latest projects:
Behind the case
Product showcase
Introduction & Overview
Research
Brand identity & Customer profile
Strategy
Naming
Stylescapes & Graphic language
Product design
Behind the Case
Computers are not that complicated, trust us!
Thats the power of benchmarks!
Do you want to know what is the protocol of the CMOS or do you just want to know if thats the better processor for your computer? well, here you will get both.
And the power of information
The most important imformation to solve your questions, simple and well explained.
Don’t get fooled!
Yeah, you will get everything
A place to avoid being fooled while buying electronics
Behind the case is your mate, mate
It is just a simple site where people learn about computing wihtout being judged and with excitment.
All the important information is shown to make everything easier and smoother.
Introduction & Overview
Here are the most important things to understand the project and a basic overview on hoy I work and how this project has developed
Briefing
This project consists on creating an app that helps the inexperienced user to compare hardware products and systems (from CPU to phones) to make their purchase desition. It is based in benchmarks and test information.
The goal is to make this information accesible to the non expert user.
Goal
• Help the non-expert user to make their purchase desition of hardware and electronics
with confidence.
• Create the “researching before buying” habit in the society.
• Design a brand that makes easy and non-threatening learning about electronics.
• Grow a community around the brand and it’s philosophy.
The goal is to help the non-expert user to make their purchase desition with confidence
The tone and voice has to be friendly to avoid he tedious feeling of a class
Challenges
Simplify the huge amount of information out there when in comes to devices and electronics and make as easy and less scary as possible to the user the consumption of that information.
Solutions
The solution to this problem comes from understanding the user and educating him in the most mild way possible so he feels confident enough to tackle the task ahead and have enough tools at reach to make a good desition. This is supported by the design
and user experience.
So the product has to be easy to use, and communicate cleanly the information that the user needs. The tone and voice has to be friendly to avoid he tedious feeling of a class.
Process & Product
For me it is very important to follow a well thought process in order to avoid missing critical steps and develop a product with consistency
01
Research
Research of the audience, competition and stakeholders. I need to know if these things exist, how they are, what their culture is and so on.
02
Brand identity
Building up the Brand and the different customer profiles this product will target in order to have a specific and defined communication for them.
03
Strategy
Developing a strategy with its short, medium and long term goals and how the brand is going to be economically sustainable.
04
Naming
Creating the name, once the work has been clarified we can start building something physical, the naming process is a delicate step with clients that I like to tackle methodically.
05
Graphic language
Creating stylescapes: after naming I use one of the most important tools to work with the client that avoids a lot of hassle: stylescapes, then, graphic language (logotypes, color pallets and typeface) is a straightfoward process.
06
Design & testing
Product design and prototyping; Once I have the instruction manual and the puzzle pieces, its just building up everything from that point until the product is finished. And test out any kind of problems and iterate.
07
Product showcase
I build animations, mockups and resources to exhibit the product to the client and/or help in the selling process
Research
Questions and information I gather always to understand the project, client, customers and field were working on.
Is there an audience?
Yes, acording to google search the most common questions done when a new device is launched are about their quality, their price and comparison with other similar devices.
Almost every tech forum has at least one section of comparison and benchmarking discussion.
The most common path before buying a new device or component is to watch/read reviews and tests, that is the reason why review channels like Linus Tech Tips or Dave2D are so popular.
There are many benchmark softwares out there that make a living, like CPU Benchmark, Cinebench or Passmark.
How is that audience?
(needs, demographics, income)
There is a very wide audience, usually youngh, mid age with at least a side job. The rate drops around 50 years old and/or a high salary position. There’s a a slightly superior percentage of male audience but over the years this percentaje has been droping steadly so it’s predictable to reach equilibirum in less than 10 years.
The interests of the audience are very different but mainly focused on modern trends, games and, social media.
Is there competition?
The market is flooded with benchmark tools and web apps that try to uniphy that information, however there isn’t almost any site with a non-experience user focus. That last part finds an easy venue in a highly competitive market.
"...there's not sites with a non-experience user focus. That finds an easy venue in a highly competitive market."
"Almost every single hardware and phone company is in the game and they have to be adressed."
How is the competition?
The competitition is expert-focused and those applications and sites let the user get it’s conclutions from the information they provide, we make this step for the user.
How about Stakeholders?
Almost every single hardware and phone company is in the game and they have to be adressed. Specific attention to Apple which is a company that tries to bypass the comparison industry using specific hardware that they only own and not provinding easily information about itself, but also a Tech giant that can affect the market more tan others.
SWOT
Analysis of the strengths, weaknesses, oportunities and threats to see how the market will be and to be able to make the best strategy possible.
Strengths
• We have a great understanding of hardware and benchmarking • We have experience testing and comparing hardware • Lot of experience teaching tech to begginers
Weaknesses
• People have no awareness of us • We have no conections with benchmark companies, this will slow down our work
Oportunities
• There’s no competition specific for our product.
• There’s a huge need for comparising hardware and devices products in the market
• The hardware market has always has a trend to grow
Threats
• There are other companies that can feel theatened by this product • Since it’s a product for non-expert users, experts can feel this is not a good product since it won’t reach their standards • There’s fear in the non expert user to face information they don’t know
Brand identity
There’s some exercises I do with the client in order to understand and clarify how the brand is, how it wants to be, how the customers should be, what’s the brands value and so on. The exercise is made filling with words the question and then narrowing the results to 3 words maximun.
Customers
How would you describe your customers?
Humble Curious Careful Saver Sceptic Empiric Learner Smart Unexperienced Selfaware
Culture
How would your community describe you?
Friendly Handy Usefull Educative Accesible Enjoyable Educational Lifechanging Engaging
Voice
How do you sound to others?
Caring Humble Educational Engaging Neutral Helping Experienced
Benefit
How do others feel after interacting with you?
Confident Educated Intrigued Curious Inspired Excited
Value
What tangible impact do you have on others?
Ease their search struggle Informe them about their upcoming purchase Learn about hardware and computing Feel confident about tech Learn about the industry Develop critical thinking
X-Factor
What makes you radically different?
What makes us different is our users, and the aproach be take with them; simplify information to help unexperienced people navigate the complexity of buying tech in this century. • Complexity to simplicity • User focused and tested • Relaxing experience • Very steady learning curve • The friendly voice that we use, we are the friend they would as.
Customer profiles
The next exercise I do with the client is to clarify the customers through customer profiles; they are made up profiles that describe the ideal customer, how are they, what are their needs and so on. This creative exercise helps shaping the communication, the product and the brand identity
Frank
France - 18 years old Student - Low income, savings mostly
Story
College student facing to build their first computer from scratch while starting college. He doesn’t have much money and never has studied computing in dept. The urge to build their computer from scratch is becauase he’s caring about his money and he is informed that this way he could get a better machine for the price.
Need
Needs information about low – mid range hardware, what hardware he needs and what’s the best hardware for the price and for his purpouse. Where to buy it would be helpfull aswell.
Solutions
We can meet those expectations giving him the information he needs as easy as possible as a checklist of those parts he needs to assure him that he’s not forgetting anything. Affiliate links can help him to aliviate the search and make him confident that he’s buying the best options available.
Pete
Germany - 42 years old Cooker - Mid - high income.
Story
Pete’s iphone recently broke and he needs fast another phone. This time he doesn’t want to spend as much money as he did but since he always has used iphones he doens’t know where to start.
Need
He needs a overview about the phone industry right know, best devices for the price and a way to compare them to his old phone to know that he’s not getting anything worse.
Solutions
We can provide him a easy way to overview the state of the industry aswell as tools to compare them with his old phone.
We will guide him through every step that he needs to have his device in his hands and feel confident during the process.
Emma
USA - 26 years old Streamer - Mid income
Story
Emma has been working as streamer with a side job for the last 12 months, she has grown a little community that helps her a little bit with the income and has savings, this is the perfect situation for her to take the next step and quit the side job to go full time streamer. The problem is the computer she built years ago; it’s not enough, crashes constantly and she is delivering poor image quality.
Need
With his savings she’s gonnna build a computer, she knows how to build one but needs to know what’s the best right know and needs to know that she’s making the right choice for the kind of project she wants.
Solutions
We will have enough information and comparison to make her comfortable making that desition and provide her with the checklist necesary to know that she’s buying everything she needs.
Claudia
UK - 32 Years old Electronic salesman - Mid - high income.
Story
Claudia Works in an electronic store, so she has to deal with a huge amount of clients every single day asking for many different things, from phones to computers. While she likes what she does, shes hardly able to keep up to date in all the topics and doesn’t want to make a bad recommendation.
Need
She needs information fast, reliable and easy to find so she can make better recomendations and alíviate the pressure of handling a hige amount of customers every day.
Solutions
Using the benchmarks that we provide in an instant, from a computer, Tablet or a phone she will be able to fill the information gaps that she may have.
Strategy
Strategy for me has to define a path to follow, what are the most important things to do to survive in the market and reach our goals
When it comes to strategy I take a look at the road ahead and what are the best options to proceed, step by step. This is done trough a 3 point process:
Revenue: Where will the money come from to make this a succesfull and economically sustaniable project
Awareness: How people will know about the project, how are we going to reach out to our selected target.
Efficiency: How can we improve our workflow, where are our pain points and what can we do to spend less money, be faster, be smarter or anticipate posible mistakes.
The exercise I make is filling a sheet where every item will be valued by its importance and accesibility, wether it’s easy or hard to implement, and the time it needs to be fullfilled. After that we’ll end up with the steps ahead organized and ready to take them.
The exercise I make is filling a sheet where every item will be valued by its importance and accesibilithy
Revenue
Where will the money come from?
Revenue exercise done to build the strategy of the brand CLICK TO ENLARGE
Awareness
How are we going to reach out to our target audience?
Awareness exercise done to build the strategy of the brand CLICK TO ENLARGE
EFFICIENCY
How can we do what we are doing better?
Efficiency exercise done to build the strategy of the brand CLICK TO ENLARGE
CONCLUTION
Conclusion
As determined in the previous charts, the strategy in short term is going to be focused on afiliate links and develop enough user base to start a pro-membership. Medium term will be to enhance the content with parteners and collaborations. As it grows merchandising will be something considered.
In the long term being able to sell hardware through our store will be the next huge step in the business.
"short term is going to be develop enough user base to start a pro-membership"
Naming
Naming is a very interesting aspect I like to work on. My process here is going through different exercices, most of them come from the book “Don`t call it that” which talks specifically about this topic.
Idea
Write down in a sentence the idea
of the brand
The brand evolves around his product; a site of tech comparison that can tell you without being expert how good or bad are pc/phone hardware.
"Naming is a very interesting aspect I like to work on"
"Most of the exercises come from the book "don't call it that"
Feelings
Write down feelings you want to comunícate and/or most important things from the brand discovery phase.
• Friendly
• Easy
• Educative
1# Questions
This exercise will add a little fantasy and loose the brain so we can be more creative for the next exercises.
01
What are the main actions you are trying to get people to do?
Look for their hardware and compare it to others and industry standard.
02
What analogies can you come up with for how your business operates?
Our users are children and this is science class, brands are like our athletes, we don’t care about the name but the score, the market is a maze, we are the compass.
03
how would you explain your project to a five year old in order to keep him interested?
Phones and computers are very complicated! circuits, proccessors, memory, speed, to many things! you tell us what do u want it for and we tell you what you need.
04
If your company were a plant or animal which would it be?
It would be an old and wise tree like an oak.
2# LIST CAROUSEL
A few different exercises based on making lists that help to generate a lot of different options or avenues to explore
Competitors names
List of the names of the most relevant competitors
Cinebench
Passmark
CPU benchmark
Userbenchmark
Cpu monkey
tomshardware
Notebookcheck
Geekbench
Anandtech
CPU world
Comparitech
Related words
Look for related words to the project
Benchmark
Hertzs
Core
threads
Gigabyte
Temperature
Mark
Rank
System
Overclock
Platform
Test
Cinebench
Computer
motherboard
Bottleneck
troubleshooting
Mentor
tutor
trainer
explore
Class
Bad Names
Write 15 bad names (descriptive, encompassing everyting, doesn't mean anything, boring, on trend)
Is good your new phone?
Mark your bench
Hardware benchmarking
Benchmarking easy
Benchmarking for dummies
Your hardware tested for non-experts
Measure it
How good is it
Measure CPU
Hot CPU
Test it!
Tested!
Qualimeter
3# Try names that evoke...
We try then names that evoke narrative genders like Mystery, romance or comedy, then we narrow down the options
Mystery
Is it bad? System homicide The secret computer Behind the case
Romance
Hardware’s belly Dreaming circuits Circuits belly
Obscurity
Fake tech Bad seller Your computer is dead Killer Tech PC skull
Confidence
Tech arena Electronic wrestling Computer’s secret Computer battle The racing circuit
Subtlety
PC guts The electric sheep
Comedy
Is it actually good? Happy hertz More cores than you Electronic guts Robo-guts
Conclusion
Through all this process we should know what do we want and what we don’t want. Also in the last exercise there are many options we can wo with, discard a or improve.
in this situation Behind The Case is the chosen name for the brand since it is tech related, suggest mystery, stimulates curiosity (which is key) and is not boring
Stylescapes & graphic language
Stylescapes are a low commitment – hight fidelity way to show the client how is the path were going to take.
Y learned this process with The Futur, an online educational brand focused on design & strategy
Once I started doing stylescapes I couldn’t work without them anymore. They are like moodboards, but way more usefull, with purpouse and one of the best ways to communicate with the client to work faster, safer and keeping the client happier. I have to give credit to The Futur, whom I learned from this concept.
Stylescapes are a low commitment – hight fidelity way to show the client how is the path were going to take. A selection of moodboards that tackle every aspect the Brand needs (typeface, colours, materials, personalities, mood, composition and so on. The client is presented with 3 or 4 very different stylescapes so he can point and choose what things are ringing for him and what are not. It is a way to guide how the work is going to be without commiting time and effort. This is done after all the branding and strategy done before.
Stylescapes are a low commitment - hight fidelity way to show the client how is the path were going to take.
"in this case I choose the mild, medium and spicy formula"
Stylescaspes can have very different aproaches, in this case I choose the mild, medium and spicy formula, where the first stylescape will be representing in a straightforward manner the concepts listed before, the last one will be a unnusual and extravagant way to represent those same concepts and the second one will be somewhat between the middle.
In this case the concepts that I have isolated to make this processs easier are the following:
- Calm
- Young
- Educative
- Dinamic
- Friendly
- School-like
"Mild" Stylescape
This stylescape represen what the client should expect, this is the obvious and straightforward moodboard. This is calm, playfull, youthfull, looks aproachable and treats learning as a game
"Mild" Stylescape that represents what the client should expect CLICK TO ENLARGE
"Medium" Stylescape
This Stylescapes lives in between the mild one and the spicy one, another perspective close to what is expected but with a twist.
In this case the twist comes from adult and serious stylescape, it’s still calm and reminds of an experienced teacher but not so aproachable as the first one.
"Medium" Stylescape that represents that sits between the mild and the spicy one CLICK TO ENLARGE
"Spicy" Stylescape
This is the wild, the thing that is not expected but does still fit in the Brand. Back to youth, but this time is not as Friendly. This is dynamic, straightforward, with contrast and gives a rebel vibe, there’s eager to learn.
"Spicy" Stylescape. This is the wild one , the thing that is not expected but does still fit in the Brand. CLICK TO ENLARGE
Meeting with the client and conclusion
After showing the client the stylescapes to see which direction was the right one, the conclution was to keep the mood of the mild one. While the other ones were not bad at all the first one is the most applealing to the calm and non threatening feel that they want to make sure the users are experiencing. However the spicy one got some interesting things aswell, the typeface looks way more moden and dynamic than the others so this would be better for crafting the logo. Also in this last stylescape the modern look was actually very close to what they wanted to communicate.
After the Stylescapes are done and approved the rest is pretty straightforward.
Logotype
This was a case where the logotype didn’t need to draw much attention. Taking the typeface chosen by the client and adjusting it to make the logotype was enough to have a clear logotype that works.
Typeface
The typeface had the same process of the logotype, there are other elements of the brand like the illustrations and color that will take a lot of visual space so there is no need to use many different kinds of typefaces or flashy compositions.
It needs to work, to be clear and to give space to the rest of the elements.
The family selected is Ubuntu, using italic for titles.
Illustration
The first star of the show. The colours chosen have the goal to make it look as enjoyable and funny as posible while calming (usually many colours together can make people very nervous).
So very washed tones of red, blue and yellow where needed to fill the gap. I use the 60-30-10 rule, which means that there’s a main color that takes 60% of the space, secondary color to point out important information that takes 30% of the space and the accent color that gives depth and flexibility to really make things stand out when needed taking the reminding 10%.
Iconography
Made as simple as posible and as iconic as posible, all the symbols and icons were designed with the same principles to uniphy them and work at different scales flawlessly.
Illustration
The approach of illustration is to combine every aspect of the brand trated before:
• Typeface of the Brand
• Colours of the Brand in the selected proportions
• Geometric and straightforward design of the iconography
• with a little fantasy and imagination to make things playfull, they illustrate the site.
Illustrations made to support the brand "Behind The Case". CLICK TO ENLARGE
Motion
The motion design follows the principles dictated by the staylescapes.
Playfull, dinamig and straightforward.
Product design
When it comes to design a product like this I like to be methodical in order to save time, hustle and to be consistent with the product im creating. This is crutial working with clients.
Depending on what kind of project and what scope there is set the list will change, in this situation, according to what was set in the strategy section it’s very important to develop a minimun viable product, thats why I’ve focused on the most important things to make the project work, the steps to work on are the following.
• Sitemap
• Wireframes
• Prototype
• Interaction elements
Want to see recent real projects where I follow this process?
"it's very important to develop a minimun viable product"
Sitemap
The first step for me is to make a quick sitemap to have an overciew of the project, user flows and how many screes will I need to design.
Sitemap made to have an overview of the project CLICK TO ENLARGE
Wireframe
My wireframe process focus on the structure, the content and the tone, onw this is all settled witht he client we will have a solid foundation to design over it.
Prototype
Once the wireframe is set the design process is very straightforward, lets take the structure and content from the wireframe and the visual components of the brand and apply them together
Interaction elements
There are some aspects of the interaction that can not be left until later because they are a crucial part of how the application will work. These documentation will help the team undertand and scope the project and the development team to code more efficiently
Benchmark table desktop
Benchmark table mobile
