Tag Archives: Design

Moving from Sketch to Figma

Dive into the world of UI design, and learn why Figma is a game-changer! In this blog post, we’ll explore why Figma stands out among its pals like Sketch and Adobe’s XD. Plus, we’ll spill the beans on how to whip up a fun and interactive project using Figma.

Why choose Figma, you ask? Well, my journey started with Adobe XD, and while it was awesome for creating screens and prototypes, sharing designs became a bit of a puzzle. Then, in the magical land of Oktana, we switched to Sketch and InVision. But, whoa, it was like taking a step back. That’s when I waved my Figma wand and convinced our client to join the Figma party. And guess what? They loved it!

Essential elements that make the migration from Sketch to Figma easier

Here are the magic ingredients that made the migration from Sketch to Figma a breeze:

  1. Figma’s Flexibility: It works seamlessly in your browser or as a handy app.
  2. Team Power: Real-time collaboration made the file frenzy a thing of the past.
  3. Prototyping Pleasure: Integrated prototyping that’s a designer’s dream.
  4. Safety Net: Auto-save with online hosting because, well, life happens.
  5. Code Magic: Code generation for smooth handoffs.

Steps to create a design in Figma

Now, let’s talk about putting these Figma wonders into action.

Step 1: An Idea

In my workshop, I spilled the beans on creating a fantastic app for pet owners. It all begins with a brilliant idea.

Step 2: User Story

After identifying the pet-care problem, we crafted a User Story. For our app, pet owners create an account, provide pet details, and get personalized health suggestions, vaccine tracking, walking logs, nutritional tips, and a network of fellow pet enthusiasts.

 

Step 3: Benchmark Ideas

But before diving into Figma, do some homework! Research similar products, grab design books, and soak in the inspiration.

Some useful tools:

Step 4: Sketch

 

The sketch phase on paper involves ideation, brainstorming, and rough conceptualization of design ideas. Sketch out layouts, user flows, and interface elements. This analog approach allows for rapid iteration and exploration of different design concepts without the constraints of digital tools.

Step 5: Wireframes in Figma

It’s Figma time! Start by creating a collaborative project for your team. Invite them to annotate and make changes. Share the early wireframes with stakeholders for a reality check, ensuring alignment with project goals and requirements from the outset.

Step 6: High Fidelity

Once the low-fidelity wireframes get the green light, dive into the high-fidelity design phase. Collaborate, iterate, and bring your idea to life. Expect this phase to be a marathon, with meticulous attention to detail and continuous refinement to achieve the desired outcome.

Step 7: Prototype

Feedback is in; changes are made – it’s prototype time! Test it with users and stakeholders. If the nods are plenty, congrats, you’ve got a winning product. Use Figma’s Dev Mode to share your design masterpiece with developers. Divide features into tickets or phases for a smooth ride to launch.

Step 8: User Testing

Utilize Figma’s interactive prototypes to simulate user interactions and gather valuable feedback on usability and functionality. Incorporate user insights to refine the design further, ensuring a user-centric approach throughout the development process.

Step 9: Handoff to Devs – Dev Mode

Transition from design to development by providing developers access to design specifications, assets, and code snippets directly within the platform. Streamline the handoff process and facilitate clear communication between designers and developers, ensuring a smooth transition from design concepts to fully realized products.

Migrating from Sketch to Figma brings many benefits that streamline the design process and enhance collaboration. Figma’s flexibility, real-time collaboration features, integrated prototyping capabilities, auto-save functionality, and code generation tools make it a compelling choice for designers and teams.

At Oktana, we understand the importance of seamless design workflows, and we are experts in leveraging tools like Figma to maximize productivity and creativity. 

Thanks a ton for hanging out with me on this Figma adventure!

How to Create Accessible Websites

The Web is fundamentally designed to work for all people, whatever their hardware, software, language, location, or ability. We meet this goal when we create websites that are accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.

“The power of the Web is in its universality.

Access by everyone regardless of disability is an essential aspect.”

Tim Berners-Lee, W3C Director and inventor of the World Wide Web

When websites, applications, technologies or tools are badly designed, they can create barriers that exclude people from using the Web.

Who Benefits from Website Accessibility?

Website accessibility is useful for everyone and essential for people with different abilities.

The four principles of the Web Content Accessibility Guidelines

Perceivable: The information cannot be invisible to all of a user’s senses.

