From selling to teaching
Launched in 2014, Cestlavic was originally an e-commerce platform where users can purchase a pair of handmade custom sneakers based on a design and brand of their choice. Now, Cestlavic aims to add a learning component to its platform and make shoe customization more accessible to a broader audience by helping people customize their own.
Due to the tight timeline (4 weeks) and the stakeholder’s current focus on pushing out educational content, we will be omitting the e-commerce component during this phase to focus on building out a platform where users can find creative inspiration and instructions to create their very own DIY custom shoes.
• Responsive website design that provides instructions and inspiration to people who are interested in making customized shoes
• Updated branding that appeals to a broad audience, while reflecting the stakeholder’s personality, style and values; this process will include a logo redesign
Catering to DIYers’ approach to learning and research
“Tutorials are supplementary to the one step that I can’t figure out.”
“Then piece together information…how to reupholster a cushion, repair vintage sofa springs…”
“I conduct further research and deviate from the tutorial if I’m using a different material or fabric.”
DIYers take a fill-in-the-gap approach to researching for tutorials, and the information (how to’s, tools, etc.) they seek for typically depends on the type of material or fabric they are working with.
Breaking down full project tutorials, which include multiple techniques from start to finish, into individual bite-sized technique tutorials gives them the flexibility to take what they need. Furthermore, allowing them to filter based on multiple criteria, including material/fabric and procedure, helps them find exactly what they are looking for with less effort.
Prioritizing information that DIYers value the most
“I don’t follow [tutorials] exactly, just a general idea — materials, general blueprint of techniques, chronological steps.”
“What materials do I need; how much is it going to cost; level of difficulty to see if I’m able to do it.”
DIYers refer to full project tutorials to get a general sense of what techniques, steps and tools or materials are required before diving into the details and conduct further research. They’d like to gauge the project’s feasibility before committing. By laying out this information up front in a concise manner helps them gain a good understanding right away.
“Need to think every step to know what tools I need.”
“It’s tough when you first start to know exactly what you need and when.”
I also linked the list of tools to the individual steps in order to provide some context on when and why they are used, giving DIYers more clarity on what they need if they were to deviate from the tutorial in one way or another.
A search system that doesn’t require the DIYer to be an expert
“Search terms are hard to find.”
“Things that just come up and you don’t even know what to look up.”
“Start by identifying what it is…finding out the name of the long cushion sofa I’m working on.”
DIYers often find the research process frustrating and time consuming because they have yet to become familiar with the technical terms associated with the exact subject they are trying to learn more about. Thus, the existing research process can be paradoxical in nature.
Creating a tag-based search system that matches with the filter options as shown above not only bypasses the paradox by relieving DIYers of the responsibility to come up with the search terms themselves, but also reduces confusion and effort through consistency.
Going in with a curious mind
I personally haven’t had much experience with shoe customization or DIY projects in general, so the entire process — looking for inspiration, researching, prepping and executing — is unfamiliar to me. Naturally, I asked myself questions that would help me paint a full picture of DIYers’ current experiences:
• Who are the current DIYers?
• What motivates them?
• What is the current process like?
• Does the process differ based on the DIYer’s experience?
• What do they like and dislike about the current process?
• What do DIYers look for when they are preparing for the project?
Conducting market research
Market research was conducted by reading studies and reviews of competitors, which were determined via discussion with the stakeholder.
• Self-limiting beliefs or lack of confidence in skillset is a major roadblock for people with little DIY experience. These beliefs can be fueled by complicated-looking tutorials
• Even if a tutorial is well documented and comprehensive, DIYers often need additional pieces of information due to one’s own creative visions or variations in materials, fabric or tools used
Talking to people with DIY experience
All interview participants have had experience gathering inspiration and instructions for DIY projects, which ranged from stitching clothes to reupholstering furniture. I interviewed six participants that aged between 25 and 30.
• DIYers search for specific techniques along the process to fill in the gap, like piecing together a puzzle. The keywords they use to search for these techniques are largely influenced by the type of material, fabric or tools they are using
• As DIYers get more advanced and creative, they combine different materials and techniques
• DIYers refer to full tutorials for materials needed, a general blueprint of techniques and the chronological steps involved
• DIYers categorize instructions into two categories: 1) things they have to do across the board (basic instructions) and 2) things that are interchangeable and customized
• DIYers want to understand alternatives and the best among those alternatives; this applies to materials, tools, and techniques
“I just Google or YouTube those specific techniques instead of following the tutorial…So for like painting, I’ll look up how to paint clouds specifically and not go back to a tutorial on how to paint a landscape.”
Synthesizing insights from user interviews
To uncover the most common problems or frustrations, I organized the individual user interview observations into different themes.
In order to pick a problem theme that seems to be the most valuable to solve for both the stakeholder and the users, I narrowed the groupings down to three key insights based on size as well as the number of people that had mentioned it:
• Uncertain about the right tool. What seems important to DIYers is knowing that they have the right tools and materials, especially when certain components differ from what’s shown in the tutorial. For instance, if the DIYer decides to use leather instead of suede as shown in the tutorial, what size needle does the DIYer need instead?
• Fill-in-the-gap approach to research. I think this insight is the most eye-opening for me personally. One of my assumptions going into the research phase was that DIYers followed tutorials from start to end. To the contrary, as I learned, DIYers refer to tutorials for a basic understanding of the steps, skills and tools involved — full tutorials are supplementary. Once they have a basic understanding, they adopt a technique-focused approach to research, looking to learn only those specific skills that they have less experience with or that are relevant to their project.
• Uncertain about what to look up. Their process of looking for techniques, however, has proven to be time consuming and frustrating. This is largely due to DIYers’ unfamiliarity with the technical terms involved — they don’t know what to look up for.
Keeping the process user-focused
To keep the ideation and prototyping processes user-focused and myself reminded of who I am designing for, I created a persona based on the information gathered from the user interviews as well as the insights from the affinity map exercise.
It is worth mentioning that, as validated through market research, there’s another group of audience in the custom shoes sphere — sneakerheads. I decided, however, to prioritize the above persona for this project due to the following reasons:
• The above persona comprises the vast majority of the competitors’ audience
• Buying from external sources has long been sneakerheads’ way of collecting one-of-a-kind sneakers. DIY has yet to get a foothold in the sneakerhead world (the Shoe Surgeon is a pioneer on this burgeoning front)
Identifying the main problem to solve
To reframe the design challenge into actionable steps, I came up with a problem statement and a “how might we” statement for each of the insights uncovered from the affinity map exercise, while making sure they resonate with the target persona.
The second problem statement listed above proves to be a higher priority because not only will it provide the most value to DIYers based on the number of mentions during the user interviews, but it also directly informs the business on how to achieve its primary goal by providing insights into how DIYers want to learn.
Brainstorming for product features
Having identified the main problem, I was able to jumpstart the brainstorming session based on the corresponding HMW statement. The features listed below have been prioritized according to the effort vs. impact rubric.
• Tags. Keywords attached to each tutorial based on the materials, fabric and tools used, as well as the type of design and technique being illustrated
• Tag-based search and filter. Allows DIYers to search and filter for tutorials based on predefined tags
• Categories. Categorize tutorials into 1) techniques and 2) projects
• Tutorial page. Features a single tutorial; includes the materials and tools used, level of difficulty, cost and instructional content
• Shop tools. Provides DIYers with links to vendor sites, where they can purchase the tools they need
I used a sitemap to organize the product features shown above:
To get a sense of how DIYers will interact with the main pages of the website to reach their goals, I first graphed out the task flows. This process helped me not only further validate my understanding of user goals, common scenarios and tasks, but also think about what key features are required to assist DIYers in pursuit of their goal.
Prototype & Test
From concept to paper
Once I gained a better understanding of what features are required, I visualized the layout and hierarchy of these features via sketch wireframes.
Testing the design concept
I refined my sketch wireframes into mid-fidelity wireframes and created a prototype to validate the design concept early on. My two main test objectives were:
• To assess if DIYers’ feel they have a good understanding of what the site offers, and believe what the site offers align with their goals
• To assess if the UI design is functional, intuitive, and effective in assisting DIYers in completing the necessary tasks to achieve their goals
In achieving these objectives, I asked 5 participants to complete the following tasks:
• Read through the homepage and briefly describe what the site offers and its value propositions
• Find a project tutorial on how to paint Spiderman onto a pair of leather sneakers
• Find what tools you need to complete the 4th step of the tutorial
• Find where you can purchase the Angelus Paint Brush Set
Below are the key insights based on user feedback:
• Users were not so clear on the distinction between “technique tutorials” and “project tutorials” just by going through the homepage
• Users were confused by the “Play Interval” button on the single tutorial screens because they are unfamiliar with the term “interval”
• The connection between the vertical menu on the single tutorial pages and the content that it dictates is weak
• The connection between the progress bar on the single tutorial pages and the video content is weak
Based on these insights I was able to come up with ideas on how to enhance the user experience through UI and content. The following ideas are implemented during the creation of the high-fidelity wireframes:
• On the homepage, expand on product offerings (technique and project tutorials) instead of general value propositions (“learn” and “get inspired”)
• Strengthen the visual hierarchy of the active tab in the vertical menu so users immediately understand its relation with the current content and the function of the menu
• Delete the button “Play Interval” and combine timestamp with the progress bar to 1) reduce confusion, 2) simplify and 3) establish a stronger association between the progress bar and the video content
First stab at branding
During the kickoff meeting with the stakeholder, I was able to get a sense of her vision for the website as well as her aesthetic preferences. To strike a balance between her inclination towards a more feminine aesthetics and her desire to create a site that’s casual and enticing for a broad user base, I created a visual design that combines line drawings with skin-toned illustrations. I also designed a color palette that features pastel highlights to emulate a casual and fun ethos.
Branding version 2.0
I started creating the high-fidelity wireframes by applying the style tile shown above:
Before even completing the wireframe for the homepage, I noticed that the colorful, pastel-dominated palette lacked cohesiveness and created distraction from the skin-toned illustrations. It will also become overwhelming once we add vibrant product photos and video thumbnails.
I then decided to present this to the stakeholder for feedback and start a discussion about possible alterations to the style tile. After several trials with different color palettes that featured a vibrant highlight color, I suggested using lighter and neutral tones (e.g., soft beige) as primary colors and the illustrations as the highlight instead — Undercover was the example I provided. The result was very well received by the stakeholder, as it not only aligns with her vision, but also caters to our broad target audience with its versatile combination of dark line illustrations, neutral tones and skin-colored vector graphics.
As a UX designer, my decisions are driven by user needs. However, working with stakeholders that have a specific vision of what the product should look like also requires the designer to take into consideration the stakeholders’ needs, and it can be challenging balancing between users’ and stakeholders’. What really helped me get my ideas across and open up a conversation was presenting design decisions with detailed user research and facts, while framing everything from the user’s perspective. This not only builds empathy, but also establishes a common goal during discussions.
Expand wireframes to include tablet and mobile versions of all screens
Choose a redlining tool and prepare the project to be handed over to a developer
Conduct usability tests with early adopters to validate our problem statement and solutions
Continue updating our pages and features based on the synthesized test results