To create a responsive website for their newly launched company.
ABOUT
Curious Mints is a company focused on developer education, dedicated to providing free tutorials to developers who want to learn and build new skills on the side.
ROLE & DURATION
I worked with the founder directly and led the design studio in creating a website that would reflect their vision and meet user needs. I then collaborated with their in-house visual designer and developer to bring the product to life.
Duration: 8 weeks
TOOLS & METHOD
- Client & user research
- Competitor analysis
- Synthesizing data
- user personas
- feature prioritization
- Closed card sort, sitemap
- user flow
- paper sketches, mid-fidelity wireframes
- usability testing
- visual moodboards (icons, colors, typography, image style, buttons, links, content)
- Tools: Miro & Adobe XD, HTML & CSS
Stage 1 – Empathize
1.1 Business Objective
Free tutorials at beginner level for developers to learn in a fun and simple way.
“User registration not required. No signups, no credit cards, all free, and super easy.”
In my meetings with the founder, I learned that before starting his company, he was a developer evangelist himself and had attended and hosted over 300 hackathons in his career. He had interacted with a lot of developers and knew exactly where the problems lied and was very clear of what he wanted their company to focus on. Our conversations covered:
- the current market trends and needs for more developer education online
- the company’s objectives
- target users and their goals
- prominent competitors
- key challenges faced in the developer community
1.2 Competitor analysis
We looked at four other competitors offering similar services and did an analysis on key features important from a user’s point of view.
- Most companies offer great education-based products, however, the lists are extensive and hard to navigate with busy UI. There is lack of clear indication if the material is for beginners, intermediates or advanced level users.
- With Curious Mints, we wanted to make sure they stand an advantage here, by communicating clearly who their target audience is and making sure the content can be easily navigated and searched for.
- Based on our findings, we all agreed that the format in which the tutorial content should be displayed on website should consist of narrative text with lots of code and gifs rather than videos.
1.3 User Research
Based on interactions with developers over these years, the client shared an extensive list of user pain points and goals identified over time. I made note of these points and began the next stage.
Stage 2 – Define
2.1 Synthesizing research
I used the client’s and my notes to define the key elements that we needed to focus on.
2.2 Design Strategy
I created a Venn diagram to summarize and align the vision of the company, needs of their users and the technical considerations in getting this live and functioning at the earliest.
2.3 User Persona
The founder shared an image with me and said “this is exactly I want to do and whom I want to do it for. It’s as if I am writing for myself but only 3 years ago.”
- We identified three types of primary users: students, working professionals, career changers.
- Age range: 21-40 | Gender: All inclusive | Industry: Tech
- Audience: People with basic working knowledge of at least one modern programming language (like Python, Ruby, Java Script).
- Key need: To learn and build new skills on the side and have access to free content, which is easy to understand and follow.
- Key pain points: The tutorial formats can be hard to follow. Not sure if it’s meant for their level of expertise as there is no clear indication. Don’t want to pay for these tutorials and wish to have one path to follow.
2.4 Features Matrix
The approach was to ‘ship the MVP at the earliest’. At this stage, I involved the founder, their visual designer and developer to brainstorm on features and functionality that the website should prioritize in order to ship this.
Phase 1: Create the necessary pages (landing page, about us, tutorials, submit requests)
Phase 2: Leave comment and make live changes to code request buttons, link to social media, etc.
2.5 Open Card Sort
The client wanted to tag their tutorial content into separate categories (programming languages) to make it easier for users to search on their website. I conducted an open card sort exercise with 5 users (contacts provided by client). This was challenging with COVID – so we sent a list of all the tutorial content to these users and asked them to label them. Based on that, we were able to identify 5 categories as the most common.
Stage 3 – Ideate
I started with building a sitemap to get a clear direction of how the website will function and then created a user flow to define the steps visiting users would take in order to browse and view tutorials.
3.1 Sitemap
3.2 User Flow
Stage 4 – Prototype
I started with paper sketches and built low to mid-fidelity wireframes so we could start testing early on and incorporate valuable feedback from the target audience, into the our design.
Note: Prototypes and wireframes are protected under NDA. I only have the permission to share paper sketches for now. Once the website is live and running, I will be authorized to share more.
Stage 5 – Testing
With COVID, it was getting harder to test. I created mid-fidelity wireframes on Adobe XD and sent the files to the users to test. We were on video call to make note of feedback. They were pretty pleased with the first look and feel of the content. Few things were brought to our notice and we had it iterated.
“This looks really clean! I’m definitely going to explore the content.”
“I can’t wait for more tutorials to be uploaded. I love that we can submit our suggestions to update the content.”
“It’s great that I don’t have to signup, but would love to see if we can create an account with Curious Mints later on, so I can bookmark and save for learning in the future.”
Stage 6 – Next Steps
The visual designer created a branding guidelines and I helped make sure it passed the accessibility test. I handed over the wireframes to them and they are now in the process of adding in their content. The website is now under development. Once it goes live, I might be called in to test it again keep the circle on.
Reflection
It was great to work with this team. They knew exactly what they wanted, and it was refreshing to see a small team with big goals and heart in the right place – where everything revolved around the culture of “what’s best for the user.” This helped me think deeper and focus more on users. The challenge here was that with COVID, it was hard to test it with more of the target audience. The next phase is going to be adding more content, and I can’t wait to help them map more experiences and features as they grow!
“I didn’t think I needed all this information but love the detailed direction that you have provided. This is super helpful! The features matrix, the personas and the competitive analysis is definitely very helpful and helps us operate better.” – Founder, Curious Mints