Operable: The interface cannot require interaction that a user cannot perform.

Understandable: The content or operation cannot be beyond the user’s understanding.

Robust: Users must be able to access the content using a wide variety of user agents, including assistive technologies.

Here are some tips to put into practice, to build inclusive digital products:

1. Design for users on the autistic spectrum

Try to use simple colors and avoid high contrasting ones.

  • Use simple sentences.
  • Make buttons descriptive.
  • Build simple and consistent layouts.

2. Design for users of screen readers

  • Describe images and provide transcripts for video.
  • Follow a linear logical layout.
  • Structure content using HTML5 <h1> <nav> <label>
  • Build for keyboard use only.
  • Write descriptive links and headings.

3. Design for users with low vision

  • Check Text Contrast: To ensure that most users can see and read your content they should have at least a color ratio of 4.5:1 or higher for regular-sized text, 3:1 for icons, and large text (24px and above or 18px bolded text). 
  • Use Color and Iconography Wisely: Don’t use color as the only visual means of conveying information. Differentiate elements with a second indicator, such as informational text, icons, textures, or thicker borders.  Ensure that text and informational icons have enough color contrast.

4. Design for users with dyslexia

  • Use images and diagrams to support the text.
  • Align text to the left and keep a consistent layout.
  • Consider producing materials in other formats (for example audio or video).
  • Keep content short, clear, and simple.
  • Let users change the contrast between background and text.

5. Design for users with physical or motor disabilities

  • Make large clickable actions.
  • Give clickable elements space.
  • Design for keyboard or speech only use.
  • Design with mobile and touchscreen in mind.
  • Provide shortcuts.

6. Design for users who are deaf or hard of hearing

  • Write in plain language.
  • Use subtitles or provide transcripts for videos.
  • Use a linear, logical layout.
  • Break up content with subheadings, images, and videos.
  • Let users ask for their preferred communication support when booking appointments.

7. Design for users with anxiety

  • Give users enough time to complete an action.
  • Explain what will happen after completing a service.
  • Make important information clear.
  • Give users the support they need to complete a service.
  • Let users check their answers before they submit them.

As you can see, if you follow these basic tips you can improve the overall user experience. Accessible Design can enhance your brand, drive innovation, and extend your market reach.

Here I share some useful tools for Accessibility Testing and interest resources about this topic:

Let’s make the world a better place and let’s begin making digital products inclusive. ?

Andrea is one of our stellar UI/UX designers. Find out more about our team of designers here, or take a look at other interesting articles in our blog.

Accessible Website

Resourcing with Oktana

When you outsource development, nearshore or onshore, you probably wonder about resources and whether they’re going to work well with your internal team. At Oktana, we consider our team to be your development team. We take pride in working to get the right help for each project, whether it’s a designer, developer or a whole team. Many of our clients even choose to continue with the same team on multiple projects.

Let’s take a look at how resourcing works at Oktana.

Step 1. Gather data

First, we need a clear picture of your company and project. Your account manager will work with you to understand skill requirements, project scope and anything else you feel is essential. For example:

  • Will we work alongside your internal team? 
  • Will we need to integrate with existing systems? 
  • Are there preferred development platforms, frameworks or languages? 
  • Is business analysis, design or test automation part of the scope? 

We work with you to define “done” for the project. We are an Agile company, so this often means defining a minimum viable product, or MVP. These conversations help us determine a reasonable start and end date for the project.

Step 2. Select resources

Now that we have an idea of your needs, our resourcing team will build your development team. We want to ensure your team brings the skills to meet all of the technical requirements for your project. We also want to ensure they’re a good fit in terms of personality and experience.

Everyone should feel confident in their ability to work together.

Step 3. Review resources

As our resourcing team builds your development team, you have a few options depending on how involved you want to be in the process. You can let us handle the entire process, or you can be far more hands-on. 

If you want to be more hands-on, we’ll work with you to review a set of developer profiles. You can also conduct developer interviews to meet each team member before you sign-off on your development team.

What’s a developer profile?

Our resourcing team compiles a developer profile for each of our developers, which provides you with a good overview of their skillset, certifications and experience.

Step 4. Meet your development team

Our teams receive English tutoring and overlap with most of the US workday. Because of this, you are always able to chat or run planning sessions, review specs and do demos face-to-face by video. This is your development team. 

As your project grows, or requirements shift, your account manager will work with you and our resourcing team to adjust the team to meet those needs.

We hope all of this information helps you understand the resourcing process better and by extension how our teams work. Our team has worked with different organizations and their projects. We are Salesforce platform experts and offer custom development to help you build your platform and solve the right problems. If you want to know more about our work, go check out our latest success stories.

Gathering Leads with Royal Caribbean

At Oktana, we’re heavily invested in the world of mobile app development. We believe that building new mobile tools that let our customers interact with their Salesforce instance out in the field is essential to the future of the platform. One of the most recent projects that allowed us to utilize our Mobile development skills is our project with Royal Caribbean for their Celebrity Cruises premium brand.

Celebrity Cruises participates in a number of large conferences and expos every year where their sales team is out in the field talking to potential clients and customers. They needed a way to easily gather data from the people they met for giveaways and potential sales leads. Additionally, this needed to be a tool that would allow them to gather the data while offline and then sync with Salesforce when they reconnected later because while moving around at conferences they can’t count on network connectivity.

Oktana was brought in to build an iPad app that would accomplish these goals. The app was built and designed internally by us. We designed an app that was slick and would be impressive looking so that when potential customers saw it on the floor it would look like something you would expect from a premium brand like Celebrity Cruises. We needed to make sure it met all of the client’s needs from beginning to end which included both the technical aspects and the app’s appearance.

What tools did we use to accomplish this task? We built the app using Salesforce DX along with Forcereact and the Salesforce Mobile SDK. The app also talks directly to the Salesforce Sales and Marketing Clouds. When a member of the sales team at Celebrity Cruises is preparing to go out to the floor of a show or conference they simply need to launch the app and select the Salesforce campaign the leads will be entered into. Then when they disconnect from the network the app will store all their leads locally and when they reconnect to the network at the end of the day it will sync them with the proper campaign. Additionally, when leads are entered the team member has the option to edit them for errors or even delete them before they sync to keep their campaign list clean.

This project was a perfect fit for us because it allowed us to utilize our experience in mobile development and Salesforce to make a unique tool for our client. The key elements to highlight for this project include:

  • Salesforce DX
  • React Native
  • Salesforce Mobile SDK
  • Apex
  • Sales Cloud
  • Marketing Cloud
  • iOS
  • UI/UX Design

While we have been working on this project for Celebrity Cruises we have also been helping Royal Caribbean with ensuring their tools meet GDPR requirements in the EU. We created tools to ensure collected data could be anonymized upon request. Royal Caribbean has been a great partner for us at Oktana and we believe this app was a great showcase of our skills in both Salesforce and Mobile development.

If you are a Salesforce partner looking to partner with experts to help you provide the best custom app development solutions to your clients Contact us. Our team will give you more information about these services. 

Building Demos and Prototypes at Oktana

Everyone at Oktana is the best of the best at what they do and the incredible people that make up the Demos and Proof of Concepts team lead by Gonzalo is the perfect example of that. Whether it’s a Salesforce, mobile, or web project the team works hard to make our client’s dreams and ideas and make them a reality. The needs of our clients always come first and as such the team has developed into an extremely agile machine that is capable of producing and iterating on projects quickly while responding to new and changing requests.

The Demos and Proof of Concepts team’s role are to help our clients work through the entire prototyping process. First, we bring on all stakeholders and map out what the client’s goals and vision for the project are. The team is extremely adaptable and capable of discussing tasks at a very high level regardless of how fleshed out the idea is. Once all these ideas are captured the design team here at Oktana gets to work on designing the prototype. The design process here is highly iterative as we want to make sure our work is aligning with all of our client needs.

Once the design has been completed, the assets are then passed on to the engineering team. The engineering team then takes pre-built templates and reworks them into a working prototype for the project at hand. They continue to iterate on the concept with the client to ensure that it meets their needs. Once this process is completed the client will either decide to move forward on the development of the full product or not. If they opt not to move forward all code is then scrapped and the team moves on to its next project.

The Demos and Proof of Concepts team does incredible work for our clients with very little notice. They’ve built demos and prototypes that have been used for presentations in front of thousands of people at major conferences. If you’re ever in need of a demo or prototype then our team is here for you.

If you are a Salesforce partner looking to partner with experts to help you provide the best custom app development solutions to your clients Contact us. Our team will give you more information about these services.