Amun is a leading cryptocurrency issuer which aims to make purchasing crypto more accessible, and efficient. Under its 21Shares brand, Amun is the world's largest issuer of crypto exchange-traded products (ETPs). Amun's redesign includes the Amun app for consumers as well as Opal, Amun's back-end platform that allows the Amun team to easily create, rebalance, or decommission Amun index tokens without the assistance of engineers.
Role: Product(UX/UI) Design Lead, UX Research
Platform: tokens.amun.com
Tools: Figma (design), Zoom (user interview)
Product Manager: Carson Brown
Engineering Manager: Łukasz Romanowski
Credits: Marina Krutchinsky (Head of Design), Jerzy Zareba (Branding)
Platform: tokens.amun.com
Tools: Figma (design), Zoom (user interview)
Product Manager: Carson Brown
Engineering Manager: Łukasz Romanowski
Credits: Marina Krutchinsky (Head of Design), Jerzy Zareba (Branding)
Amun.com Redesign Strategy
Mobile First
Always optimize for the mobile device (40% of users is coming from the mobile based on Google analytics)
Defi App (Amun)
Anyone can buy or sell tokens in Amun.com, track performance of tokens or PNL, and manage users' assets in the dashboard.
Anyone can buy or sell tokens in Amun.com, track performance of tokens or PNL, and manage users' assets in the dashboard.
New homepage
New team page
New dashboard (Light mode)
New dashboard (Dark mode)
Opal (Internal Product)
Back end product allows Amun team to generate Amun index tokens. This product speeds up the launch of the Amun token, rebalance existing tokens without engineering team, decommission tokens, and eliminates the need for unnecessary communications with data engineers.
UX Research
Considering the project timeline and budget, we have decided to have a UX workshop to do empathy mapping exercise and create user journey with stakeholders.
Benefits to leveraging empathy mapping exercises to create user personas.
Benefits to leveraging empathy mapping exercises to create user personas.
Deeper understanding of users: Empathy maps help you to get inside the heads and hearts of your users by understanding their thoughts, feelings, goals, and frustrations. This deeper understanding can help you to create more user-centered products and services.
Shared understanding among team members: Empathy maps are a great way to communicate your understanding of users to other team members, such as designers, developers, and product managers. This shared understanding can help to ensure that everyone is on the same page and that the team is working towards a common goal.
Uncovering hidden needs: Empathy maps can help you to uncover hidden needs that users may not even be aware of themselves. This is because empathy maps force you to think about the user's experience from their perspective, rather than from your own.
Identifying opportunities for innovation: By understanding the user's needs and frustrations, you can identify opportunities to innovate and create new products and services that solve real problems.
Empathy mapping exercise (1 day workshop)
To understand user persona for Token product, we conducted empathy mapping exercise with product managers, Token marking team, and engineers.
Why?
To start thinking about the platform experience we deliver from our customers’ point of view.
How
By co-creating empathy maps for district segments of our target audience, we can better understand types of people coming to the platform and their expectations.
Why?
To start thinking about the platform experience we deliver from our customers’ point of view.
How
By co-creating empathy maps for district segments of our target audience, we can better understand types of people coming to the platform and their expectations.
In the workshop, we were able to define 4 types of personas for the token platform and validated target persona from user interviews.
Customer journey mapping (1 day workshop)
Why?
To align our understanding about customers’ current experience of the platform and to identify problems - in order to create a better future state.
How
By co-creating end-to-end customer experience map for one of our personas across all touchpoints: by including their thoughts and actions, as well as pain points of their current experience, and then turning these experience gaps into opportunities (future state).
To align our understanding about customers’ current experience of the platform and to identify problems - in order to create a better future state.
How
By co-creating end-to-end customer experience map for one of our personas across all touchpoints: by including their thoughts and actions, as well as pain points of their current experience, and then turning these experience gaps into opportunities (future state).
Customer journey map for advanced user
User interview (2 weeks)
User research & script: Thomas Kim
Summary: Thomas Kim
Note taking: Carson Brown
Summary: Thomas Kim
Note taking: Carson Brown
• We ran 6 1-hour user interviews by Zoom
• Region: 3 countries (USA, South Africa, India)
• Personas
Beginner (2 out of 6)
Advanced user (3 out of 6)
Pro (1 out of 6)
Beginner (2 out of 6)
Advanced user (3 out of 6)
Pro (1 out of 6)
• Age: 30s ~ early 50s
• Gender: Male
• Community: Discord & Telegram
• Occupation: PM, Asset manager, Software developer, Doctor, IT Consultant
• Years of experience in Crypto: 3~5 years
• PECO holders (6 out of 6) and long term, DFI (1 out of 6)
Findings from user interview
What helps you trust the token product?
Influencer (2 out of 6)
“Recognizes he doesn’t want to ruin his reputation”
“Recognizes he doesn’t want to ruin his reputation”
Projects (1 out of 6)
“Yeah, projects, meaning what they already wanted to do”
“Yeah, projects, meaning what they already wanted to do”
The Team (2 out of 6)
“Evaluated Amun as a trustworthy team”
“Evaluated Amun as a trustworthy team”
What are the allocations? (2 out of 6)
“Really wants to understand the allocations”
“I want to research on each project under allocations”
Biggest pain-points in tokens and cryptos
1. Gas Fee is too high (5 out of 6)
2. Lack of information
“Really wants to understand the allocations”
“I want to research on each project under allocations”
Biggest pain-points in tokens and cryptos
1. Gas Fee is too high (5 out of 6)
2. Lack of information
• Hard to look up history on Etherscan (1 out of 6)
• No wallets give meaningful messaging (1 out of 6)
• Transaction data is opaque (1 out of 6)
• Don't know which L2 to use? (1 out of 6)
• “I don’t know about liquidity on L2’s“ (1 out of 6)
• People often confuse a growing market with a good trading strategy (1 out of 6)
3. Trust
• Hard to verify information and time consuming (1 out of 6)
• “Anyone who can give you institutional grade security can charge a premium for that because people feel safe & institutions will trust” (1 out of 6)
4. Other consideration
• Lots of hoops to jump through, Bridging (2/6 users)
• Price Volatility (2 out of 6)
• “ETH has moved from consumer to enterprise & it’s insane to use” (1 out of 6)
How did you find Amun.com?
• No wallets give meaningful messaging (1 out of 6)
• Transaction data is opaque (1 out of 6)
• Don't know which L2 to use? (1 out of 6)
• “I don’t know about liquidity on L2’s“ (1 out of 6)
• People often confuse a growing market with a good trading strategy (1 out of 6)
3. Trust
• Hard to verify information and time consuming (1 out of 6)
• “Anyone who can give you institutional grade security can charge a premium for that because people feel safe & institutions will trust” (1 out of 6)
4. Other consideration
• Lots of hoops to jump through, Bridging (2/6 users)
• Price Volatility (2 out of 6)
• “ETH has moved from consumer to enterprise & it’s insane to use” (1 out of 6)
How did you find Amun.com?
• Twitter (3 out of 6)
• Google search “Polygon Diversification” (1 out of 6)
• Defi Newsletter (1 out of 6)
• Found Amun in UniSwap (1 out of 6)
Why visit us?
• Google search “Polygon Diversification” (1 out of 6)
• Defi Newsletter (1 out of 6)
• Found Amun in UniSwap (1 out of 6)
Why visit us?
• Check the news or blog (2 out of 6)
• Check the price of Token (2 out of 6)
• Check in to see if there’s anything new (1 out of 6)
• Evaluated Amun as a trustworthy team (1 out of 6)
“I want more information about the company”
• Research into the product (1 out of 6)
• To check Bridge options (1 out of 6)
• Check the price of Token (2 out of 6)
• Check in to see if there’s anything new (1 out of 6)
• Evaluated Amun as a trustworthy team (1 out of 6)
“I want more information about the company”
• Research into the product (1 out of 6)
• To check Bridge options (1 out of 6)
Homepage redesign
New homepage based on user's feedback
Old homepage
Pain points and user feedback
Security & Trust
• “I want to feel secure”
• “With Amun alone, there isn’t that trust on the surface”
(Feels it would be useful to use that 21Shares relationship)
• “I want more information on security & safety”
• It isn’t sure how we create a feeling of institutional trust
(Anyone who can give you institutional grade security can charge a premium for that because people feel safe & institutions will trust)
• “I want insurance”
• “With Amun alone, there isn’t that trust on the surface”
(Feels it would be useful to use that 21Shares relationship)
• “I want more information on security & safety”
• It isn’t sure how we create a feeling of institutional trust
(Anyone who can give you institutional grade security can charge a premium for that because people feel safe & institutions will trust)
• “I want insurance”
Lack of information
• “I expect to see more research stuff”
• “I want to see that documentation in development”
• “I want to see more about the company”
• The strategy should describe the methodology
• “I want to see that documentation in development”
• “I want to see more about the company”
• The strategy should describe the methodology
Content presentation
• “I’m less interested in our partnerships”
• Not immediately clear that he can scroll down
“I want to have the attention drawn products”
• Product tile: condense the description and show more interesting KPIs (Token value, chart)
• “I want condensed version of Latest news and closer to the top”
• “I expect it to be a waste of time where I need to search for the Launch App”
• "I don’t understand why this page exists”
• If he’s coming to our site he already knows who we are and he wants to check us out. He wants to see that context as soon as he lands
• Not immediately clear that he can scroll down
“I want to have the attention drawn products”
• Product tile: condense the description and show more interesting KPIs (Token value, chart)
• “I want condensed version of Latest news and closer to the top”
• “I expect it to be a waste of time where I need to search for the Launch App”
• "I don’t understand why this page exists”
• If he’s coming to our site he already knows who we are and he wants to check us out. He wants to see that context as soon as he lands
Recommendation for the homepage
• Make users feel secured and safe to invest by providing relevant content and the connection between Amun and 21shares
• Suggest “our products” directly when users open the homepage
• Reorganize content based on user’s expectation
- All users knew how to connect MetaMask and basics before visiting Amun homepage
- All users knew how to connect MetaMask and basics before visiting Amun homepage
• Provide more content for the research, development, team, and the company
Product detail page
New product page based on user's feedback
Old product page
Pain points and user feedback
Lack of information
• “I don’t see where it’s available” (Uniswap, Sushiswap..)
• “I want to see what chains it’s on”
• “I want to be able to go to each tokens site to evaluate the projects”
• “I want to see the split between ETH & Matic holders”
• "Under the allocations I want to see 1 month performance”
• “Where is the performance coming from?”
(If all the value comes from Matic then there’s a problem)
• “I want to see AUM grow in chart”
• “How is the market cap made up? Is there institutional money?”
• “I worry that the market cap is too small"
• “Is there someone that supports buying a token?”
• Rebalance history - “I want to see the actual transaction, Expects that link to be the transaction, not IPFS hash”
UI & Content presentation
• “I want to see what chains it’s on”
• “I want to be able to go to each tokens site to evaluate the projects”
• “I want to see the split between ETH & Matic holders”
• "Under the allocations I want to see 1 month performance”
• “Where is the performance coming from?”
(If all the value comes from Matic then there’s a problem)
• “I want to see AUM grow in chart”
• “How is the market cap made up? Is there institutional money?”
• “I worry that the market cap is too small"
• “Is there someone that supports buying a token?”
• Rebalance history - “I want to see the actual transaction, Expects that link to be the transaction, not IPFS hash”
UI & Content presentation
• “I want dark mode”
• Chart - Would be nice to have a better perspective on the time
• “I want a link for the announcement for that & make sure that’s the latest information”
• “Feels weird having Social Media on the details page”
• “I would like a button to see the latest news regarding PECO”
Purchase experience
• Chart - Would be nice to have a better perspective on the time
• “I want a link for the announcement for that & make sure that’s the latest information”
• “Feels weird having Social Media on the details page”
• “I would like a button to see the latest news regarding PECO”
Purchase experience
• “I don’t understand the fee”
- How does it work
- How much of the fees are we paying rebalance
- What % of the capital is put toward rebalancing
• Selecting and switching networks are confused
• Purchase widget is often overlooked.
• Skeptical of the “pay with” drop down
- How does it work
- How much of the fees are we paying rebalance
- What % of the capital is put toward rebalancing
• Selecting and switching networks are confused
• Purchase widget is often overlooked.
• Skeptical of the “pay with” drop down
Recommendation for the product page
• Display where each token is available (Sushiswap, Uniswap..)
• Suggest to provide detailed information for ETH & Matic holders
• It would be helpful to show AUM growth as a chart
• Would be helpful to display institution purchase if there’s any
• Purchase widget - Provide detail information about fee, improve switching networks and chains
• Provide the latest announcement or news for each token as links
• Dark mode would be beneficial to users
• Suggest to provide detailed information for ETH & Matic holders
• It would be helpful to show AUM growth as a chart
• Would be helpful to display institution purchase if there’s any
• Purchase widget - Provide detail information about fee, improve switching networks and chains
• Provide the latest announcement or news for each token as links
• Dark mode would be beneficial to users
Dashboard
New dashboard based on user's feedback
Old dashboard
Pain points and user feedback
• “I would like this but wants to see the performance broken down by
allocation”
allocation”
• “I want to feel like Amun is smarter than me & not making mistakes
I wouldn’t make.”
I wouldn’t make.”
• “I already made a purchase decision so I probably won’t come back”
To come back we need to give him something interesting
To come back we need to give him something interesting
• “I want to understand the allocations”
• “I want to know how this compares to other base tokens but in crypto I’m missing”
• Tracks things in base tokens when he’s on chain
• “I want it to be fun to look at my portfolio”
• “I love getting rewards & staking things”
• “I want to see holdings, average buy price, total PnL ($ & %), quantity”
• Only is really interested in the tokens he holds
• “I don’t need our product section at all”
• “I like dashboard but want to see Up & Down”
• Allocations are less important once in the position but would be nice with a drop down
• “I want to filter by asset”
• “I want to see AVG. buy price. I don’t buy all at a time”
• Function that users can manually add purchases as in CMC or
CoinGecko
CoinGecko
• “I want to be able to track dollar gain & % gain”
• “I like what CoinMarketCap does”
• “I want to check performance of entire portfolio”
• Make the chart bigger & decrease size of the history
• Very valuable to see Average entry cost
• Sort by Header by clicking it
• Add grouping by token
Recommendation for the dashboard
• Show interesting features making users come back
• Suggest to have holdings, average buy price, total PnL ($ & %), quantity
• Suggest to have holdings, average buy price, total PnL ($ & %), quantity
• Compare the performance of portfolio to other cryptos and tokens
• Offer an option to select the performance of each chain
Next step
• Based on users' feedback and pain-points, product team and design team prioritized features and updated product roadmap
• Decided to have Light mode/Dark mode
• Decided to create a team page to give users credibility and feel secure
• Created a dashboard to mange the performance, PNL, and allocations from user's need
• Redesigned the homepage
• Improved Product detail page experience
• Improved Purchase widget experience
• Decided to have Light mode/Dark mode
• Decided to create a team page to give users credibility and feel secure
• Created a dashboard to mange the performance, PNL, and allocations from user's need
• Redesigned the homepage
• Improved Product detail page experience
• Improved Purchase widget experience
User flow (Amun)
User flow (Opal)
Low fidelity wireframes (Amun)
By leveraging competitive researches and user interviews, explore design concepts with low-fidelity first and ideate with stakeholders, and get feedback.
Low fidelity wireframes (Opal)
Design System
Created a design system across all products for 21Shares and Amun collaborating with other designers.
• Grid (X-Large, Medium, Small)
• Naming Convention (Design Token)
• Color pallets Light Mode & Dark Mode
• Components (Buttons, Text input, Tab, Dropdown, Card, Checkbox, Toggle, Chips)
• Data Visualization principals (Line chart, Bar chart, Area chart, Pie chart)
• Typography
• Icons
• Documentation
• Grid (X-Large, Medium, Small)
• Naming Convention (Design Token)
• Color pallets Light Mode & Dark Mode
• Components (Buttons, Text input, Tab, Dropdown, Card, Checkbox, Toggle, Chips)
• Data Visualization principals (Line chart, Bar chart, Area chart, Pie chart)
• Typography
• Icons
• Documentation
