• UX Case Study: KoinStreet Homepage Redesign
  • Written by Mellownie Ho
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: Zhengjian – L
  • Proofread by: Rachelcdev

User Experience Case study: Redesign the KoinStreet home page

Project introduction

Clients: KoinStreet is a cryptocurrency trading platform that sets up a Copy trading system between experienced traders and passive investors. The platform also builds a community of people who are interested in digital cryptocurrencies and want to learn more, culling and sharing new information and learning resources. Task: Redesign login page Duration: 4 days Tool: Adobe XD

Method and timing

Day 1: Carry out Heuristics analysis and field investigation on KoinStreet, and carry out Competitive feature analysis and feature analysis on the existing cryptocurrency trading platform. Brainstorm key features and write design summaries on whiteboards day 3: sketches on paper, wireframes in AdobeXD, mood kanban based on KoinStreet’s social media image day 4: redesign KoinStreet’s high-precision model in AdobeXD

Design concept

In this design, my philosophy is to take the original content, look at the best features, and recombine them into a new, modern web page.

The target

Create a visually stunning landing page that is futuristic, edgy and trustworthy, while letting users know what KoinStreet can do.

Original login page for KoinStreet

Heuristic evaluation

After looking through KoinStreet’s original landing page, I wrote down a few areas that needed improvement and ranked them in order of importance:

  1. There are no clear steps or instructions on how to use the site.
  2. There is no mention of security anywhere on the landing page.
  3. Have great videos that showcase the company’s features and strengths. However, several important features mentioned in the video are not highlighted on the landing page, especially the ability to follow transactions.
  4. Color coordination, but a little dated.
  5. Partner and social media ICONS are too big to be distracting. Also, the partner icon is not centered.

Competitiveness analysis

After studying KoinStreet’s landing page, I also browsed and studied Coinbase, Luno, Binance and Paxful’s landing pages.

Based on my observations and research of these competitors, I wrote down a few key features that I missed while browsing KoinStreet’s web site (specifically, features that clarify the role of the site and enhance security and trust) for brainstorming and design briefs.

Start to design

After learning more about KoinStreet, cryptocurrency, and competitors in the same space, I started brainstorming and drafting sessions.

Brainstorming and design briefs

First, I wrote down the features that KoinStreet’s new landing page needed to give users more understanding and trust in KoinStreet.

I then listed several possibilities for the design of the new landing page.

After that, I described the new landing page in more detail. The sketch on the right is closest to the final look.

Mood board

In the draft, I used koinStreet’s images on Twitter, Facebook, Medium and Instagram to create mood subreddits.

I do this for several reasons:

  • See how KoinStreet is presenting its image visually to the audience so far
  • Make sure the new version of the KoinStreet landing page is in harmony with its image on social platforms
  • How far can we push design without changing the fundamentals

wireframe

Next, I made a very simple wireframe for the landing page to help inform the order and space of the content.

Finally finished

This is the final koinStreet login page.

I used the KoinStreet banner from Medium.com to create the new color scheme, with an eye to making sure that THE functionality and benefits of KoinStreet were clear.

subsequent

  • Learn more about what people familiar with cryptocurrencies want to see from this redesign through user testing and user research.
  • Get customer feedback on what they want to include
  • Create about pages and blog pages

If you have any feedback or suggestions on the model, please feel free to comment!

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.