Project 2 — Shopmain.com
For my second project at Red Academy, I redesigned the web app, shopmain.ca
Main St. has become increasingly popular for its food scene. There are craft breweries, unique coffee shops and restaurants that are sought after. However, the boutiques and stores that are just as unique have been overshadowed.
The goal of this project was to create an web app that included stores and items sold on Main St. and to bring the experience of shopping on Main St. online.
Research
For research, I conducted a survey with 23 responses and 6 user interviews. The following 3 slides are a summary of the research findings.
Survey findings: majority of the survey takers (~70-%) preferred to shop in-store and only shopped online when they were certain about buying a product. This matched the finding from user interviews. Most interviewees preferred to physically check the item first then look online for the item
Most of the interviewees had a creative hobby (e.g. photography, writing, crafts) and were involved in the local artist community, which played a big part in their decision to actively shop local products. The interviewees also did not mind paying more for a higher quality product.
From the research, I kept these insights in mind throughout the project.
- People are familiar with Main St. (just not shopping)
- People shop online with a product already in mind
- The web app needs to showcase the uniqueness & locality of the products
Planning
Emma is a recent graduate who just started her career in accounting. She enjoys hanging out with her friends and photography and writing in her spare time.
She is fashion-forward and likes finding out about new brands and styles She also likes to support local artists and products made by local designers and she goes to local markets and pop-up stores whenever she can.
She has gone to Main street to get food or drinks or for to take photos. She has window-shopped a few times on Main street and has bought a few items from consignment stores.
Emma met a friend and really liked the floral pattern dress her friend was wearing. It was floral-patterned and she hadn’t seen the dress before.
Her friend told her she bought it at a store on main street but can’t remember the name of the store. Her friend tells her she can go to the shopmain.ca website and look for it if she wants to.
Emma wants to try on the dress to see how it fits but she knows there is a possibility that the store might run out of the dress since many stores on main street only carry a few number of items.
She wants to pick up the dress at the store over the weekend if possible so she can try the dress on at the store. Emma also wants to buy a pair of locally made earrings that are preferably on sale.
Usability Testing
The biggest lesson I learned overall with this project comes from usability testing. I didn’t think the paper prototype was very important so I did a very rough sketch of the screens and left some of the words blank or as a blur. I also started the mid/hi-fidelity screens without testing the changes I made to the paper prototype.
This bit me in the back when I did testing with the hi-fidelity screens. I had to make numerous changes and it took way longer because I had to change all of my hi-fidelity screens.
These were some of the changes I made:
- Homescreen: I removed the search bar after finding out that the first thing people would do is to type ‘floral dress’ in the search bar instead of navigating through thee website. Instead, I brought the “Men” and “Women” from navigation to the content page.
- Filters: filters and breadcrumb trails were the hardest things to figure out for me. First, I changed where the filters were. I had it right under the breadcrumb trail and that made the functionality unclear. So I moved closer to the list of items listed. I also changed the wording and what goes in the side bar menu. This is something I would explore more with testing if given more time.
