A Website for a 3D Printing Professional
keller3ddruck.de
Project design, duration: 3 months
Overview
1. Analysis
2. Research
3. User story, Personas, Journey Map
4. The Design
5. Accessibility
6. Next Steps
Analysis of the problem
-
keller3ddruck is a website that has the purpose of promoting R. Keller‘s freelance business. The freelance business has two ways to generate income:
-
3D printing education courses
-
3D printing consulting business
-
Project duration: 3 months: December 2021 – February 2022
-
Stakeholder: freelancer Robin Keller M. Eng.
-
Product design: Jessica Keller
​
-
KPIs: traffic, google ranking, leads
The goal was to develop a website for a freelancer who is starting his business in additive manufacturing.
The freelancer developed a business plan and did market research to find out the demand in the field of 3d printing.
Using a website specifically, enables the freelancer to have an official representation of the business and the following things all in one place:
-
Linked Social media accounts
-
A newsletter registration page
-
A blog
-
An enrolment page for the courses
-
A sign-up page for free events
-
The free events themselves via an integrated interface
-
New blog posts, the newsletter and new events can be managed through the website provider‘s interface. A website is to manage and to keep updated, hence a website was chosen as the preferred method of communication with the user.
The main problem and the goal
The main goal is to promote the two 3D print education courses and promote the consulting business. Within this goal, we want to
-
Make it easy for users to evaluate which course is the right fit for them.
-
Make it easy for users to sign up to the course.
-
Make it easy for clients to contact the freelancer.
-
Problem: The education courses are not affiliated with an official educational institution. Therefore users don‘t know what they are getting into when booking a course and may be hesitant to spend a big amount of money on it.
-
Hypothesis: The website has to look trustworthy for users to book a course
-
What does that mean for the design:
-
Attractive and intuitive layout with prominent CTAs and usage of high resolution and professional pictures is a priority.
-
Corporate identity has to be consistent on all platforms
-
-
What else has an impact on the trustworthiness
-
A reputable domain name with a good domain extension, an ssl certificate and no ads on the website
-
Display social proof: customer reviews, success stories, testimonials. Get the courses featured on 3d printing sites
-
Provide room on the website to have detailed and transparent policies and terms and conditions
-
Have a blog with a comment section for personal connection
-
If the user has a way of getting to know the freelancer personally and directly, trust can easily be developed. For this, the idea is to have a bi-weekly live, open, free event where the freelancer gives a talk about 3D printing for an even more personal connection.
My responsibility and the UX process
My responsibilities: product design, including
user research, wireframing, prototyping, user writing, SEO writing and ideation for additional ways to promote the business.
For the UX process, I used the Design thinking process. There is currently no product on the market that is identical to this product, which means that to solve the problem best, I need an agile process that can be applied to open-ended problems.
In the Empathize phase of the Design Thinking process, I conducted a stakeholder interview and I did qualitative and quantitative user research. I conducted a competitor analysis, built personas, did journey mapping and wrote user stories.
After that, I designed wireframes and did an iteration with the stakeholder. Then, I wrote the copy for the website and I created the hi-fi version of the design. After one more iteration I prototyped the website and transferred the result into the website provider‘s interface.
KPIs
If the website is trustworthy, it should result in a high number of leads and a then ultimately a high conversion rate. The conversion rate should be measured in 3 months time and in 6 months time because this is a new website and conversion rates will vary.
The bounce rate should be measured for the same time period
The amount of visitors along with the average time on page for the blog should be measured seperately to the website. This is an indicator for how much people read the blog. In addition to that the conversion rate of the blog should be measured to evaluate long-term if the effort of maintaining a blog is worth it.
As this website is a new website, additionally website traffic and the google ranking are important KPIs to measure to evaluate marketing efforts such as free events and newsletters.
The research
A competitor analysis of both direct and indirect competitors to see who the big players are in the field of 3d printing advanced training. This was done to find out who they are marketing to.
​
Qualitative research: User‘s opinions of online courses were gathered on 2 different platforms and sorted using affinity mapping. This was done to gain more insight into what might be missing from their current experience in advanced training and how users feel about online advanced training.
User interviews were conducted to find out what training the users prefer and why.
​
Quantitative research: User‘s demographic data and motivations for advanced training were gathered from 2 different sources. Both sources were surveys from the Bundesministerium für Bildung und Forschung (BAMF), so the quality of this data was expected to be very high. The results of the data was analyzed and consolidated.
​
Based on this research, I developed two user personas as well as a user journey map and a user story board. Based on these, I developed the user flow and the information architecture.
Competitor analysis results
Issues of the competitor analysis
Due to the novelty of the product and the lack of expterts who are able to offer this product, there are very little products that are directly competing with this. Most competitors are indirect and those who are direct offer very limited courses for professionals.
There are only two direct competitors in Germany who offer courses for the same user group, both offer in-person training only. Online training therefore can be a huge opportunity.
Assumptions about the user base
Based on the stakeholder‘s business plan and the market analysis, the UX Designer assumed a user base. The prospective users are engineers who want to educate themselves regarding 3d printing so they can further their career. The user therefore has great technical knowledge and education.Users are between 25 and 55 years old.Users are interested in new technologies.Users need to be separated by the degree the user holds. One course will be for people with an apprenticeship qualification and one course will be for people with a university degree.These assumptions were then tested using user research
Quantitative research
To gain a better insight into who the group is that signs up for advanced training, I gathered data from official government statistics, dating no longer back than 2016.
The government encourages professionals from all backgrounds to educate themselves further and there is a program that a large group of people is eligible for. This program offers financial support of advanced training. The eligibility depends on the conditions of earning a less than 40.000 Euros per year, working at least 15 hours per week and being over the age of 25. My sources are the BIP and the BIBB who have extensive data for all types of jobs. What I’m interested in, is data for STEM jobs.
7% of all people who get financial aid for furthering their education have STEM jobs. This number is rather low, but that is to be expected because usually people with STEM jobs usually earn more than 40.000 Euros per year (the average is 57.000 Euros). This data therefore may not represent the whole population of people who work in technical jobs. Nevertheless, these statistics explain a lot about the motivation of people doing advanced training in general.
User motivation
Usually, motivation can be best researched by doing interview. However, in this case, there is extensive government data about the motivation of people doing advanced training. Instead of relying on the input of a small sample size that I would be able to recruit, I am taking this large government sample data for my research. This way, the time and resources can be spent on different interview questions that may lead to different results.
These are the most named motives for advanced training:
to improve professional opportunities
to be able to perform new tasks
to earn more money
to acquire a certificate/examination qualification
Most professionals said that the reason for doing training was to…
be able to perform better on their current job (78%)
expand knowledge on an interesting topic (38%)
get job security (33%)
improve professional opportunities (33%)
(Multiple answers possible)
Research finding: User competition
There is a perceived competition between employees in the technical field and academics in the technical field.
Competition with academics can be observed primarily in those occupational fields in which vocational and academic education qualify for comparable activities, such as in the technical and commercial/business fields.
There were clear and significant differences between master craftsmen and technicians.
There are two groups of users, one with a uni degree and one with vocational training as their background. The idea of the stakeholder was to separate them by that degree, however then I found this data which tells a different story.
There is actually a pretty big overlap and a big competition between users who have a bachelor’s degree and users who did vocational training and are technicians. There are certain differences as is explained in the chart, but overall a user with a bachelor’s degree in engineering is, in the eyes of the employer, qualified the same as a technician and they do a similar kind of job. On job ads, oftentimes the education criteria requires vocational training as a technician or to have a bachelors in any kind of engineering.
Academically qualified workers with a technical occupation (bachelor's or diploma from a university of applied sciences) performed highly complex activities significantly more often (57%) than those with a higher vocational qualification (11%). A look at the individual activities behind the main activities (TASK) shows more concretely what the differences are based on. Academically qualified persons in technical occupations are significantly more frequently engaged in "developing/ researching/ constructing" (45%) than those with vocational qualifications (19%). Those with vocational qualifications (19%) are more frequently involved in routine manual activities such as "Measuring/testing/quality control" (62%) or "Repairing/repairing" (43%). (academically qualified persons: 44% and 13%, respectively).
Because there is an overlap in the tasks that both groups – those with university degrees, and those without – do, we decided that instead of dividing the courses by degree, we should divide the courses by the tasks users do in their job.
This will be done by listing the tasks users do in their day to day job in the course description. One group will be developing/ researching/ constructing and the other group will be measuring/ testing/ quality control.
​
What does this mean for our user?
Users should be able to read the description of the course and decide for themselves which course is a better fit, instead of having the criteria depend on the degree which has the possibility of not giving the user the knowledge and skills they truly need.
Qualitative research
Affinity mapping results
Qualitative indirect research was done and then sorted using affinity maps
The goal of the research was to understand what is important for the user when they take online courses.
For the research, I gathered information from online forums and focused on those reviews where users gave 2-4 stars (out of 5 stars). Oncampus features online courses but not regarding 3D printing, udemy features online courses regarding 3D printing but all courses are video lessons only.
What are the issues the users face when taking online classes
-
The tempo of the course may be too slow or too fast
-
The course has to be well organised
What are the needs that users have
-
Engaging presenter,
-
Active participation of students active communication between lecturer and students
What are the possibilities for our classes
-
Direct Zoom lessons
-
Clear indication of the knowledge you need to get the most out of the courses
-
Moodle forum and encourage people to participate / make participation mandatory
Interviews
A foundational interview was conducted to find out what might be missing from their current experience in advanced training. How do people feel about online advanced training? Would they rather use an app or a website or do video training or live sessions?
The group was recruited through the stakeholder‘s network.
I used the following criteria: users must be in target age group, have a technical job, must have had advanced training in the past, both male and female.
This resulted in the following interview groupo:
The age group was between 30 an 40 years old
The professions were engineer (2), cutting machine operator (1), teacher (1)
The gender 50% female and 50% male.
The interview was conducted via Zoom (2) and in-person (2)
All participants have had advanced training at some point in their career.
The following open-ended questions were asked about advanced training
How much did you pay for your advanced training?
What type of training did you do?
What did you like about the training?
What did you not like about it?
What do you think about online trainings versus in-person trainings?
What do you think about training via an app?
What do you think about training via Zoom?
For all the participants, the advanced training was paid by their employer, so they don‘t remember how much they paid for it. 3/4 participants did in-person training but said that they are open towards online training, especially due to the current global situation they got used to working from home. However 2/4 said that some training had to be done with a certain machine so they found it hard to imagine doing training for that remotely.
What are the issues the users face when taking online classes
Training has to be practical
Training should be video lessons because it allows for flexible time
Training should be in person because you can ask questions better
What are the needs that users have: Hand on training
​
The practical application of the theory is an important part of any course the user takes. However 3D printing courses don‘t usually include a practical way to learn 3D printing.
The problem: How to do hands-on practical training through online learning?
In person learning can not be the solution due to the current worldwide situation.
Ideation brainstorming process with the stakeholder
How might we make the experience of the online course as close to an in-person training as possible?
The solution I came up with: Use modern technology, like an external webcam to teach students the practical application of a 3D printer. This solution was chosen because it requires minimal affordable additional technology and only a minimal additional work effort from the freelancer.
​
Practical relevance is super important to me.
Practical examples help me to understand the concepts clearly.
I need hands-on training to use the machine.
I don't like training that's only theoretical, that doesn't help me at all!
user quote
User story, personas, user journey map, user design storyboard, user flow
User story and what I learned through persona creation
A comprehensive analysis into our potential customers unearthed 2 distinct user clusters that were formed first into user stories and then personas
User story for persona 1: As a middle-aged technician, I want to get training from a professional 3D printing expert so that I can stay relevant in my job
User story for persona 2: As a busy mom who is also an engineer, I want to take flexible classes so that I have a certificate in an upcoming technology when my parental leave ends.
​
The practical application of the theory is an important part of any course the user takes. However 3D printing courses don‘t usually include a practical way to learn 3D printing.
Users who want to get certified during their parental leave have different time-slots available during the day. Therefore, the timing of the courses has to be taken into account.
Flexibility of the course is a big factor because the user has many responsibilities, like their job and their families.
The problem: How to make the course more flexible to adjust to that need?
The solution: Have less mandatory in-person sessions (but make those sessions count!) and more homework that can be done whenever the user has time.
Information architecture
Hypothesis: The information architecture is not structured in a way that best supports the main business goals
Usability testing this hypothesis:
-
Usability testing: time on task and task completion.
-
The task was to start on the Home page and then sign up for a free event, the „3D Druck Café“.
-
The study was unmoderated and the 5 participants were told to set a timer and report back how long it took them to sign up.
-
The usability testing was done with 5 participants in an unmoderated way
-
This task was chosen because free events are the most important way of marketing and of getting more clients.
-
The results of the tests were that 1 out of 5 could not finish the task and 4 out of 5 took an average of 3 min 30 sec searching for the event. 4 out of 5 expressed frustrations about this.
​
What changes did I make:
The free events are put on the top level for easy access. Top level items reflect the two business goals. Both offers are now visible and not hidden on the second level. There is a clear division between education and consulting
The Design
Typefont and styleguide
For a modern technology we need a modern look, so I picked a sans-serif font. Sans-serif are not too playful and the user is maybe already used to a classic vanilla sans-serif font because they are widely pre-installed. For this reason, I picked Calibri.
For accessibility reasons, the font size is at least 16pt with mostly black font on a light background for a good contrast ratio.
The logo and brand colors were already chosen by stakeholders beforehand. A high number of icons was used to break up the text on the website and make it more scan-able
Goals and thoughtprocess
The overall goal of the website is to make it look trustworthy
What does that mean for the design:
Attractive and intuitive layout with prominent CTAs and use high resolution and professional pictures.
Corporate identity has to be consistent on all platforms
Additional goal: Make it easy for clients to contact the freelancer.
3D printing is a highly complex technology and there are a lot of variables, so a client will always need individual consulting with very personalized information. A client‘s immediate goal therefore is to see if the freelancer is an expert at the technology they need and then to contact them as easily as possible.
For this reason, the „contact“ page is in the header as well as the „about me“ page. In addition to this, on the 404 page, there is also the option to contact the freelancer.
The contact page was linked on almost every page under the picture of the freelancer. The added picture makes it feel more personal, because you have a clear picture of the person you are contacting.
A lot of energy was put into streamlining the about me page
Paper wireframes
-
There is a lot of written information that needs to be conveyed to the user, so I am looking for a way to make this information easy to read.
-
I am trying out different layouts while keeping in mind the UX rule that users scan information on websites in an F-shape
-
With the design of the training courses, I wanted to make it easy for users to sign up for courses. Therefore, I added two registration buttons on each page, one at the top of the page and one at the bottom, so the user can sign up directly after reading the course description.
Before and after
The following part ist a before and after of the low-fi wireframes of the website.
The stakeholder had already made an attempt at having the page designed before, so I evaluated the designs and came up with different solutions that support the business goals of the stakeholder.
To illustrate the changes I made, I transformed the old design into low-fi wireframes and I‘m comparing them to my design while explaining the changes I made.
Main page before and after
This is how the stakeholder wanted to build the website before. Courses and consulting and the about me page are at the top. In the middle, the free events are being advertised. Below that, there is the blog. While this is a possible solution, the user has to chose between three things at the top, so there is no clear path the user will take. The free events are an important marketing feature and they should be promoted more. The blog is important enough to be linked to the main page, so it can stay there.
​
Now, the user gets to see the free events first and because of the colorful button is inclined to sign up immediately.
After that the user gets to decide between looking at either the courses or consulting. Having only two options makes this decision really easy. Below that, the blog as another marketing tool is set. After having looked at the whole page, the user may be interested in learning more about 3D printing and about the information the freelancer provides. At the bottom, the user can con tact the freelancer directly if he has any questions or he can sign up to the newsletter. Again this is an either/or decision which can be easily made and reduces cognitive load.
This is the first time, 3D printing terminology is used on the page, so it‘s important to keep the following pages consistent.
About me page before and after
The about me page is an important page because both consulting and education clients will have a look at it, if they are interested in the product.
Users don‘t read, they scan, so this page is not ideal due to the high amount of text on the page.
There is no F-shape that the user‘s eyes can easily follow, especially in the middle. The design on the whole page is not organised and looks jumbled.
There are elements, that are not relevant right now: social media buttons at the top are not needed yet, because there is nothing posted yet on the socials. There are placeholders for testimonials that can not yet be filled out because this is a brand new business.
The contact element on the top right is important but not placed correctly. This is the about me page, so the goal users have is to learn about the freelancer and not to contact him.
I added a picture of the freelancer at the top of the about me page, so users have a visual representation of who this page is about and they have a face to the name. This builds additional trust.
I shortened the text, made it more concise and gave it air to breathe visually by breaking it up with icons.
I separated the information by the user‘s motivation to visit the site, so one column is for education users and one is for consulting users.
After reading the about me page, users are given the choice of either contacting the freelancer (important for consulting clients), of going over to the blog (important for the education clients) or of signing up to a free event (relevant for both clients).
Choose course page before and after
There are three courses the user the freelancer offers. On this page, the user is supposed to choose one course.
In addition to the three courses, there are two free events promoted underneath.
Having all five courses on one page, the user might get confused between the courses and the free events and may not sign up for the free events.
One piece of feedback that I received from the A/B testing that I did earlier on, when I asked participants to sign up for the free event „3D Druck Café“ was that there is very little explanation of the courses before a user clicks on the course. The user has no idea what is the right course for them to choose because they have no information to make an informed decision.
​
There are three courses the user the freelancer offers. On this page, the user is supposed to choose one course.
In addition to the three courses, there are two free events promoted underneath.
Having all five courses on one page, the user might get confused between the courses and the free events and may not sign up for the free events.
One piece of feedback that I received from the A/B testing that I did earlier on, when I asked participants to sign up for the free event „3D Druck Café“ was that there is very little explanation of the courses before a user clicks on the course. The user has no idea what is the right course for them to choose because they have no information to make an informed decision.
The hifi design
After receiving the „go“ from the stakeholder for the wireframes, I did the UI of the project using the colours and logo he provided me with.
Colors were added to CTAs to make them pop and then additional color was added as a blur in the background to get a modern parallax effect. The colors in the background were toned down so that readability was not compromised.
Accessibility considerations
On this website, I am doing the following things for accessibility:
-
I provide text alternatives for non-text content
-
To determine legibility of the text, I used a contrast ratio checker
-
To have accessible typography, the body has a minimum of 16pt font size
-
I used no embedded elements, as they can‘t be read by screen readers
-
I optimized buttons with descriptive hyperlinks
Next steps and going forward
If you've read until here, congratulations, this was a loooong case study. I am lucky that this was done for a relative, who is very kind to allow me to talk freely about the whole process on my case study page. Other case studies are not that long, also due to NDAs, so I'm so happy I can showcase a lot here.
​
This is the first project I did after completing the Google UX Design certificate, so I learned a huge amount of things. I learned about how to talk about design choices I made and explain why I made these choices. I also learned about the importance of proper research before starting a project and during a project because user research is the foundation on which the design is built.
​
The impact of this product was a happy stakeholder: „I am so happy about the look and the feel of the website. I think this website represents me and my core values very well and I will reach a lot of clients with this.“
The next steps are to keep track of the conversion rate over the course of the next months. As the conversion rate is a relative metric and this is a new business, it should be tracked carefully and put into context of the different marketing efforts that are being made in this timeframe.
If the stakeholders plan more courses for users without a technical background, new research about the user will be necessary
Let's talk about UX
jessicakeller(dot)psy(at)gmail(dot)com
0151-70 05 32 81