URBAN JUNGLE
Designing a product strategy and responsive website for a local consignment store
UX Design / UI Design / Branding / Prototyping / User Testing/ Strategy
BACKGROUND:
Urban Jungle is a consignment store in Minneapolis that specializes in both limited and vintage clothing, shoes, and accessories. The business focuses on the emerging resell culture as well as the ecological benefits of consigning. Currently Urban Jungle does not have a website and operates through their storefront as well as their Instagram holding around 10K followers. Urban Jungle wants to launch a brand-new website that showcases what the store has to offer.
PROBLEM:
Urban Jungle needs help to improve their site usability and update their online presence, as well as maintaining and expanding upon their current brand.
OBJECTIVES:
To design a responsive website for Urban Jungle customers
To develop Urban Jungles’s branding to be consistent with its current brand direction.
PROCESS:
01. RESEARCH
Market Research / Competitive Analysis / Contextual Inquiry Interviews
MARKET RESEARCH:
I first familiarized with Urban Jungle and the consignment market. The store not only values having a captivating inventory, but it also prioritizes the overall consigning experience. As a matter of fact, it is apparent that Urban Jungle’s popularity is due to the memorable experiences they are able to create in-store and on social media. My research also shows how the consignment market is currently gaining traction, which means an online presence is crucial for competing in the market.
• Secondhand Market Will Reach $51B by 2023.
• Resale has grown 21% faster than the retail apparel market over the past three years.
• Total secondhand apparel market to double in 5 years with resale sector driving the growth.
• 64% of Women Bought or Are Now Willing to Buy Secondhand Products
• 59% of consumers expect retailers to create clothes ethically and sustainably.
• 56% of 18-29 year old’s prefer retailers that offer new arrivals every time they visit.
- (ThredUP lists 30k new items every single day. 150x more than H&M.)
• Resale Powers Apparel Rotation, Not Accumulation.
• 74% of 18-29 year old’s prefer to buy from sustainably conscious brands.
- Buying one used item reduces its carbon footprint by 82%.
• 40% of consumers now consider the resale value of an item before buying it. That's nearly a 2X increase from 5 years ago.
COMPETITIVE ANALYSIS:
To better understand customers expectations and how Urban Jungle can position itself against top competitors, I identified stores that target a similar audience to Urban Jungle and analyzed them based on their online information. Overall, Urban Jungle seemed to be doing all the right things to gain popularity within the Greater-Minneapolis Area, but a stronger online presence could launch the business even further and help in developing a wider audience.
Competitive analysis can be viewed here.
CONTEXTUAL INQUIRY INTERVIEWS:
To learn more about the customer experience at Urban Jungle, I conducted contextual inquiry interviews with 5 Customers. The interviews consisted of me asking about their experiences at Urban Jungle and other consignment shopping experiences. I designed my questions to discover customer needs, goals, and frustrations. By the end, I was able to learn more about who Urban Jungle’s customers are and how the business interacts with them.
Gender: 4 male / 1 female
Age: 16-25
All Minnesota residents
02. DEFINE
Empathy Map / Persona / POV Statements + HMW Questions
EMPATHY MAP:
After talking to my interviewees, I constructed an empathy map by organizing the data points from each interview dialog into groups. I was able to identify the user needs based off of the most frequent patterns within the user data.
PERSONA:
Next, I created a persona “John” to represent the findings synthesized from the empathy map. John is Urban Jungle’s target customer, somebody who wants to have memorable experiences consignment shopping with good company. By giving context and personality to the research data, we can better empathize with the target user throughout the design process.
POV STATEMENTS & HMW QUESTIONS:
After defining the target user, I created point-of-view statements to frame the insights and user needs. From these statements, I created how-might-we questions that encourage ideating solutions for John’s needs.
03. IDEATE
Product Roadmap / Sitemap / Task Flow / User Flow
PRODUCT ROADMAP:
Starting from the how-might-we questions, I brainstormed as many solutions as I could think of and chose several features to prioritize within the website design. I chose features based on feasibility, how many people the feature would impact, and how much impact the feature had on each person. The roadmap made it easier to focus on several key features for solving John’s needs, avoiding becoming overwhelmed with possible features to implement.
SITEMAP:
Next, I created a sitemap in order to visualize how the information can be structured such that the user can intuitively navigate throughout the website.
USER FLOW:
To analyze the flow throughout the website, I mapped out two user flows that were based on common scenarios I found from the research phase. Examining the the sequence of user actions for each scenario gave me a better understanding about how to craft intuitive experiences through the UI.
TASK FLOW:
Next, I explored the flow in more detail by constructing a task flow. I based my tasks off the potential actions my John would preform. The task flow helped me think through the user’s process in more detail and which information is most important.
04. DESIGN
Sketches / Mid-Fidelity Wireframes
SKETCHES:
For designing the UI, I started out with rough sketches of the essential pages. I was able to present my ideas to others and gain constructive feedback at an early stage of the design. During this process, I referred to examples of competitor websites and studied existing design patterns that make for a more intuitive user experience.
MID-FIDELITY WIREFRAMES:
I then created mid-fidelity wireframes in Sketch, including desktop, tablet, and mobile versions for each page. This helped me focus on the basic layout and visual hierarchy of the website across responsive screens.
05. PROTOTYPE
Mid-Fidelity Prototype / Usability Testing
MID-FIDELITY PROTOTYPE:
Before creating high-fidelity wireframes, I wanted to gain usability feedback about the current design without worrying about the visuals distracting participants or biasing their feedback. Therefore, I created an InVision prototype using the mid-fidelity wireframes in preparation for usability testing.
USABILITY TESTING:
Objectives:
To determine if users looking consignment opportunities are satisfied with the information on the website
To test if users can find necessary information about the our online consignment selection
To gain feedback about the overall usability of the website design
User Tasks:
Log in to account
Find and comment on featured blog
To use search function to find item
Review item analytics and complete checkout
Results:
I conducted usability testing at a coffee shop next door to Urban Jungle with 4 participants who have a similar background to our persona, John. From direct observation and audio recordings, I was able to collect valuable usability feedback from target users.
06. ITERATE
Affinity Map / Branding / High-Fidelity Wireframes + Prototype / UI Kit
AFFINITY MAP:
I created an affinity map to synthesize the usability findings, identifying reoccurring behaviors and feedback. This allowed me to better understand the usability of the current design. In the end, the synthesized data indicated a need for hierarchy revisions and an analytics preview feature.
BRANDING:
Before moving into high-fidelity wireframes, I created branding guidelines to make sure the branding is cohesive and agrees with Urban Jungle’s existing branding efforts. I noticed Urban Jungle used orange in all their brand and social media in accompaniment with either a blue or an orange. Additionally, I found inspiration through the recycling and ecological aspect of consignment/reusing clothing. Off-White is a very popular resale brand known for using recycled and salvaged materials put together with a lot of stitches and industrial aesthetics. I looked to their most popular shoes for inspiration. The shoes I chose all have gray scale components throughout the soles, base, and tongues. Additionally, the Nike symbol is stitched on with blue and orange thread on every shoe.
HIGH-FIDELITY WIREFRAMES + PROTOTYPE:
Finally, I applied the branding and styling to the wireframes in Sketch and made an updated prototype. The deliverable showcases the polished look and feel of the website, which helps convey the design to people such as stakeholders. Feel free to view the desktop prototype in InVision using the button below.
UI KIT:
While prototyping, I maintained a UI kit in order to document UI elements and patterns for future reference.
REFLECTION:
Overall, this project was relatively straightforward because I have done an e-commerce case-study in the past and I am passionate about consignment shopping. Some of the main takeaways were improving my skills in responsive web design and developing branding with well-defined audience expectations. Moving forward, I’d want to share my designs with developers and see how we could implement the website.
NEXT STEPS:
Work with developers to launch the website
Gain usability feedback
Continue organizing design deliverables for handoff