Developing the design and responsive website for Etnic Asia Co. - an e-commerce website dedicated to selling and promoting upcycled and sustainable products.
ETNIC
Project Details
Role:
Researcher UI Designer UX Designer
Goal
Designing and developing a responsive website and branding for EtnicAsia Co. which would boost customer awareness of their upcycled products, and efficiently help them in scaling production to match rising online demand.
Tools Used:
Figma, FigJam, Miro, Invision, UsabilityHub, WIX
Tasks Performed
Timeline:
August 2023 - September2023
4 weeks
Since this was an independent freelance project, I was responsible for end-to-end product design and development.
Tasks performed by me during the course of this project were:
Platform analysis and user research
User Persona
Information Architecture
Wireframing
Visual Designing
Prototyping
Usability Testing
Website development
CONTEXT
The clothing industry generates an estimated 92 million tons of textile waste each year globally, a substantial portion of which ends up in landfills.
As the fashion industry continues to thrive and consumer behaviors evolve, the consequences of the linear fashion model, characterized by production, consumption, and disposal, have become evident. Etnic is an online shopping platform, seeking to address the environmental issues arising from this unsustainable practice by selling and promoting sustainable products, thus mitigating landfill-related challenges.
Etnic originated with a mission to create an environmental impact through the sale of upcycled and sustainable items. Pratibha, the business owner, recognized the potential of reaching a broader audience by establishing an online presence. Observing the concerning consequences of excessive consumption and waste in fashion and retail, Pratibha was motivated to create an online platform highlighting the aesthetic and life-transforming value of upcycled products.
Problem
Inadequate awareness regarding sustainable living
Upcycled products often face stigmas and customer challenges due to misconceptions about quality and style.
Building brand awareness and differentiation
Establishing brand awareness and differentiation can be challenging in a crowded industry where established players dominate consumer attention.
Scaling production and meeting demand
As the business grows, Etnic faces challenges in scaling production to meet increasing demand for their upcycled & sustainable products.
"How might we boost value for upcycled products, while uniquely branding ourselves, and efficiently scaling production to match rising online demand?"
THE BIG QUESTION
Solution
Making Etnic recognizable and familiar to potential customers through unique value propositions that resonate with the target audience, establishing a unique identity for the business.
Implementing a robust inventory management system on the website to track product availability and demand in real-time. This helps prevent overstocking or stockouts, ensuring production aligns with actual demand.
Showcasing high-quality & unique upcycled products and building trust through transparent communication.
Let’s discover how did I achieve these results!
EMPATHIZE
“How can we accurately understand and evaluate the user's requirements from a website supporting sustainability and upcycled products?”
Research
Let’s Strategize!
For my early research phase, I created a User Research Plan comprising of research methodologies such as competitive analysis, user survey and user interview questions. The research plan helped me with:
ensuring that research efforts are aligned with project goals from the beginning
conducting the research in a systematic and organized manner
identifying potential risks and challenges early on
Competitive Analysis
Who are we up against?
My client approached me with an idea to create a responsive website for sustainable and upcycled products. Our initial discussions included identifying competitive services, like Limón, Refash and Nimbu. The focus was on the design of their interfaces, navigating through the websites and examine the unique features they offer.
User Interview
Getting to know our users
Once competitor analysis was completed, the focus shifted to delving into user interests and needs through individual interviews. Through my user survey noticed that participants of the survey were mostly females and hence, filtered out 5 participants for the interview.
A total of five 1-on-1 interviews via video call on Zoom was conducted, each one lasting up to approximately 1 hour.
Age: 20-40 (environment conscious buyers)
The goal of my Interview script was to understand the motivations, preferences, challenges, and needs of buyers who actively make sustainable lifestyle choices and their expectations from a platform that supports sustainable living.
Based on user insights and feedbacks I created an Affinity Map to to identify user needs, goals, motivation and pain points, ultimately gaining a deeper understanding of their requirements and areas of difficulty.
User Interview Insights
What users want?
Users value transparency regarding product quality, description, and price on the platform.
Product quality, aesthetics, and price are key factors influencing users' decisions to purchase upcycled or pre-loved products.
The platform's authenticity, as reflected in online reviews and ratings from other users, is important to users when choosing where to shop.
Users have concerns about the hygiene and quality of pre-loved products, particularly intimate items, unless their source is known.
Users prefer online thrift shopping due to the vast number of options compared to physical stores, and they desire efficient filtering and sorting features on online platforms.
Users are motivated by sustainability and the uniqueness of shopping in upcycle stores, while also being attracted to offers and sales.
“ I appreciate clear pictures and description of products. Important information shouldn’t be hidden.”
"I'm quite cautious when it comes to online shopping. I want to be sure about the platform's trustworthiness. Also, I've had experiences where the product quality didn't match up, so that's a big concern for me."
"For me, the key factors are the product's quality and price. And of course, it's got to match my style too."
“When I'm shopping online, I like to narrow down options based on what I'm really looking for. And let's be honest, the first thing I usually check for are the offers and discounts – that's what really grabs my attention!"
With business ambitions and user goals in the mix, the challenge was to intertwine them into a win-win for both the client and customers. For this I created a Vienn Diagram to helped establish primary objectives and determine key focus areas before proceeding with the next steps.
DEFINE
“Shaping our design’s direction.”
User Persona
Putting user needs and motivations in the spotlight
Using insights from both the client and the users, I developed two personas that capture their goals and challenges. Through these personas the primary emphasis was on individuals who prioritize sustainability, making environmentally conscious choices when shopping for a product.
Persona 1 - Aisha/ The Business Owner
Persona 2 - Felin/ The Consicous Buyer
How Might We (HMW)…
Ensure website authenticity to build user trust and credibility?
HMW
Effectively showcase the high qulity of the upcycled products to align with both user and business goals?
HMW
Create a streamlined and delightful purchasing journey for our buyers?
HMW
IDEATE
“Giving Ideas Shape.”
The ideate phase in my UX research was a creative powerhouse. The brainstorming process allowed me to layout the information architecture of the website and ensure that it offered a seamless and intuitive navigation for the users.
Sitemap
For ensuring user-friendly browsing, it was important to have the website’s navigation structure in place. This is where Sitemap came into play. The Sitemap acted as a visual roadmap, helping me outline the entire platform's structure and content.
Userflow
After creating the blueprint (sitemap) for the website, it was time to map out the flow of the user’s journey across the platform. I thoughtfully created Userflow ensuring that each user interaction and transition is logical, intuitive, and aligned with user expectations.
Taskflow
Creating a taskflow was essential in mapping out the step-by-step journey for users on the platform. It highlighted each step they would take to complete tasks, making sure there are no roadblocks or confusion.
Inorder to make the shopping easier for the buyers, I created the taskflow for 2 different tasks:
User buying a product without Logging In to the platform (when users want to ‘Continue as a guest’)
User buying a product after Logging In/ Signing Up to the platform
Conceptualizing Wireframes
I used InVision Freehand for rapidly sketching lo-fi wireframes remotely. It is also a great tool when collaborating with other designers. I love to draw and sketch, but you save a lot of time with Freehand as you can quickly duplicate screens and components without wasting too much time on the details.
I referenced the client's brief, Site Map, and Feature Roadmap to craft these wireframes. Each of these screens were then discussed with the client and approved for further development.
Upcoming Product
Digitizing Wireframes
Crafting visual blueprints.
During this phase, since timeline was cut short from the client’s end, my focus was on preparing a wireframe that could seamlessly transition into a prototype. I dedicated effort to refining numerous UI elements, establishing a grid layout, finalizing typography, constructing components, and selecting suitable icon sets.
This approach helped in accelerating the creation of the Style Guide down the line. I also referred to websites of competitors to guide my design choices, incorporating recognized industry patterns where feasible.
Homepage
All Products
Cart
Home & Living
Contact Us
Product Page
About Us
PROTOTYPE
“Bringing concepts to life for testing and validation.”
I chose to create a prototype of my basic design now because if users suggested big changes during testing, it would be easier to make them at this stage rather than in hi-fi wireframe later.
My goal was to test my assumptions for the task flows and its functionality along with the visual design. I worked directly in the Figma file to create a click-through prototype.
USABILITY TEST
“Gathering user feedback, identifying improvements, and refining the design to enhance user satisfaction.”
Goal:
1. Assessing users' ease of adapting to the platform and its mission.
2. Grasping user requirements and anticipations regarding the current design.
3. Identifying opportunities to improve user experience while aligning with business objectives.
Tasks tested:
Gain an understanding of the platform's core message and its social influence.
Browse through each category of the platform.
Place an order after going through product details.
Number of participants: 5 (3 from initial user interview phase & 2 new users who are conscious buyers.)
Duration: 3 hours
Number of tasks: 3
Putting the medium fidelity prototype to test provided some great insights. My next steps included a discussion with client on incorporating these user needs into our design.
Based on this discussion, I created a priority revision matrix before proceeding with high-fidelity wireframe designing. I prioritized the feedback based on its impact on usability and alignment with the project goals. Issues that could potentially hinder the user experience or deviated from the project objectives took precedence.
This helped me to focus on the areas that needed immediate attention vs areas that could be developed during the later stages of designing.
ITERATIONS
Refining ideas until they resonate perfectly.
A crucial aspect of this phase was the incorporation of feedback received from mentors and peers during the mid-fidelity user testing stage. Every critique and suggestion was a stepping stone towards refined designs.
So let’s see explore the iterations that were made to elevate the usability of the platform!
What changed?
Added a clear brand message section on the Hompage to ensure clarity and brand identity amongst users. This will also ensure brand differentiation in buyer’s mind.
Before
Before
After
What changed?
A concise and attractive subscription message was added to ensure that buyers subscribe to the platform. The message also indicates the information the buyers can expect on subscribing.
After
What changed?
The option to check “Estimated Delivery Date” is added. There is also a feature to add a note to ensure smooth delivery for the users.
The “Continue Shopping” button was removed as users found it to be confusing on the checkout page.
DESIGN
Shaping Solutions.
Branding
Redesigning Logo
The client wanted the logo to be re-designed to convey the brand message clearly. The phrases provided in the brief that the client would like her brand logo to embody were:
Clean and structured
Eco-friendly
Focus on sustainability
Keeping these qualities in mind, I created multiple logo designs using Canva.
The 2 main considerations while creating the logos were:
The logo should be easily scalable on a mobile screen
Provide the client with a variety of options to choose from
The original logo
The client was excited to see all the logo variations and decided to go with the below logo as she felt that was the closes to the brand values.
The final logo
UI Component Library
While creating a UI component library, my focus was on making these components versatile yet easy to use. Each element had to adapt seamlessly to various design scenarios and screen sizes. I constantly sought input from peers and mentors to ensure the components met industry standards and user expectations.
A well-maintained UI Component Library ensured design consistency and significantly sped up the design process. It's not just about aesthetics; it's about working smarter.
The Final Product
The Evolution of an Idea
THE CHALLENGE
Working with limited resources & a lot of ambiguities.
Later into the project, we discovered that the Client wasn’t able to onboard a developer. This meant that we didn’t have a developer on the team & didn’t know which platform should be used to develop the website.
HOW DID I OVERCOME THE CHALLENGE?
Ensuring a seamless user experience across various devices was a top priority. I learned to adapt and optimize designs for different screen sizes and orientations.
Creating the website allowed me to communicate not only the layout but also the interactive elements. My journey involved developing a consistent visual language which included the establishment of a refined color palette, typography choices, and the integration of icons and imagery.
Some Key Screens and Design Decisions behind them:
The Client was satisfied with my hi-fi mockups and since the website had to go live by the next week, I was asked to work on the website development as well. I researched multiple platforms and keeping the business constraints in mind chose WIX. As a novice freelance designer, it was encouraging to see the Client's trust in my ability to create her website. Consequently, I dedicated a day to acquaint myself with WIX and proceeded with website development.
End-to-end website development
USABILITY TEST
The Moment of Truth
User testing round 2
Due to time limitations I couldn’t perform usability test before the website went live. Once the website went live, I performed a quick usability test with 5 participants to ensure the website was working smoothly and to incorporate any last minute changes wherever necessary. The focus was to assess the website's intuitiveness and identify any potential bottlenecks that could hinder user navigation during the shopping process.
The participants were asked to Login to the platform as a guest and perform the process of shopping on the platform in 3 mins. This quick testing ensured that everything is working as expected and there was no roadblock.
The Outcome:
The results of the quick user testing were surprisingly positive. Users were able to complete their tasks within the stipulated time frame, indicating that the website's core functionality was aligning with user needs. There were no major bottlenecks or hurdles that hindered their progress.
NEXT STEPS
Future Considerations
Conduct another round of user testing in a few months to ensure the website continues to meet user needs and expectations, and any emerging issues are addressed promptly.
I hope to work hand in hand with a developer to elevate the user-experience and business goals from this website.
Follow up with business to ensure the seamless working of the website.
Retrospection & Takeaways
Working on this project was a collaborative and learning experience. I worked closely with the Client throughout the process and was able to meet the business goals, user goals and technical considerations throughout the process.
As the sole designer, I gained valuable experience of wearing multiple hats within a product design environment.
Building the website on WIX proved to be an efficient way to understand the developer needs from a UI/UX designer.
If I had the time and resources, I would have liked to conduct user testing after making revisions to the design and before it went live.
