Crypto Price Tracker demo


Hi I am Harshita. I am a 16 year old app developer,
designer and entrepreneur. I created an app called Crypto Price Tracker which is a crypto
currency price tracker and portfolio management app. I launched the app on the app store on
28 January of this year and within 24 hours of launch, the app was number 2 in finance
on the app store top charts . It was featured on product hunt, was viral on reddit. And
my story about building the app got very popular on media. I was then interviewed.
By Times of India and dozens of other media news outlet us like the Daily Beast Inc, Your
story, Bitcoin news, etcetera. About 2 weeks ago, the app got acquired by redwood city
ventures which is a firm silicon valley. In this video, I am going to share the step by
step design process that I took on when designing the Crypto Price Tracker app.
The design process in 7 steps is simple. 1, you do use it, you get started with user research
and create a product spec that has details about all the features that you have decided
to build in the product. Number 2 is creating a user flow diagram for each screen. Number
3 is drawing via frames for each of the screens. Next is choosing a color palette and design
patterns for each screen. Next is creating mock ups, then creating an animator app prototype
and asking people to test it and provide feedback and finally, the last step is to give touches
or final touches to the mock ups to have the screens all ready for importing in the I D
E for coding he app . I am now going to tell you in much more detail what each step includes
. Starting with user research, the first step
when building a new product is always to figure out what features your users want. This will
require researching the market and talking target audience, ask people what they wish
was better about existing products if you are building an improved solution to a problem
that has been solved by other products. If you are innovating something new, ask people
what they want in an app like app idea like yours for them to use it every day which is
to find it useful enough . Once you have your list of ideas, put them in a document and
that will be your products back. When I started out with Crypto Price Tracker app app idea,
all I had in my head was that I wanted to make an app that crypto investors and just
people interested in crypto currencies would love and it fulfills their needs.
So, I interviewed almost 30 people in my network who I knew were into crypto currencies and
asked what they wish was better about other crypto price tracker and portfolio management
apps. At the end of one week of interviewing, I came up with a huge features list which
is a really good sign because it means that people badly wanted a new app for this . After
the interviews, I also researched on the internet mostly learned to ask subreddits like our
bitcoin and our crypto currency, researched a little bit on etcetera. So, that is how
I learned about the market before I even started doing any tangible product development. And
I think it is very important to make something people want if you want your app or your product
to do well . Next is creating a user flow diagram a User-flow
diagram. User-flow diagram is a very high level representation of a users journey throughout
your app or website. Usually a user flow diagram is made up of 3 types of shapes.
Rectangles are used to represent screens; diamonds are used to represent decisions and
finally, arrows link up screens and decisions together. Decisions ah for example, is like
tapping a log in buttons, swiping to the left, zooming in or selecting something on the screen,
etcetera. User-flow diagrams are super helpful because they give a logical idea and a really
good logical idea of how the app would function ah. And heres a user flow diagram I drew when
I started out working on the design of my app. Really basic, but it gives a good idea
of what the final product would look like or one of the screens .
Once I complete the User-flow diagrams for each screen and have designed user journeys,
I begin working on wire framing on the screens . Wireframes are essentially low representations
of how your app will look. Essentially, a sketch or an outline of where images labels
buttons and you know all the stuff will go with their layout and positioning.
A rough sketch of how your app will work. I use printed templates from US stencils for
drawing the wireframes. It saves times and gives a really nice canvas to draw on and
make notes. Here is an example wireframe or the same screen that I showed you a user flow
diagram or after sketching the wireframes you can use an app called pop by marvel and
take a picture of all their drawings using the app and have a prototype by linking up
all the screens through the buttons. Next, we select the design patterns. ah For
each type of screen and choose a color palette for your entire product. This is my favorite
part because it is kind of like window shopping, lots of design patterns and color ah color
palettes choose from and I and I go back picking the ones that I kind of like and I start experimenting
with them. The best platforms to find design patterns
are mobile patterns and patterns. And to find good color palettes go to color hunt . Next
step is creating mock ups. This is when we finally convert the pencil
joints to pixels. This is when you finally move on to using design software. A mock up
in the design sense is a high-fi representation of their design. It is almost like you went
into this apple in the future and took some screenshots for . It should look realistic
and pretty much like the real thing. There are design software and tools for creating
mock ups. I use the designer and sketch. The most commonly used for tool for IO s design
is sketch, but you can also use the Adobe ah, CC or any other software that you’re familiar
with. Here’s an example of some of the early designs
of my app. After I showed it to some friends, I experimented
more with color various color palettes. I shared these initial mock ups with my friends
for their feedback and the users that I had interviewed in the first step. A lot of the
people seem to like the gold gradient and black scheme. So, something I learned that
day be willing to take feedback and experiment with new suggestions, you will find amazing
ideas come from your users when you talk to them ah. Now you friends or any other design
community . So, when we designed the mock up and remove the background graphs because
generating them on the app was a technically was going to be a technically time consuming
process and the reduced readability and this is what the redesign mock up look like.
I was pretty satisfied with the color scheme icons on the tab bar and the overall layout
and look and feel the app or the screen. I went ahead and designed the rest of the screens
following the same design guidelines. It was a long for surely a fun process. Once all
of my screens were ready, I put together a prototype and adobe x d and asked a few friends
to experiment and get feedback. Creating an animator prototype by linking all the screens
is your next step . And finally, step number 7 is final touches
and such and this is what the final design of my app looks like and that is it. After
all the screens were completed, where I followed the exact same design process and principles,
I imported all the screens into x code and began coding the app. I am going to end this
video with one of my favorite quotes about design by one of my role models Steve Jobs.
Design is not just what it looks like and feels like design. Design is how it works
. Thank you .

Leave a Reply

Your email address will not be published. Required fields are marked *