önskar

 

Planning

As an exercise in Product Design I set myself the challenge to design a small mobile experience using the collaborative tool Figma. I would begin on Tuesday and see how much I could accomplish by Friday.

As excited as I was to jump into building I knew I need a plan for what exactly it was that I was going to be making. I sat down to write out what exactly the loop was that I was expecting users to take. Initially the site was imagined as a curated feed of products based on interests entered by the user. This concept was pared down as I began building to reduce the number of screens needed and allow for a higher quality given the 4 day time frame of this challenge.

My initial planning. It was interesting to see which features came to mind immediately when planning out a store (login, sign up, checkout) and which I only thought of after looking at existing shops.

My initial planning. It was interesting to see which features came to mind immediately when planning out a store (login, sign up, checkout) and which I only thought of after looking at existing shops.

It was here that I started examining a few stores of varying complexity to get a feel for how they had laid out their pages in relation to each other. I began with Ugmonk, a shop that after a bit of scrolling I quickly realized was mixing it’s product with a healthy dose of story telling. Users could learn about the making of its tshirts, the story behind the creation of the store and keep up to date with the goings on of the brand. It was interesting to see how if you clicked to the collections page, were products were laid out simply, the story telling aspect of the site completely faded away. However if you went to learn about the sourcing of the t’s or read the blog then products were continuously mixed in with the content.

A redone plan after exploring Ugmonk and Craigmont. The journey flow here is much closer to the later with the focus on the product.

A redone plan after exploring Ugmonk and Craigmont. The journey flow here is much closer to the later with the focus on the product.

I believe this shows a some real thought into the needs of the users of the site. Some come wanting to learn about Ugmonk and see how their tshirts are made and after that maybe make a purchase. By scrolling down the home page they are invited to read and watch about exactly this. For others who arrive either already knowing the story or simply without the interest the products are presented first with the story elements placed lower down on the page and missing entirely within the product section of the website. Both sets of users are given what they want without either interfering with the other.

From here I moved onto Craigmont a site with a much smaller team behind it and fittingly a much tighter focus on a smaller selection of product. The home page for example consists only of products, the focus is kept tightly on what the user is there to purchase.

After spending time examining the design of some existing stores I realized that although I might have been able to visually design something more complex (like my initial birthday calendar meets pinterest idea) taking the time to plan and research had given me a much better understanding of what exactly it was that I was building and what small details I would now know to include.

With such a short time frame I was counting on Figmas component feature to speed up building. Each time I created an asset that would appear multiple times I would create Master component to be set aside.

With such a short time frame I was counting on Figmas component feature to speed up building. Each time I created an asset that would appear multiple times I would create Master component to be set aside.

Keeping it Simple

The guiding principle for this design was to keep it simple. I wanted the design of the site to get out of the way of the user on their way through the site and to compliment rather than compete with the products. This also meant I wanted to pay special attention to things like spacing which would be extra noticeable given the sparseness of the design.

Mobile First

With a larger and larger percentage of traffic coming from mobile browsing I designed the site with thumbs in mind. Largely this meant being mindful of the spacing between actions (especially for users who might have reduced dexterity) and limiting the length of time and number of times the user would need need to spend reaching towards the top of the screen.