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.
To create a responsive website for their newly launched company.
Duration: 8 weeks
Worked with the founder and led the design studio from start till end in creating a website that would align business and user needs. Collaborated with their in-house visual designer and developer to bring the product to life.
Client research, 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
In our kickoff meeting, to understand their needs, the founder and I covered conversations revolving around market trends and increasing need for developer education, company’s goals, key competitors, target users and challenges faced within the developer community.
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.”
We looked at four other competitors offering similar services and did an analysis on key features important from a user’s point of view.
The client is a developer evangelist himself and has hosted over 300 hackathons in his career. He had interacted with a lot of developers and knew exactly where the problems lied and shared an extensive list of user pain points and goals identified over time. I made my notes based off that and began the next stage.
I did an affinity map and defined the key elements we needed to focus on.
I presented a Venn diagram to summarize and align vision of the company, needs of their users and technical considerations in getting this live and functioning at the earliest.
With Curious Mints, we wanted to make sure they stand an advantage by:
Tutorial format with narrative text, more code and gifs
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.”
Based on this vision and our findings, we came up with three types of primary users: students, working professionals, career changers.
Age range: 21-40 | Gender: All inclusive | Industry: Tech
People with basic working knowledge of at least one modern programming language (like Python, Ruby, Java Script).
To learn and build new skills on the side and have access to free content, which is easy to understand and follow.
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.
“I just want to learn and build cool new stuff”
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.
Create the necessary pages (landing page, about us, tutorials, submit requests).
Leave comment and make live changes to code request buttons, link to social media, etc.
The client wanted to categorize tutorial content based on programming languages to make it easier for users to search on their website.
I conducted an open card sort exercise with 5 users. Their contacts were provided by the client. This was challenging with COVID, so we sent a list of all the tutorial content and headings to these users and asked them to label them. Based on that, we were able to identify 5 categories as the most common: Python, Alexa, Ruby, CLI and Swift.
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.
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 am authorized to share paper sketches for now. Once the website is live and running, I will be authorized to share more.
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.
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.
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