.png)
.png)
Industrial Design Project (IDP) to create wireframes for Group Buying and Product feed for a mobile version of the Client’s website.
Key Skills
Market Research, Sketching, Workflows, Wireframing.
Tools
Miro, Figma
Timeline
4 weeks
Design Team
CEO and Founder of TEND - James Lamming
UI/UX Design Team - Amrin Bharthu, Jiaqi 'Lucky' Li, Christine Kim
Discovery
1. About the client
TEND, a London (UK) based firm that started its journey in 2020 to provide an exceptional online platform for farmers. In simple terms, Tend connects farmers to buyers via online platforms in the same manner as Amazon does to business owners or Facebook to friends and family. It is designed in a manner where the buyer is connected with farmers directly. Tend facilitates this by providing delivery logistics thus acting as a backbone to these connections. Tend tangential these transactions in a manner so that connection between buyer and consumer simulate personal relations.
Why are they different from other companies in the market? As we are going digital in every key aspect of our daily living, Tend inspires and attempts to break the norms of buying and selling food items, by enabling farmers to sell directly to consumers without any interference from middlemen or corporates who usually stores food supplies in large quantities and often sell the same product to consumers at different rates based on demand. Here, tend allows farmers to sell directly to consumers, and farmers, on the other hand, could lower that overall operating cost and hence could sell at a cheaper price to consumers in a competitive market. Tend enables a human touch to one of the most important transactions between consumer and seller; food, thus providing social connection and user-friendly experience that in long run would boost trust, recommendations from friends and family that would further expand Tend’s growth.
2. Project Context
TEND wants us to design a wireframe about "The product feed" and "The group-buying process" for their phone version of their website.
Product feed: A file basically consisting of everything related to one or multiple products; more commonly multiple products including image, name, contents, etc., where seller submits that data to a variety of channels and products would be displayed including a comparison to same or similar products in a competitive market. The product feed could be altered manually or automated depending on the number of products.
Group buying: The process where multiple consumers come together to purchase from a single vendor mostly in hopes to get better prices. In the digital world, group buying is also becoming more famous in the service industry.
3. Remote Kick-off
We started this project asynchronously owing to the demographical barrier; different time zones. Our team planned to meet once weekly and provided updates to James weekly as well, however, he was flexible and understood team members' demographic barrier so he suggested a video presentation for weekly updates on progress. We divided our tasks among ourselves based on each member's strengths, for instance, research was my primary focus and sketching for the other, though we did provide inputs in all areas as needed.
Research
4. Research Backgroud
It started with James’s vision to socialize food, and somewhere he was influenced by the ongoing trend in Asian market such as Pinduoduo and Shihuituan, etc. To get insight, I looked into Pinduoduo, a small firm that rose to 57-billion-dollar company, in the time were online giants such as JD and TMall were dominating e-commerce in Asian market specifically, China. What Pinduoduo did was similar to James’s vision; that is a touch of personalization and creation of unique user experience by providing social shopping platform; Social shopping is what basically one seeks recommendation from friends and family for liked or unliked products of interest.
Pinduoduo, categorized buying in different categories, where merchant will put up product for sale at two different price single buyer and team/group buying, where latter would provide discounts on prices and there was no limit on numbers to form a group, team/groups were required to form in 24 hr so that items could be shipped within 48 hrs of forming a group. This way buyers ger better prices and seller could foresee demand of the product and analyze market needs for future. This group buying will be a good feature to add down the road in the application as Tend expands in near future.
Ideate
5. Work Flow
Post understanding the needs of the client and background research, we did a brainstorming session to create a workflow. The workflow for this project was designed by me with inputs from my teammates. As needed workflow was consistently updated based on the progress of projects and fine-tuning minute details that were required to complete the task.
We came up with 3 red routes:
1. Create a new group to group purchase.
2. Join an existing group to purchase as a group.
3. Receive a text to join a group about group purchases.
.jpg)
Design
6. Sketches
We assigned each red route to each team member to sketch out the design process. We worked for a week on this and met once completed, we each presented the red route sketch work and made changes as needed based on input from team members.
A/B testing
As our team was working asynchronously, we had different design layouts in our hands for the same segment for example appearance of check out screen, so owing to time constraints, instead of going to market for the feedback from the general public, we decided to get feedback from the client and James provided us with his recommendations. He suggested to combine both ideas however we also had some limitation as James was using Shopify e-commerce platform for tend, so we couldn’t merge certain elements for checkout screen layout. Below are some of the screens where we did A/B testing.
Hotchpotch of sketches
We then discuss each other's sketches and underlined the strong design elements in each sketch. After the review, we intermix our sketches together into one cohesive set of sketches that would help us design the wireframe next.
.jpg)
7. Wireframes
Wireframing started once the sketch was approved by James. We color-coded to assign wireframing tasks among team members, for instance, I worked with all screens coded with green as seen above.
Below is the video of our first draft of wireframes that we send to James.
James provided understated recommendations after viewing the wireframing.
-
The group buying button should lead directly to creating or joining the group for the product where the quantity of the product could be managed.
-
There was no option for the buyer to add multiple products, that would lead the buyer to go through the same buying process over and over, for instance, what if one wants to buy cherries, carrots, and tomatoes, he suggested that there should be an option where one can add all items at the same time such that it creates a unique group for them for group buying.
-
The person receiving the link from group purchase has the ability to buy only liked products such as cherries and carrots but no tomatoes from the example above.
These are our takes on James' recommendation.
-
We adjusted the flow so that users can directly go to the purchase option when clicking the group option button, still, they can view product details by clicking the picture.
-
We added the button “add more” to group buying purchases (screens 3a,5a, and 6a)
-
We updated all checkout screens and shopping cart screens to reflect the change of purchasing multiple items within one group. Users can also remove any specific items that they are not interested in.
-
We added how many more people are needed for each group purchase item to potentially encourage customers to share the group purchase with others.
8. Final Wireframes
The wireframes are clickable feel free to checkout.
9. Result and Next step
Our client James was very happy with the wireframes and praised us all for our work. Moving forward if I continue with tend, I would love to create prototypes for all the wireframe screens. The next step for this project will be a usability test and we as a team recommended to our client that due to time constriction of our project, we won’t be able to do it but a usability test is an integral element to check whether our design works or do we need to make changes based on the targeted market.
Conclusion
This project was a huge endeavor and the amount of time and resources that went into designing it was a great experience for me and my teammates.
It took a while to understand “The group buying” concept because none of us has ever had buying experience in that setting. The references that our client had given us were also from other countries. This definitely created some anxiety first, but our efforts to set a solid foundation helped us move forward.
Furthermore, If given an opportunity I would like to enhance this project by performing market research on UK markets to improve what changes and additions would make this wireframing more appealing given the needs of consumers in the UK.
“Unity is strength…when there is teamwork and collaboration, wonderful things can be achieved.” By - Mattie Stepanek.
We learned so many things from each other like the new functions in Figma or the design process, we believe the project was completed smoothly and I hope we will continue to grow as friends in future.