Week 1: Design, design, design...

As the first week of building my app for Swedish youth to prepare for their AM driving license theory exams comes to a close, the focus has been entirely on design. My goal for this week was simple: build a foundation that provides a minimal but valuable user experience, and ensure that the design is both functional and consistent. Here's how I approached it.

Mapping Out the Minimum Viable Screens

I started by mapping out the absolute minimum number of screens needed to provide a seamless experience for the user. The idea was to focus on the core functionality - what’s essential for users to prepare for their AM driving license theory exam. These screens include:

1. Home Screen - A place to access practice questions, past results, and test-taking options.

2. Question Categories - A screen where users can choose which areas of knowledge they want to practice.

3. Quiz Screen - A clear and simple layout to answer questions.

4. Results Screen - Providing immediate feedback on how users did and giving them the option to try again or review past results.

Setting Up a Simple Design System

With the core screens mapped out, the next step was to create a simple but effective design system. This system is essential for maintaining consistency across the app.

I chose a clean, modern font and kept the color palette simple with soft blues, whites, and grays, along with some bright accents to highlight key actions.

When setting up spacing, I decided to follow a grid system based on multiples of 16 pixels. This ensures that every element on the screen is well-aligned and consistent, helping the user focus on the content rather than being distracted by inconsistencies in layout.

Creating and Testing the Screens

Once the design system was in place, it was time to build the actual screens in Figma. Not only did I focus on designing each screen in isolation, but I also made sure that they worked well together as a unified experience. The screens needed to feel connected and intuitive, leading the user through the different steps without confusion.

To bring this idea to life, I set up interactive navigation between the screens in Figma so I could test the user flow directly from my phone.

It allowed me to see how smooth the transitions were, how intuitive the navigation felt, and whether the overall experience was clear and straightforward. Testing on an actual device also helped me catch little things - like button placement or font sizing - that would be easy to miss on a desktop view.

Next Steps

Now that the core design is in place, I’ll be shifting my focus to development in the coming weeks, where I’ll bring these designs to life with real code and functionality.

Alongside that, I’ll also need to start researching important marketing aspects, like SEO (so the app can be discovered by the right users) and potential monetization strategies.