Victoria Kaufman
Victoria Kaufman
interactivecrypto.png

InteractiveCrypto Web

End-to-end mobile app and desktop site to monitor cryptocurrency investments

interactivecrypto_big_banner.png
 
 

Client: Marketing66

My Role: UX Researcher, User Interface Designer, Project Manager

Background: InteractiveCrypto is an online community and resource for cryptocurrency trading enthusiasts. They provide live price rates, charts, news, education materials, and broker and coin reviews. Their current website is outdated and not functional, and they want a new sleek look.

Objective: To redesign the InteractiveCrypto website to make it functional and beautiful for its user base. Users need to be able to access the latest news articles and reviews, as well as live price updates and technical charts. The new website needs to be simple and easy to use while giving complex and detailed information on all major cryptocurrencies.

 
 

 

Stage 1: Research

 

 
 

Competitive Analysis

To kick off my project I identified the main online resources for cryptocurrency rates and news and examined what features worked and didn't work. I looked at dozens of websites and identified the most popular ones by using google analytics. I scoured cryptocurrency-related app reviews to see what the major issues are and started to put together a plan.

Screen Shot 2018-07-10 at 6.56.40 PM.png
Screen Shot 2018-07-10 at 6.56.01 PM.png
Screen Shot 2018-07-10 at 6.56.14 PM.png
 
 

 

Stage 2: Define

 

 
 
 

Feature Matrix

Using feedback from users of the site, my competitive analysis, and Google Play reviews, I made a list of prioritized product features and created a loose plan for product development. Since I would also be creating an InteractiveCrypto Mobile App I marked off which features go on the desktop site and which go on the app. I used this to refer back to when determining what features to implement and their level of importance.

 
 
Screen Shot 2018-07-10 at 7.06.54 PM.png
 
 
 
 

Site Map

I created a sitemap to show the relationship between content on the future site. The sitemap was extremely helpful to organize my thoughts and ideas, and helped me visualize what was only information and notes before. This sitemap for the new InteractiveCrypto website includes all proposed screens and user flows. This can be used as a reference when creating the site to see what pages need to be made. 

ic sign up flow.png

User Flow

I wanted to identify the paths that a user would take through this product to complete each task. So I illustrated a number of path a user might take while using InteractiveCrypto. For example- creating an account, creating a watchlist, or reading a news article This is a great way to simulate the path a real user would take to easily identify any road blocks they might encounter along the way.

 

Stage 3: Design


 

Responsive Wireframes 

After I had a plan in mind and a rough outline of what needed to be included, I set to work making wireframes for all the screens. I started with all the desktop screens and then once those were approved by the CEO I made the responsive tablet and mobile screens.

 
Education.png
News.png
BROKERS.png
responsive wireframes.png
 

Style Guide

Style Guide.png
Style Guide copy.png
 

Final UI Screens

Home Page.png
BROKERS.png
News.png
 

 

Stage 4: Test

 

 
 
 

 Prototype and Testing

I created a working prototype of my desktop site using the prototyping tool InVision. I then conducted moderated tests on 4 volunteers to test the functionality of the site. After prototyping I revised my design to be more user-friendly.

 

interactivecrypto_desktop.png
 
 
 
interactivecryp mbpro - MOCK UP .png

What's Next?

Reiterate, reiterate, reiterate! With the prototypes and user testing done, and conclusions made, the next steps for InteractiveCrypto were to make sure my designs were pixel perfect, and create a document with all the site parameters. I worked closely with the developers to make sure nothing was missed in implementing the new site.