Latest Work

Optio

Full-stack Social App

FaceID

Facial Recognition App

CBRC

Redesign of the California Bird Records Committee's website

Estercooks

Wordpress Food Blog

Personal Website and Blog

Ruby on Rails blog

UX Researcher's Portfolio

Professional portfolio

Optio

Multiscreen mockup of the website

The objective of this project was to build a large-scale social app that allows users to create clusters of friends they'd want opinions from, then upload content and get feedback instantly. Optio app was created during 4 weeks in collaboration with the full-stack developer using agile project management methodologies.

User Journey: I want someone’s opinion

Context: I’m shopping in a store and can’t tell if I should buy a red shirt or blue shirt.

  • I open up the page and log in
  • I take pictures of both of them and upload it onto the app
  • I select “Fashion” friend list group and it sends out a notification to everyone I’ve added in
  • that list to grab their instant opinion
  • Within 30 seconds I get 6 votes for the red and 2 votes for the blue!
  • iPad mockup showing profile page of the Optio app
    iPad mockup showing single poll page

    Features

  • Login/signup flow with the e-mail address
  • Create friend lists (e.g. “Fashion”, “Random”, “Music” etc.)
  • I can follow and unfollow friends
  • I can upload a piece of content (2 images) to compare
  • I can attach a friend list to a specific poll
  • I can see votes and user statuses updating in real-time
  • I can edit my profile and log out
  • iPad mockup showing friends page of the Optio app
    iPhone mockup showing friends panel of the Optio app

    I was the main contributor to the front-end using React/Redux, Material-UI, React Router. Also I was responsible for creating Friends List model and functionality for adding new friends list at the back end. We used Node/Express and MongoDB to manage the back-end side of this project, ZenHub to manage the workflows, GitHub for source control, and Slack for team communications.

    iPad mockup showing friends polls page of the Optio app
    iPad mockup showing friends list dialog of the Optio app

    My contribution

    • Profile, Friends, Friends Polls, specific poll pages
    • UI, functionality and database model of the friend lists
    • Header with the menu and friends panel
    • Material UI and mobile styling
    • Redux state container integration
    • Socket.io integration for real-time voting and friends status change
    Close
    Reducio

    CBRC

    Multiscreen mockup of the website

    The redesign of the website for the California Bird Records Committee was conducted by the students of San Francisco City College during one semester. As a team of students from visual design and web development departments, we worked together to create a completely new look and feel for the website. Our main goal was to make it more user friendly and visually appealing. Another important task was to allow users to access and send records from their mobile devices.

    My most challenging task was to present the requested data from the database in a clear and attractive way. As a result, the table allows easy access to information and adjusts to the size of the device.

    The table reflecting database search results on iPad screen
    The table reflecting database search results on smartphone screen

    Another important task was to transform the Rare Bird Gallery into the visually appealing page with the search option. The user can now filter images by the bird name, zoom and slide through images.

    iPad mockup showing Rare Bird Gallery page
    Smartphone mockup showing Rare Bird Gallery page

    My contribution

    • Clean, responsive design
    • Reports and lists pages
    • Layout and functionality for the Rare Bird Gallery
    • New look and structure for the database query results
    Close
    Reducio

    Personal Website and Blog

    Multiscreen mockup of the website

    During this project, I created a personal website and a blog for the school teacher using Ruby on Rails. Besides providing introductory and contact information, the client needed a blog-like solution for posting educational resources, summaries of the lessons, useful links, and any other school-related data.

    Smartphone mockup showing a single post with social share buttons and tags
    Smartphone mockup showing tags, archive and recent posts fields

    In the final product, the author has access to the author's console, has the ability to create, edit and delete posts, attach media, add tags, links, etc. Users can read posts, search them by categories, date or keywords and share them on social networks. The website is intended for Russian-speaking users.

    This project was completed using Ruby on Rails, Bootstrap, Sass, PostgreSQL, and jQuery. Other tools used were Cloud9 development environment, Slack for communication, and Heroku cloud platform for deployment.

    Smartphone screen showing website

    Features

    • Smooth, responsive design
    • Search option, tags, archive
    • Secured login and logout
    • Text editor in Russian
    • Clear navigation
    • Social media buttons
    Close
    Reducio

    Professional Portfolio

    Multiscreen mockups of the website

    The client, a UX researcher and designer, needed a clean, straightforward solution to showcase her work. The project-based design focuses on demonstrating the final product and relevant documents such as user flow, competitive analysis, wireframes, etc. The biggest challenge was to display a lot of visual content in a simplistic, yet attractive way for the convenience of potential users and employers.

    Features

    • Image slider for showcasing the final product
    • Scroll-activated sliding header
    • Responsiveness to different screen sizes
    • A zooming effect on project materials
    • Vivid colors and functional design

    What I've learned

    • Sketch
    • Invision
    • UX designer's workflow
    Close
    Reducio

    Facial Recognition App

    Multiscreen mockups of the website

    As a side project, I built a Facial Recognition app using React framework and Node.js at the back end. The most interesting challenge for me as a front-end developer was to create the server that will handle any requests from the app, including user registration, user data change or image processing. To detect faces in the images, I used the Face Detection Model provided by the Clarifai API. This service uses artificial intelligence to recognize the visual content. The user submits an image, and the coordinate locations of where the faces might appear are returned.

    Using FaceId, visitors have the ability to register, sign in, modify profile data or delete their profiles completely, take selfies and send them for the face recognition, update the avatar and stay logged in when they return to the website.

    What's next? The next challenge would be to use other image recognition models by Clarifai like demographics prediction or apparel recognition to make the image feedback data more interesting for the users. In the future, I would also like to use IndexedDB API along with Service Worker to make the app more performant and to have more control over caching strategy.

    Ipad screen showing FaceID website

    Features

    • Fun, animated background
    • User-friendly form error messages
    • Secured login and logout

    What I've learned

    • Redux for state management
    • Express.js and Knex.js to handle server data
    • How to store passwords securely using encryption
    Close
    Reducio

    Wordpress Food Blog

    Multiscreen mockups of the website

    The client for this project - a private chef and a health coach - needed a website that will help her share the benefits of wholesome nutrition and advertise her services. The initial questionnaire and further discussions with the client made it clear that a blog would be the best solution in this case since it will make it easy to add new updates for recipes and posts describing the benefits of plant-based nutrition and a healthier lifestyle.

    I used Soledad Wordpress theme that provides a convenient recipe addition to each post so all information about ingredients, nutrition facts and cooking instructions is nicely organized and visually attractive. However, a lot of customization was necessary. A home page begins with the featured slider and also gives a short introduction to what visitors can expect to find on this website.

    Ipad screen showing a website's gallery page
    Ipad screen showing a website's recipes page

    The bright color palette for this website was chosen based on the client's Caribbean background and plant-based nature of her cooking. The green logo represents a healthier lifestyle and eco-friendly food choices that the client advocates through her blog posts and recipes.

    Ipad screen showing a website's gallery page
    Ipad screen showing a website's recipes page
    Ipad screen showing a website's recipes page

    One of the important features that needed to be implemented was the clear organization of the recipes. As the content is expected to grow fast, it was necessary to organize recipes by categories on the 'Recipes' page as well as in the menu. The tag system and the search bar can also help users browse the website.

    Ipad screen showing a website's gallery page
    Ipad screen showing a website's recipes page

    During the work on this project, the client had some new ideas that needed to be implemented as well. Therefore, the new client form was added to the 'Services' page and images on the 'Gallery' page were reorganized in a way that best shows their different dimensions.

    Ipad screen showing a website's gallery page
    Ipad screen showing a website's recipes page

    One of my favorite features is the Instagram gallery in the footer. Since the client originally started to share the content on Instagram, it was important to add it to the website's layout.

    Ipad screen showing website footer

    What's next? In the future, the client wants to add more services and implement the payment system on the website. In addition, the subscription to the new recipes and free meal plans should be added as well to attract new clients.

    Features

    • 100% responsive design
    • Bright colors reflecting client's Caribbean background
    • New client form
    • Recipe categories
    • Clear navigation

    What I've learned

    • Wordpress theme customization
    • Wordpress plugins like WPBakery Page Builder
    Close
    Reducio

    Olga and I worked on my professional portfolio. She is great to work with. Not only is she an easy going person, but she has ingenious web skills with an eye for detail. Olga is very innovative and she was looking for new solutions and fresh ideas for my website. Olga is a fun person to work with and is always helpful and insightful. She is a hard worker and sticks to deadlines.

    Anna Vinogradova, UX Researcher and Designer
    Check other reviews at LinkedIn!

    About me

    Hi, my name is Olga Fomin. Who am I? I'm a hard-working, San-Francisco based front-end web developer with a background in the humanities. I enjoy creating beautiful, fast, responsive websites of the highest quality.

    Open my resume

    Front-end developer

    Since my career change 3 years ago I got truly passionate about web development that combines creativity with logic, visual elegance with functionality.

    Philologist

    I have a background in philology and pedagogics. In my free time, I enjoy translating courses and videos and solving linguistic puzzles.

    Ballet dancer

    I'm an adult ballet dancer. Ballet is all about control and balance and it helps me achieve the same in my everyday life.

    Instagrammer

    My Instagram feed reflects the beautiful or comical things I see in the world and in San Francisco in particular.