Case Study:
Embedded Files
code hut website design
code hut website design
Project Overview
Project Overview
The problem
Coding is a valuable skill to have these days. Users are in need of a responsive website with a wide selection of free coding tutorials as well as paid courses to advance in the tech industry.
The goal:
Design Code Hut’s website with the user in mind. Make a website that is user friendly and has clear navigation.
The product:
Code Hut is an online platform that provides users coding tutorials for free with the option to enroll in premium courses for a fee. The typical user is between 13-60 years old. Code Hut goal is to provide anyone interested in coding, quality coding tutorials made by industry experts.
My role:
Lead UX designer in charge of entire design process.
Responsibilities:
Conducting interviews, paper and digital wireframing, low and high fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs and responsive design.
Project Duration:
February 2022 to March 2022
Understanding the user
Understanding the user
I conducted user interviews, which I then turned into empathy maps to better understand the target user and their needs. I discovered that my target users want to learn how to code out of personal interest or maybe enhance their skill set to get better opportunities. However, they find material online to be confusing and not very linear. This usually caused people to become frustrated and abandon the whole process of learning.
user pain points
user pain points
1.Learning paths
1.Learning paths
Most websites for learning code don’t have clearly defined learning paths.
2. Navigation
2. Navigation
Users need to know where they are and where to find other useful sections easily.
3. Community
3. Community
Learning is better when you are communicating with other people that are on a similar path.
4.Experience
4.Experience
Learning websites don’t provide an engaging experience.
Persona & problem statement
Persona & problem statement
Jerome is a full time chef who needs a way to find and view coding tutorials because he wants to change careers.
user journey map
user journey map
A user journey map of Jerome’s experience using the site was created to help identify possible pain points and improvement opportunities.
starting the design
starting the design
sitemap
sitemap
My goal here was to make strategic information architecture decisions that would improve overall website navigation. The structure Chosen was designed to make things simple and easy.
paper wireframes
paper wireframes
Wireframes
Wireframes
I sketched out some paper wireframes for each screen in my app, keeping in mind the user’s pain points about navigation, browsing, and checkout flow in mind
Screen size variations
Screen size variations
Additional paper wireframes were created to cater for users that access the internet on mobile devices instead of desktop.
digital wireframes
digital wireframes
Moving from paper to digital wireframes made it easy to understand how the design could help address user pain points and improve the user experience.
Wireframes
Wireframes
Screen size variations
Screen size variations
usability study findings
usability study findings
These were the findings uncovered by the usability study:
1.Cart
1.Cart
Once at the checkout screen, users didn’t have a way to edit the quantity of items in the cart
2.Checkout
2.Checkout
Users weren’t able to easily copy the shipping information into the billing info field
3.Account
3.Account
The ability to edit the user profile is not easy to understand.
Refining the design
Refining the design
mockups
mockups
I made changes based on the usability study. One change I made was the addition of clearly visible arrow button on each category section to indicate that there is more content hidden that can be revealed if the arrow button is tapped.
In order to make the checkout flow easier I added a drop down button on the payment method to allow users to select their preferred method of payment.
accessibility considerations
accessibility considerations
1.Headings
1.Headings
I used landmarks to help users navigate the site, including users who rely on assistive technologies
2.Landmarks
2.Landmarks
I used headings with different sized text for clear visual hierarchy
3.Screen Readers
3.Screen Readers
I designed the site with alt text available on each page for smooth screen reader access
mobile variation
mobile variation
high-fidelty prototype
high-fidelty prototype
The hi-fi prototype I created followed the same user flow as the lo-fi prototype, and included the design changes made after the usability study.
going forward
going forward
takeaways
takeaways
Impact
Impact
The target group of users reported that the design was user friendly and it didn’t take them long to find what they needed. They thought it was engaging and demonstrated a clear visual hierarchy.
What I learned
What I learned
I learned that the most important thing when designing user experiences is to always put the user first and make sure that their needs are meet above anything else.
Next steps
Next steps
- Testing
Conduct follow-up usability testing on the new website
2. Ideation
2. Ideation
Identify any additional areas of need and ideate on new features
Google Sites
Report abuse