Looking For Fashion?




How a homepage redesign can make digital assets and cryptocurrency more approachable


A UX/UI case study on developing a high-fidelity mockup for KoinStreet’s landing page

Project Introduction

Client Overview: KoinStreet is a cryptocurrency trading platform that connects experienced crypto-traders with passive investors interested in learning more about the digital asset market and blockchain technology. The platform provides a variety of features for novice investors to gain knowledge and confidence in buying/trading cryptocurrency.

Task: Conduct research and gather insights to create a high-fidelity mockup of a new homepage for KoinStreet that clearly speaks to its value proposition, builds trust, and encourages potential users to engage with the product.

Time Constraint: 4 days

The (Re-)Design Process

• Lean UX Design Approach •

Discover

Secondary Research

Understanding cryptocurrency and the market of digital assets:

• Examples of cryptocurrency: Bitcoin, Ethereum, Litecoin, XRP, Tether •

What is cryptocurrency?

→ Digital asset as a medium of exchange through crypto-graphical functions

→ Effective way to transmit money & investment opportunity

→ Leverages blockchain technology to gain decentralization, transparency, & immutability

→ Blockchains ensure integrity of transactional data

Evaluating KoinStreet and the product’s main value propositions:

“A central ecosystem where digital asset news can be aggregated, the average investor can utilize profitable trades using traders’ portfolios, and people can openly curate content and followers to build communities within the market”
“Native KASH token”
“Copy trade feature connects investors and traders”
“Helps you learn about digital assets in a fun interactive way opening the door to a new form of investing”
“Gamify the learning curve to make digital assets fun”

Once I became familiar with KoinStreet’s mission, I stripped the current website’s visual design to create quick wireframes of the current content on the landing page, so I could easily evaluate how I should approach the redesign.

• Wireframes of KoinStreet’s Website Before Redesign •

Competitive Analysis

Once I had an idea of the content KoinStreet wants to include on the homepage, I started conducting research on competitors in the digital asset market and what they included on their homepages. For comparison, I looked at three specific components: landing page, displays of features/product information, and social proof/community interaction.

• Visual Competitive Analysis of Website Components •

After looking at the specific components of each competitors website, I pulled out calls-to-action, feature displays, and explanations to keep for UI inspiration during my redesign.

• UI Inspiration for Specific Components •

Define

Using secondary research and competitive analysis to define scope and objectives for the project

Key Insights from Digital Assessment

→ Confusing landing page | Not exactly clear what the platform is for when user gets to the homepage

→ Large embedded video appears as you scroll down | The display seems overwhelming and is not very engaging (user cannot avoid the video)

→ Information seems a bit disorganized

→ Users don’t know what to expect when scrolling down

Journey Mapping

Based off key insights from my research, I came up with a user person of a novice investor as the target audience for the product redesign. I used the person to create a journey map to help me identify key opportunities.

• Customer Journey Map •

I separated the customer experience into four phases and wanted to target the third phase for my redesign, so potential users can land on the homepage of KoinStreet and decide to try the product right away. Identifying the customer journey allowed me to come up with key objectives to target the third phase effectively and I thought about how the redesign could engage potential users to join the platform.

Goals for Homepage Redesign:

→ Make value proposition stand out on homepage

→ Ensure simple explanations of cryptocurrency and KoinStreet’s mission for users who are new to the digital asset market

→ Explain how KoinStreet can augment user’s activity in digital asset market, so users understand what the platform is for with a clear display of features

→ Engage users with KoinStreet’s content (news & blog)

→ Clear call-to-action to sign up for platform

→ Emphasize safety & trust

Develop

After defining the scope and goals of the redesign, I used key insights from research and analysis to come up with a low-fi mockup using Figma

Low-Fidelity Wireframes

• Low-Fi Wireframes of Mockup •

Style Guide: A visual library to maintain consistency

Once I created my low-fi wireframes and conducted some user tests, I decided on a style guide of fonts and color themes based on KoinStreet’s current branding. I looked at their online presence overall and noticed three major color palettes and use of san-serif fonts. I stuck to the brand’s image and incorporated a combination of the visual themes into my redesign. Since the brand used the darker palette in its most recent activities, I decided to stick mostly to that specific theme.

• Font Guide for Hi-Fi Mockup •
• Color Themes for KoinStreet •

User Testing

I conducted four quick user tests in order to evaluate whether or not the low-fidelity mockup accomplished the goals of the redesign. The majority of the participants did not consider themselves financially-savvy in the digital asset market. I asked the following questions to participants.

Questions & Tasks:

Can you identify the purpose of this website?
How would you sign up for this platform?
Looking at the homepage, what are 3 activities you could participate in if you used this platform?
Describe the site in three words.

Results of User Tests:

→ All participants understood KoinStreet was a digital asset trading platform and the website was an intro to the product

→ All participants found the “Try Now” button with ease, but some expressed confusion around whether the button would download the product (i.e. download app or go to another website)

• Enter Gateway Iteration → Added Download Buttons •

→ After looking at the redesigned site, most participants understood the basics of what the platform is meant for (i.e. trading digital assets, building a community, etc.) and could identify the main features (copy trading, digital asset exchange, social hub)

→ Some participants expressed confusion around “start” in the anchor menu thinking that would lead them to the sign up page

• Anchor Menu Iteration → Change Start to Blog •

→ Common types of words used to describe the site were intriguing (2/4), informative (3/4), and appealing (2/4)

Deliver

Using Figma to deliver a hi-fi mockup of a redesigned homepage for KoinStreet

Iterations

Going through the discover, define, and develop phases of my design process, I conducted research, analyzed insights, and created mockups to perform user tests in order to get to the final phase of delivering a high-fidelity mockup of my redesign. Here is an overview of the iterations I made to my final mockup from start to finish:

• Hi-Fidelity Landing Page •
• Hi-Fidelity Intro •
• Hi-Fidelity Social •
• Hi-Fidelity Blog •
• Hi-Fidelity Call-To-Action •
• Hi-Fidelity Contact Us •

In addition to the iterations of the original content on the homepage, I added three main components to the redesign:

→ Mission Statement: Clarify the purpose of KoinStreet

→ Main Features Display: Convey the main value propositions of the product efficiently and in an engaging way

→ Target Users: Show potential users whether or not the product is the right fit for them

• Low-Fidelity Additions to Homepage •
• Hi-Fidelity Mission Statement •
• Hi-Fidelity Main Features Display •
• Hi-Fidelity Target Users •

Checkout the high-fidelity mockup of my redesign here.

Conclusion

Throughout the process of this redesign, I realized how a simple redesign of a website could change the perception of an industry and compel potential users to engage with a product. The power of informed visual design can lead to higher appeal to target users and create more access to great products.

Next steps for KoinStreet:

→ Add a social proof section to emphasize safety & security approach of platform

→ Add section about mobile app and advertise that specific feature more apparently

→ Show more visuals of what the actual platform looks like so users have an idea of what to expect if they download it

→ Add FAQ section to directly answer questions new investors/traders may have about cryptocurrency market

These recommendations can allow KoinStreet to more effectively target novice investors and encourage users interested in digital assets to engage with their platform.


How a homepage redesign can make digital assets and cryptocurrency more approachable was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.