Hermanos PC – a PC calculator tool

Role:
UI/UX designer.
Tools:
Miro, FlowMapp, Adobe XD, InVision.
Personal project
Mid 2019

Hermanos PC is a community of enthusiasts for computers and setups, in 2018 we created the first tool that based on your gaming needs suggest you the right PC components so you won’t be short on performance or too much and spent money.

Hermanos PC – a PC calculator tool

Goal

The goal for this project was to create a new feature in the calculator tool that will suggest you PC components based on your budget so you will find what is at your reach in an easy way and have a good overview of what you can get with XXX amount of money.

Persona

Hermanos PC has some different personas created for different reasons and purposes, we are focused on just one to use this tool.

User Persona for Hermanos PC

Design Sprint Process

With that previous research that we have, I decided to use the Design Sprints framework, which in a week (4 days) we can come up with a good solution to test with users. Now let’s see some key outcomes of the Design Sprint.

Day 1: Defining the Challenge and Ideate Solutions

How Might We's

We decided that the main “How Might We” that we are going to focus on solve in this sprint was Help people to build the best PC performance based on their budget.

Long Term Goal and Sprint Questions.

We vote what the tool and Hermanos PC, in general, want to be in two years, and what can be wrong to get to that desired spot.

Journey Map

Thanks to the map of the user journey and the HMWs we can appreciate what specific area we need to solve and improve – in this case, it is in the “use” stage where the calculator tool comes to play a role. Click here to see more in detail the Journey Map.

Crazy 8s technique.
Clear view of one Crazy 8

One Crazy 8s where I iterate x8 one idea (here was the Q&A view) in 8 min.

Day 2: Decide and Storyboard

Concept Solution.

This was the winner concept (made in day 1) that we decided to come to prototype and test.

Concept detail 1
Concept detail 2
Concept detail 3

The main idea was to keep the form style with questions and answer options selection that the tool has already but including now a section where the user can select if they want a budget solution or based on their needs and knowing that will display different forms for each option.

Also for win credibility around the industry (most important sprint question), I decided to put some famous brands that trust in the tool and approve it.

Storyboarding

With the concept solution and storyboarding defined, the design team (just me 😅) is ready to build the prototype because we have all the screens and visuals conceptualized.

Day 3: Prototype

Final visuals design of the sprint

I used Adobe XD to build the visual prototype and InVision to make it usable and interactive – you can check the interactive prototype here.

Day 4: Test

I test the prototype with 5 users, and so far the solution achieve his goal, people found it easy to understand and fast to know what PC components can buy under their budget – also the style of Q&A form liked to the users.

About to win credibility, users found secure that each component redirects to Amazon’s product page. Another thing is that putting brands that they know before and also famous brands give them more trust (so we need to approach big brands to win their approval).

Users liked having some options to choose around their budget and not only one option. Also, users liked that in the result page each component element was clearly described what specific component was.

Some suggestions from the users were that they prefer to select options with one click and not with the “next” button, for faster navigation.

Also, they would like at the end to have options to share the components result list. The options to share that right now we're taking into account were Facebook and Twitter but only the tool in general and not the result page of a specific build list. 

Development Stage

This concept is in development right now, the only way to be sure if it will be a good solution for users is launching it to real production and see a large of users using it – but thanks to the test results we are more confident that can be a good feature.

Update: You can check this project live here: https://hermanospc.co/calculator

Want to Talk?

Do you want to tell me something? You can contact me, I will reply as soon as possible :)

Andrés González
Andrés González
Product Designer
Design By Andres
Designed and developed by
Andrés González. © 2021.