Blog

UX Design

Learn to Code by Doing It

Learning how to code is not easy. So one project I am most proud of is a website that I created and designed for my local grocery store: the Duc Loi Supermarket. The Duc Loi Supermarket is a mom and pop grocery store in the heart of the Mission District. The owners, Amanda and Howard are dedicated. They work hard. They help the community. If you walk into the store, you’ll often find them working with the staff, making banh mi sandwiches, and helping customers.

They inspired me to work on a project of my own: learning to code . Last Fall, I asked the webmaster of the original Duc Loi Supermarket website if I could revamp it.  I got the green light. I started phase 1 of the design process. I conducted a competitive analysis, market research, content audits, task analysis, user interviews, personas, critical tasks, sketches, wireframes, prototypes -- the whole shebang.That was the start of my life as a UX designer.

Fast forward to this past week. For Phase 2, I wanted to bring the site to life! Over the past week, I learned how to build a responsive, mobile-friendly and beautiful website using HTML5, CSS3 and jQuery. After a combination of Treehouse, CodeAcademy and Udemy, I built a responsive website for the Duc Loi Supermarket using Twitter Bootstrap 3. It’s a mobile first, open-source framework.

I dove right into hand-coding a custom responsive layout, a sliding carousel of food photography, scalable font icons and more. (Because I am a amateur coder, I had a friend help me iron out the kinks with the code.)

All of this speaks to the intrinsic motivation I have to build, design and innovate. I like to take the things around me and try something new. Along the way, I have to have the make-it-work mindset.

Leah Buley wrote a book called “The User Experience Team of One.” I highly recommend it because I can relate to her own journey. Challenges are at every corner. I often feel like a jack of all trades, master of none. I love the variety of work.  I’ll do some design, some research, some copywriting, some coding. At the same time, I feel as if I am spread thin.

I am learning as I go. I have to do the work on my own. I have support from other designers, my friends and family. They support me every step of the way. But in the day to day, sometimes I have to make it up as I go. I have to trust and defend my gut feeling.

The constraint of resources can be difficult. I work  from what I can find in books, the web, and resources my friends  and colleagues pass on. There’s only one of me and there’s a lot of work to tackle.

No one I know is doing this -- learning how to do the UX, the research and the coding for a website. I am charting my own course. When I show the work I’ve put in for the Duc Loi project to seasoned designers, they tell me, to be a designer, you have to be a self-starter.

In the broader picture, I am figuring out my career path, without a guide or a manual to follow. I am passionate and eager. Anything is possible. Doubt creeps in. After all, for me, this path is unknown. It’s a solitary experience. But, I love this process. I am learning so much everyday. I get to be creative every step of the way.

I am developing new skills. In the past six to seven months, I’ve learned how create clickable wireframes using Keynote. I’ve created high-fidelity mock-ups using Illustrator and Photoshop. I can do user testing and synthesize user feedback. Before this, as far as coding goes, I could only create an HTML iframe element. Now I can build a website based on a solid foundation for HTML and CSS.

My work evolves with me. I am in a special situation. I have an opportunity where I can challenge the status quo. I still have a long way to go, I still have to learn how to communicate. The Duc Loi Supermarket website project paved a way for me to create and learn.

**If you are interested in learning how to build a site like ducloimarket.com, here are my recommendations: