DrawPI, Inc.
Developed UI mockups and prototypes and troubleshot UX responsiveness.
Duration
Two months
Role
UX/UI Designer, Researcher
Tool
Figma
Overview
*Disclaimer: I signed a NDA, so I cannot share all components and sketches created.*
DrawPI, Inc. is a software company that allows anyone to create REST APIs without the hassle of coding! Their “point and click” system lets you create lines of code and easily share documentation all within one system.
Scope: Research and identify key features for the client’s website that will engage users while learning about DrawPI’s services. Afterwards develop UI mockups and clickable prototypes that clearly demonstrate functionality for the portal.
First Project - Website
My first task was to create a clear style guide to ensure all teams are updated. This was created in Figma and shared on Zeplin to the design and development team.
Homepage
Next on my list was working on the homepage. It delivered the basic details a new user would need to know:
Four reasons to use DrawPI
A REST API example
Disclaimer for $100 credit when you sign up
Although simple, the website looked like the bare bones of something amazing. It was evident the homepage was missing important features, but it was difficult to say what they were without conducting a competitive analysis.
So I checked out four competitors who provide similar services and noted what features were missing from DrawPI.
The key features I saw missing were:
Fixed nav bar
Larger and bolder header title
Larger and more CTA buttons throughout the page
A highlight of top features
Animation to engage the user
Final sketch with new features added.
In the final prototype you can see I added several design components:
Color differentiation and titles
I used color and small titles to separate each section to organize and orient the user while scrolling. This was inspired by WCAG 2.0 standards - color should not be the only way to differentiate between sections.
Carousel of images
I created four lo-fidelity mockups that serve as images that vaguely illustrate pages in the portal. Each image has an explanation below and a CTA link to encourage users to sign up. I chose to use the carousel method to save space and minimize the amount of scrolling needed.
Animation
I saw animations prevalent on competitors’ websites and noticed how engaging they were. The client agreed to include animation to draw in more users and keep them interested in learning more. In the clickable prototype, I designed a typing animation in the “How It Works” section. It makes the user feel like they are actually testing the service and searching for fruits.
Please see below for more examples.
Second Project - Portal
Onboarding Process
The top request the client had was creating a onboarding process for new users when activating their account. My initial thought was to create a card introduction because that is what I am used to. However, upon research I found several templates to choose from including:
Card Introduction or “The Nickle Tour”
Coach Marks, Tooltips, and Guidestones
Guided Task Completion
Use Case Tour
I designed this pulsing touchpoint based on the one found in Slack because it combines the Coast Marks, Guided Task Completion and Use Care Tour ideas into one.
Not only does the touchpoint initiate the onboarding process, it catches the user’s attention with subtly and doesn’t overwhelm the user with large blocks of text. Lastly it prompts the user to try one feature at a time with the option to opt out of the tour.
Buttons and Animations
As I stated in the Homepage section, I tried to bring animation to both the website and the portal. Below are three buttons I created and why they were necessary:
“Previous” and “Next” buttons: The blog page was difficult to navigate between different posts without constantly returning to the main “Blog” page. I added the previous and next buttons to the bottom of the page for ease and added the arrow while hovering effect to alert the user which article to expect.
“I’m Ready!” button: This button was added into the portal to start a project.
Progress Bar: The progress bar navigates the user in the new feature coming to DrawPI’s portal. This was based on Microsoft Azure and was welcomed by the client.
Future Recommendations
During my research, there were many features and functions I wished I could add to my clickable prototypes. Among them were the following:
FAQ Section
This is a feature I highly recommended to the client because all the competitors do have a FAQ section, whether it is on the bottom of the homepage like Wix.com or as a separate page.
Since not all users who come across DrawPI might know what a REST API is, it is important to provide as much information as possible.
Trusted partners
This is another feature I saw prevalent on Digital Ocean, Google Firebase, Telnyx and Twilio. This would be a future addition since DrawPI officially launched their new website in September 2020. I explained that having a list of trusted partners would boost their credibility but also show potential users what laterals can use this service.