<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Levi V</title>
    <description>The latest articles on DEV Community by Levi V (@levi_v).</description>
    <link>https://dev.to/levi_v</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2191218%2F0134e00a-64d8-435b-841d-3e49852b635b.jpg</url>
      <title>DEV Community: Levi V</title>
      <link>https://dev.to/levi_v</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/levi_v"/>
    <language>en</language>
    <item>
      <title>You don't need Figma</title>
      <dc:creator>Levi V</dc:creator>
      <pubDate>Thu, 03 Apr 2025 14:00:00 +0000</pubDate>
      <link>https://dev.to/levi_v/you-dont-need-figma-3djb</link>
      <guid>https://dev.to/levi_v/you-dont-need-figma-3djb</guid>
      <description>&lt;p&gt;Do you have a side project or are considering one? If so, you don't need to use Figma to flush out your ideas, however, you should have some sort of a design before coding. With a pencil, paper, UI library, and a little imagination you can go from concept to completed project faster than two shakes of a lambs tail.&lt;/p&gt;

&lt;p&gt;To illustrate, I'll use a real feature from a project I'm working on. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Problem&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;I run a beta program for my side project and am having trouble converting signups to installs. Currently, users have to wait until I get around to inviting them before they can install. At that point, most don't follow through.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Solution&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Give visitors the option to immediately install the app after joining.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Requirements&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;After signing up, ask if they want the app now&lt;/li&gt;
&lt;li&gt;If they do

&lt;ul&gt;
&lt;li&gt;Ask them to fill out a quick survey&lt;/li&gt;
&lt;li&gt;Get OS info&lt;/li&gt;
&lt;li&gt;Accept beta terms&lt;/li&gt;
&lt;li&gt;Show install link&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;If they don't want to do all that

&lt;ul&gt;
&lt;li&gt;Let them know I'll reach out during the next batch&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;/ul&gt;

&lt;p&gt;I have the requirements, so now I can start designing. Because I have a UI library in my back pocket, I can focus on UX.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Existing UI&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Currently, not much happens after they click "Sign up". They just see a toast that basically says, "Talk soon!"&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft9adbgvmip0c7fqy16en.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft9adbgvmip0c7fqy16en.png" alt="Derivv Pro beta signup form UI" width="800" height="269"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The new flow gets triggered once they click "Sign up".&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Sketches&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;They key with sketches is to flush out the rough idea. Some tweaks will inevitably be made and details will need to be filled in once coding begins.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Firqmncl9qvb3csx84oq0.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Firqmncl9qvb3csx84oq0.jpg" alt="install dialog sketch one" width="792" height="612"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fizddea3x4a2ywaikz0xd.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fizddea3x4a2ywaikz0xd.jpg" alt="install dialog sketch two" width="792" height="612"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Finished feature&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;There are some slight deviations from the sketch. Overall, it follows pretty close.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ficelx7xglfrf0nxaksft.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ficelx7xglfrf0nxaksft.gif" alt="Derivv Pro Beta Signup Feature" width="400" height="304"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
    </item>
  </channel>
</rss>
