Case study: How I designed and launched a bookmarking app after learning UX for a month
This is a record of my whole design process and the UI evolution, everything from wireframing to final design
Who am I
I am a co-founder and a UX designer in Hong Kong. I have no prior education or formal training background in UX design.
The major reason I picked up this UX designer role for my own app startup is that I’ve already had some interest in UX design beforehand, but I kept stumbling when I began learning UX design by watching MOOCs and doing daily design challenges. I thought creating my own app would be a good chance to learn by doing.
What did I design
The app is a bookmarking and discovery tool designed for tech-learners (i.e. people who’re learning programming, UX design, PM…). Users can save the links of learning resources into the app, and they will get data-driven recommendations based on their saving behaviors.
This idea came from my personal experience learning UX design — there are many learning resources available online (like a youtube video made by a UX designer, a medium blog about UX tips, a podcast…) , but there are just too many of them. I would bookmark them to read later, but I almost never remembered to go back to them.
My co-founder, who is a self-taught programmer, shared this problem as well while he was learning programming, so I thought this might be a pain point worth solving.
What is the process
I followed a typical app design flow I learned on Udemy: sketching-> wireframing-> prototyping. In between stages I let my friends or the local UX design community rate my design.
For me, taking the first step to sketch it out is not difficult. It’s because I’d already had a vision of how this app should end up look like — it is a tool but not a platform, so it needs to be more neutral and minimal; and it works quite like a to-do list or other read-it-later app so it should not deviate a lot from the typical layout of these existing designs.
With these in mind, I sketched out the first layout of the app:
Since I had gone through some iterations on the product idea, there are some differences in terms of the function and user flow of the app. Anyway this image shows what I did in the first step.
Based on this sketch, I created some wireframes using Figma.
This is the original wireframe based on the above sketches.
Later on, I created a more detailed wireframe.
I showed this design to some of my friends and did some usability testing — basically I let them play with the Figma interactive prototype and asked them to point out some problems. Based on the feedback (‘the color is too boring’, ‘too messy’, ‘I want to see my stats’), I changed some of the layouts and added some color — and here’s the first prototype.
A few days later, I refined the home page and changed the background color:
Upon updating the UI to this version (I called it the 2.0), I was pretty satisfied and thought it was 90% finished.
I thought.
The UX issues I reflected upon
Hey, at thus stage the UI is cool — the design was nice, the brand color was also fine, but I had this idea in my mind: from my target users’ perspective, this design wouldn’t work.
One issue is that since I made the background beige, this color will become my brand color and I will be using it in many occasions. (social media, landing page…) But this brand color is not really memorable or eye-catching, nor does it resemble the other read-it-later apps on the market (Pocket, Instapaper…).
Moreover, I’m aware that if I’m positioning this app as a tool, I should go for a more neutral design and use a white or more grayish background to avoid stealing the focus from the saved resources (or I call them ‘cards’, as they’re presented as cards with the logo of its source platform). The tool itself should not stand out, the card should.
At this point, I didn’t have more friends to do usability testing, so what I did was I experimented more with the design and see if it’s better from my perspective. (luckily I’m quite critical with myself and I would be also a potential user of this app as well)
I started to test with some more grayish backgrounds. It wasn’t bad, but not an instant keeper either. I chose to believe that my doubt was right. So I kept experimenting.
Then it evolved to this UI, version 3.0 — it’s pretty different from the 2.0 because not only the background color changed, I also removed some functions to make it more minimal.
But I thought the font was stealing too much attention and the cards looked too messy and boring at the same time.
And here is the 4.0 — I added a color tile next to the card title to make it stand out, and I refined the content layout inside the card as well.
The only concern left was that the layout was too monotone. One reason is that I used a grayish background color so the app looked gloomy. I tried to make the gray lighter, but it was still gray after all.
Finally I refined the UI and here’s 5.0 — a white background, shadows for the cards, and more emojis to make the app more lively. That’s it. The final design.
What are the lessons
There are 3 lessons I learned.
1. Do usability testing. If not, at least ask for some advice from the community.
I am glad that I did some usability testing with my friends in the early stages, it really helped me figure out the UX problems of the main functions.
And even if you don’t do usability testing, ask the local community for opinions. In fact, the reason that I iterated the idea after sketching is because I asked the local UX design community in Hong Kong (If you’re from HK, it’s a telegram group called UXPear) about the original idea. Their opinions changed my mind and led to this iteration.
2. Trust the process. Crappy design is just the start.
When I created my first wireframes, I had no idea how they would turn out. One reason is that I had no prior experience in UI/UX design, so what I did is keep working on it until I was satisfied.
If you are a novice designer like me, don’t be afraid to make ugly sketches at first. Trust the process!
3. Don’t follow Dribbble blindly.
As you can see my design is quite different from the popular designs on dribbble. One reason was that I’m not a fan of neomorphism. Another reason is that I had doubts on the usability of some of the dribbble designs. They serve as some inspiration but I wouldn’t mimic them.
Thanks for finishing this long read! If you have any questions or any feedbacks, please drop them in the comments below and I’m happy to answer. If you want to check out the app, feel free to go to my bio for link. :)
