What I learned in DesignLab’s Design 101 course
Four weeks flew by fast. I’m happy to say that as a former 5th-grade teacher with no background in design, I was very satisfied with DesignLab’s Design 101 course. Here is a rundown of how I completed the course’s major project: design a responsive landing page.
Background
As a Seoul local who’s lived in the area for over 5 years, I often had difficulty searching for new spots to explore. Online searches usually yielded touristy places that I’ve already been to many times. Another problem was that when my friends visited Seoul from abroad, it was usually their second or third trip. Naturally, they wanted to discover new and “hidden gem” places efficiently.
The Problem
Point of view: Clara, a recent college graduate, needs to plan a travel itinerary of unique spots in Seoul because this is her fifth trip, and wants to make the experience different from the others.
How might we help Clara have unique and enjoyable experiences in Seoul as she wants to make the most of her time and money?
UI Design
The Logo
I approached logo design by listing out keywords related to my product’s purpose, such as “unique,” “travel,” and “vibrant”. The finger heart is a cultural aspect of Korea, and the Namsan tower is a Seoul landmark. I tried coming up with as many ideas as possible. I asked my parents and brother to pick out a few logos that reminded them of friendliness and vibrancy.
I iterated the logos because the shapes were not consistent with the font. I vectorized a more rounded look as a solution. I went with the top logo because of the tower’s recognizability and because from far, the finger heart from the bottom logo resembled a guitar in my mom’s eyes. :)
Final Style Tile
Color: I went with pink as the brand color because of its association with creativity, inspiration, and newness. I first paired it with orange for its friendliness. My mentor and I quickly realized that it could be hard to read, so I settled on blue for its contrast with pink and its trustworthy element.
Type: I used Google Fonts to test out a few Sans Serif fonts with a rounded look for friendliness. The original font was Fredoka One, but we switched to Baloo Tamma 2 because of its flexibility and range in depth. Legibility was key for the choice of Open Sans.
Wireframes
Low-Fidelity
My very first time creating wireframes was pretty intimidating! I set a timer to get myself started and began sketching all the “should-have” features, paying additional attention to visual hierarchy elements, such as size, scale, and eye direction. In total, I ended up with over 5 different versions, and I iterated them with my mentor’s guidance and feedback.
Medium-Fidelity
My goal was to keep the components organized and clean. How can I minimize friction between the user and the product? How can I place elements to make them intuitive for the user? Which components are clickable, and how can I communicate that to the user?
High-Fidelity Iterations
There were several iterations on the hi-fi wireframes; here are the top 2. The original menu had many elements fighting for the user’s attention. Through my mentor’s suggestion and guidance, the menu was simplified into a single stripe for simplicity. The map and quick links were changed to a gallery, keeping in mind that people search by looking at photos. I wanted the photographs to stand out on the website to guide the user in making a decision.
You can see all my iterations here and the alternate hi-fi design here.
Final Versions (Desktop, iPad, iPhone 8)
I used Figma’s constraints and scaling tool to tackle responsive design on tablets and phones. I had to think about the way I use apps on my iPad vs. iPhone. For example, I prefer to scroll right and left than to scroll all the way down to find content.
Conclusion
I learned that user research is paramount. It is basically the backbone of the project. I’m excited to conduct user testing and research to truly tailor my design for a human user other than myself. This was the biggest takeaway. Another takeaway is that as a new designer, it is so important to seek inspiration and implement feedback from mentors. Iteration, though frustrating at times, turned out to be my favorite part of the entire process! Flipping through the different versions is really humbling; I realized that a product always has room for improvement. Finally, I came to truly appreciate the well-designed products I use in my everyday life. Thank you, designers!
Next Steps
I look forward to incorporating user testing and learning more about user research methods, especially during the COVID-19 period. I’m also looking forward to delving deeper into developer-designer relationships and handoff tools. Lastly, I will continue to practice and sharpen my organization skills in design files.
A huge thank you to my mentor, Dhaval Gandhi. I couldn’t have done it without you!
Please feel free to leave any feedback or suggestions. I’m always looking to learn and improve.
If you’re looking for cool spots to check out around Seoul, let me know!
Thanks for reading :)
