Projects - Cicero

P1 - Planning

I began with planning and project analysis. This phase allows me to understand more about the brand, what it represents, and document key project information such as the target audience, required features, the minimally viable product (MVP), and examples for ideation.

I also define a clear scope, timeline, and budget if applicable which helps to keep the project on track. This stage is all about laying the groundwork and largely involves information-gathering; communication is key.

For this project, I gathered data on user expectations and pain points. All of this data was gathered across a variety of channels, including forum posts, videos, interviews, and reviews, then compiled into usable data. As for inspiration, I looked at industry standard software across a variety of niches to get a better idea of what users would be expecting from the UX and UI of the app. Lastly, I documented tools and resources that we would be using in the final product.

P2 - Ideation

With the groundwork laid out, I began the ideation phase. This phase is highly-iterative and typically begins with rough sketches and ends with a fully-designed mockup. The sketches allow me to brainstorm a wide variety of ideas for the layout and user experience of the site. In some projects, I will also draft a user flow chart for visualizing the user experience and page interaction. This phase is less technical and more creative; therefore, I made sure not to limit the flow of ideas and keep an open mind. The sketches for this project played around with positioning and component styles as well.

Using the sketches, I moved on to building wireframes. The wireframes for this project were indeed more technical in nature in order to build an intuitive piece of software that was accessible to a wide range of users. Consideration was also shown to site responsiveness, therefore separate wireframes were included for desktop, tablet, and mobile sizes respectively.

Lastly, I moved on to creating a set of fully-designed mockups with color, imagery, and icons that were ready to be translated into a fully-functional website.

P3 - Content

At this phase, I will take care of creating content for the site as it is needed. This is a short, transitional period that occurs after the final mockup has been created and before development begins.

Typically, I will create basic graphics, the site favicon, write copy, and gather media like images and videos for use on the site. I will then package this all up and prepare it for development.

For this project I carried out a few tasks:

Exported and packaged graphics, icons, and imagery. Components built in Figma were kept in a larger library for reference.
Exported documentation as PDFs containing key data such as branding guidelines, tools, and general notes. Previews were also exported for reference.
Retained snippets of copy for business page and other pages—including the home page and landing page.

P4 - Development

This phase encompasses a much larger list of tasks that involve building out the frontend and backend of the project. It ends with a MVP that has core features, hosting and domain setup, and any third-party API's plugged in and ready for deployment. Progress will typically be monitored via Github and testing will occur after site goes live.

This project consisted of full web design as well as fullstack development, here is an overview of what that entailed:

Build folder architecture for project on local drive, store assets, and create new repository on GitHub.
Backend: To start the backend, we setup our database with MongoDB and setup a few routing handlers. Other client-server interactions such as login authentication and performance optimizations may be needed.
HTML: Begin building components and pages section by section, line by line.
CSS: Setup the basic styling for page elements from top to bottom. Stylesheet is broken into sections based on type of content and considers KISS and DRY principles.
React: Used to build strong, reusable componets and sections for the website. Data can be easily fetched from server and injected into components as needed.
Accessibility: Going through a checklist of various accessibility tweaks for impaired and disabled individuals. Features like localization and text-to-speech are potential features to be implemented.

Cicero

Project Goal

Samples

Let's Get in Touch!