Overview
Kokorokoko is a local vintage clothing store in the Wicker Park neighborhood of Chicago, also conveniently the neighborhood I live in! Kokorokoko has been around in Wicker Park since 2009 and is a staple of the Wicker Park clothing scene, specializing in vintage clothes from the 80s and 90s. Most of their sales are done in person at their only location, but they are looking to expand their digital presence and be able to sell more clothes nationwide.
Problem
Kokorokoko has a major disconnect between its successful social media accounts and its lack of digital sales. All e-commerce sales have been through the platform Etsy, which is decreasing to a halt. Meanwhile, their Instagram has over 10k followers and solid engagement.
Goal
Create a new, fully responsive, website that will integrate e-commerce features, update areas of need, and utilize social following to increase digital sales with a new, responsive web design. The website should also reflect the fun, energetic, and bubbly aesthetic that the brick & mortar shop currently has.
Duration
4 Weeks
80 Hours
Roles
UI/UX Designer
Brand Designer
Deliverables
Responsive Web Design
UI Kit
Industry
E-Commerce Fashion
Local Business
Before & After
Old Homepage
New Homepage
Project Timeline
Similarly to most UX projects, the design process is never simply linear. My design process features multiple areas for revision, iteration, and improvement along the entire process.
Research
User Interviews - Competitor Analysis - Persona Creation
Key Interview Findings
Vintage shoppers who shop online are often looking for specific items and niche products. Having detailed product descriptions are an asset.
Shoppers who go in person often look for an experience, and online is more for utility and convenience.
Having the web store link to Etsy is disruptive to the flow of the user, making it open another app or suggest a download of another app.
Utilizing the “link in bio” on social media linking the Koko website is a smart way to get some web traffic to the site, the actual website just needs to be optimized for that function.
User Interviews
5 ideal users (Vintage shoppers, and past customers) were interviewed about their usage of social media and online shopping and then were asked to use Kokorokoko’s current website to attempt a purchase. Key findings and insights were compiled to highlight pain points, areas of improvement, and user needs.
User Personas
After collecting & understanding customers' needs, frustrations, and motivations, I created 3 user personas with different Archetypes. These personas were used in making design decisions and gave the broad scope of users a visual representation.
Competitor Analysis
Kokorokoko’s direct competitors include some of the other local vintage and thrift stores that are popular in the Wicker Park area, specifically those with a strong online presence and eCommerce sales.
Competitors
The 3 chosen competitors that Kokorokoko will gain the most insight from are other Chicago local vintage stores. The stores chosen are Lost Girls Vintage, The Pop-Up, and UnaMae’s. Key findings from researching these stores can be found below the logo images.
Key Competitor Analysis Findings
Many online vintage stores sell their items “1 of 1”, which means once they are sold they are marked as “Sold Out” and are left on the site as an archive.
Having a “Featured Collection” or “Seasonal Collection” is a great way to promote new items and have a CTA on the homepage.
Social media channels (specifically Instagram, Facebook, and Tik Tok) are heavily used by many vintage stores and should be integrated into the website.
A good and friendly contact page is a must for a small brand.
Many vintage websites do NOT have a large stock of items for sale, mostly specific curated items with very detailed descriptions.
Good and consistent photography is key when displaying items.
Define
Sitemap - Task Flows - Wireframes
Sitemap
The Sitemap was created to outline the basic information structure of the site, stemming from the homepage. The sitemap consists of the navigation, sub-navigation, footer, and homepage outline.
Task Flow
A task flow was utilized to represent a user’s journey through the purchasing process from a social media origin(Instagram). First, there is the old task flow Kokorokoko is currently using, and second is the new task flow with the addition of the new mobile responsive website. It shows how the addition of the new responsive web design will create a smoother user flow with fewer interruptions and switching from app to app.
Wireframes
Wireframes contain the blueprint for the overall product and begin as the base structure for the entire site. The wireframes for Kokorokoko were created with responsiveness and clarity in mind at every step.
Old task flow, using 3 different apps to purchase an item online from
their previous Etsy store system.
New task flow, streamlining users straight to their new responsive
website that they can purchase directly from.
Style
The Kokorokoko Aesthetic
If you were to go into the physical store on Milwaukee Ave, you would immediately understand that this store has a very bold, colorful, and a little bit messy aesthetic going for it. With hundreds of cool vintage collectibles and an amazing selection of ’80s and ‘90s intense color patterns across all clothing items, it was important to maintain this aesthetic in the responsive web design.
Style Tiles
A style tile is an extremely useful visual communication tool used to visualize the look of the website or page. I created multiple style tiles to experiment with the playful and bold direction that the store had, and ended up choosing the style that was inspired by Kokorokoko’s outdoor mural painted on their low-key back entrance to the store.
Inspiration photos of Kokorokoko store:
UI Design
Responsive UI - UI Kit
Responsive UI
Integrating fun and exciting UI was an area that I made sure to emphasize to highlight the whimsy of Kokorokoko. Along with keeping the design within the existing aesthetic, prioritizing responsiveness (especially mobile) was another main area of focus to best utilize Kokorokoko’s current social following. Examples of these areas of focus are shown below.
UI Kit
Kokorokoko’s UI is one of its most unique features, so having a clear UI kit is an essential deliverable product. The UI kit features typography, specific typography heading styles, buttons, icons, and many other essential UI features.
The navigation holds the key tools used to navigate the site while also introducing Koko’s playful style and feel.
The Insta - Spotlight is a key area bridging Koko’s social following onto their new website. This allows them to shout out and promote followers wearing their clothes on the website and on social media, highlighting followers who shop and tag @kokorokoko.
Revisions & Improvement
UI Improvements
Keeping the UI fun and also cohesive was an area that was constantly improved upon and iterated, and shown below are a few improvements made along the way that helped unify the overall look and differentiate the various sections of the new website.
Mobile Navigation
More decorations were added to the mobile navigation to match the visual flow that the tablet and desktop versions had.
Trending Item Highlight
Under the Men’s and Women’s category pages features an area to highlight specific trending items. The original design re-used the same pattern as the Instagram highlight on the homepage, the new design features elements from the homepage highlight with a few minor tweaks to differentiate it overall.
Next Steps
Learn - Iterate - Repeat
Key Takeaways
In-depth user interviews lead to quality takeaways and accurate user stories.
Visual aesthetics need to reflect the energy, vibe, and feel of the overall product as a whole.
The balance of creativity, playfulness, and individuality can quickly overwhelm and needs to be finessed to perfection.
A high-quality research phase sets the groundwork for a successful product design.
Next Steps
Format all social platforms to reflect the new look of Kokorokoko.
Integrate new ways of payment to the checkout process (Google Pay, Apple Pay, Shop, etc.).
Create influencer & giveaway programs to expand upon social media reach.
Finalize designs and have files ready for handoff to the development team.
