This brief is fictional. The business, people and numbers are invented for practice. Do your own research with real people where the brief asks for it, and never present invented findings as real in your portfolio.
The brief
Fictional client: Kumari Craft is an online shop selling handmade Nepali textiles, ceramics and paper goods made by small workshops. Around 70 products. Customers are mostly international, buying gifts. The current shop uses a generic template; the owner reports that many people add items to the basket but do not complete checkout, and that customers email asking about shipping costs, delivery times and how products are made.
The problem to solve
Customers cannot easily judge products they cannot touch, cannot see delivery cost and time until late in checkout, and lack confidence buying from a small overseas shop. Design a responsive experience from browsing to order confirmation that answers these questions at the right moments, and use testing to prove the improvement.
Target users and assumptions
Users
- Gift buyers abroad who know little about the crafts and want something special.
- Returning customers who know the shop and buy for themselves.
- People with a fixed delivery deadline, such as a birthday.
Assumptions to test
- Unexpected shipping cost is the main reason for checkout abandonment.
- Photos showing scale and texture increase confidence.
- Stories about the makers matter to many, but not all, customers.
- Guest checkout is essential.
- Delivery date estimates matter more than delivery speed options.
Business goals and user needs
Business goals
- Increase checkout completion.
- Reduce pre-purchase questions by email.
- Increase average order value without manipulation (for example through genuinely useful "goes well with" suggestions).
- Communicate fair-trade sourcing credibly.
User needs
- Find a suitable gift by occasion, budget or type.
- Understand size, material, colour and care before buying.
- Know the total cost, including delivery and any import duties, before entering payment details.
- Know when it will arrive.
- Trust that the shop is legitimate and returns are possible.
Scope and constraints
In scope
- Home page (light treatment), category listing with filters, product detail page, basket, checkout (guest), order confirmation.
- Mobile and desktop designs.
- Error states: out of stock, address problems, payment declined.
Constraints
- Payment is handled by a third-party provider; you design the steps before and after it.
- Shipping costs depend on destination country and weight; the shop can provide a table.
- Some items are one of a kind and can sell out while in someone's basket.
- Import duties vary by country; the shop can only give guidance, not exact amounts.
Research plan
- Run a usability test on an existing small online shop selling similar goods with five participants (baseline).
- Review guidance on e-commerce usability from reputable sources and note what applies.
- Interview four people who bought a gift online from a small shop in the last six months.
- Analyse the checkout of three competitors with the competitor matrix.
Competitor analysis worksheet
Copy this grid into a spreadsheet or your design file. Fill one row per competitor you choose.
| Competitor | Filters offered | Product photography | Size and material info | Delivery cost shown where | Delivery date estimate | Guest checkout | Number of checkout steps | Trust signals |
|---|---|---|---|---|---|---|---|---|
| Independent shop A | ||||||||
| Marketplace B | ||||||||
| Craft shop C | ||||||||
| Large retailer D |
Interview questions
- Tell me about the last gift you bought online from a smaller shop.
- How did you decide what to buy?
- What information did you look for before buying?
- Was there a moment you nearly gave up? What happened?
- How did you decide whether to trust the shop?
- How important was delivery time, and how did you find it?
Synthesis
- Combine baseline test findings and interview notes on one affinity map.
- Rate baseline usability issues by severity.
- Identify the three biggest barriers to purchase confidence and checkout completion.
- Turn them into problem statements and "How might we" questions.
Problem statement and success metrics
International gift buyers abandon checkout at small craft shops because delivery cost and arrival date appear only after they enter their address, and they lack the product detail and trust signals needed to buy something they cannot see in person.
A starting draft. Rewrite it from your own research.
Success metrics
- Baseline versus redesign task success: buy a specific gift for delivery to a given country by a given date.
- Number of participants who could state the total cost before entering payment details.
- Time to find size and material information.
- Post-task confidence rating (1 to 7).
- After launch (planned): checkout completion rate and email questions per week.
Information architecture and user flow
- Card sort product categories with at least five people (open or hybrid).
- Design the category structure and filter set from the card sort and the product data.
- Draw the purchase flow from landing on a product to confirmation, including sold-out and payment-declined paths.
Sketching and wireframing
- Wireframe the listing page with filters on mobile and desktop.
- Wireframe two alternative product page layouts and test them quickly with three people.
- Wireframe basket and checkout with delivery cost and date visible early.
- Design every error and empty state in the flow.
UI, components and prototype
UI and component requirements
- A visual language that lets the products lead.
- Components: product card, filter panel, image gallery with zoom, size and material table, delivery estimator, basket line item, checkout steps, address form, order summary, trust and returns block.
- Responsive layouts at three breakpoints.
- Clear handling of one-of-a-kind items.
Prototype requirements
- A responsive prototype on mobile and desktop for the full purchase flow of one product.
- Working filter interactions on the listing page.
- Error states reachable in the prototype.
Usability testing and iteration
Testing plan
- Test the redesign with five new participants using the same tasks as the baseline.
- Compare task success, confidence ratings and issues between baseline and redesign.
- Use the findings report template, including a before and after table.
Iteration
- Fix critical and serious issues.
- Run a second, smaller round with three participants on the changed screens.
- Document two iterations with before and after evidence.
Accessibility checklist
7 items
Final deliverables
8 items
Portfolio case study outline
- Summary: improving purchase confidence for a small craft shop.
- Baseline test: what went wrong and how badly.
- Insights about gift buyers and trust.
- Structure: card sort and categories.
- Product page: the alternatives tested and the result.
- Checkout: making cost and delivery date visible early.
- Before and after results, honestly reported with sample sizes.
- Next steps and what to measure after launch.
Assessment rubric
Score yourself honestly, then ask a peer or mentor to score you. Aim for Competent on every row before calling the project finished.
| Criterion | Not yet | Developing | Competent | Excellent |
|---|---|---|---|---|
| Problem framing | Problem restates the brief or jumps to a solution. | Problem is stated but not supported by research. | Clear problem statement supported by your own evidence. | Sharp, evidence-based problem with explicit scope and trade-offs. |
| Research and synthesis | No real participants or sources. | Some research, but findings are listed rather than synthesised. | Real participants, themes and insights that clearly shape decisions. | Well-chosen methods, honest limitations, insights that changed the direction. |
| Structure and flow | Only isolated screens. | Flow covers the happy path only. | Complete flow including key errors and empty states. | Flow is simplified with evidence and covers edge cases thoroughly. |
| Visual and UI quality | Inconsistent type, spacing and colour. | Mostly consistent with some rough areas. | Consistent visual system, clear hierarchy, all states designed. | Polished system with reusable components and thoughtful detail. |
| Accessibility | Not considered. | Contrast checked only. | Contrast, focus, labels, target sizes and colour independence addressed. | Checked with keyboard and screen reader; issues found and fixed. |
| Testing and iteration | No testing. | Testing done but no changes made. | At least five sessions with clear findings and documented changes. | Multiple rounds, prioritised findings and a measurable improvement. |
| Case study communication | Gallery of screens without explanation. | Process described but long or unfocused. | Concise, skimmable story with annotated decisions. | Compelling and honest story a reviewer can understand in five minutes. |
| Evidence of improvement | No comparison. | Comparison without consistent tasks. | Same tasks before and after with clear results and sample sizes. | Clear improvement with honest limitations and next tests. |
Milestones
Tick tasks as you finish them. Progress is saved in this browser.
Progress is saved in this browser.
-
Milestone 1Baseline research
4 items
-
Milestone 2Structure
3 items
-
Milestone 3Wireframes
3 items
-
Milestone 4UI and prototype
3 items
-
Milestone 5Compare and iterate
3 items
-
Milestone 6Case study
3 items
Optional extension challenges
- Design gift messaging and gift wrapping options without adding steps for everyone.
- Design a "notify me" flow for sold-out items.
- Design the order confirmation email and a delivery update email.
- Plan an A/B test for one checkout change, including the hypothesis and success metric.
Hints and worked example
Try the project yourself first. The worked example shows one way through, with illustrative content that is not real research.
Show hints and the worked example
Illustrative only. Not real findings.
Example baseline finding: In an imagined baseline test, three of five participants added an item, then left the basket to look for shipping information in the footer. Severity: serious.
Example design response: The product page shows "Ships from Kathmandu. Delivery to United Kingdom: Rs 2,400, arrives 8 to 12 days" after the visitor chooses a country once (stored for the session). The basket repeats the delivery cost and date and shows a clear total. Import duty guidance links to a short, plain-language page.
Hint: one-of-a-kind items need honest messaging. "Only one available. It is not reserved until you complete checkout." is better than a fake countdown timer, which would be a dark pattern.