Portfolio Design
Responsive Portfolio - UI/UX Design & Development
End-to-end user experience design, interface design, front-end development, testing and deployment of this responsive online portfolio
Entire UX design processes from research to conception, visualization and prototyping to UI development from coding to testing, deployment to version control and maintanance
This website is an online repository of all the projects I have completed in UX / UI domains. Being a developer myself, I disliked the limitations in the instant web development platforms. So I decided to design and develop from scratch using client side scripting languages to be cross-browser compatible and responsive.
Tools and Technologies
- Design Tools : Lucid Chart, Figma, Invision
- Front-end Development : HTML5, CSS3, JavaScript
- Development Environment : atom.io, Google Chrome, Chrome Developer Toolkit
- Image and Video Editing Tools : Photoshop, Microsoft Movie Maker, Windows Screen Recorder
- Versioning and Deployment System : Git, Github
- Software Model : Agile
UX Process
The project follows agile methodology and has been designed in several MVPs. MVPs are further broken down into a set of related features that contribute to progressive development of the product. Every feature is a collection of user stories which are put through the process of UX design, UI development, testing, release and change control.
Research and Analysis
I started out by creating a mind map focusing thoughts on the contents of the portfolio as depicted below:
Market Research : I identified UX portfolios of successful UX practitioners and surveyed the layouts used, the details included and the structure followed and formed a mental template of organizing the contents.
I also extensively looked through the job descriptions for the roles that I would be suitable for and align the information in a way that a potential employer to get to it with less effort.
Defining Personas
The purpose of this portfolio is to showcase my projects highlighting my experiences and knowledge in UI/UX platforms. Hence the major users of my portfolio would be human resource managers, hiring managers and peer workers.
Task Analysis
All the primary tasks for each of the user profiles are listed and the features are then consolidated and prioritized:
- 'Best At' statement on the home / landing page
- Project Tile display from the landing page
- Short description of each projects on the landing page
- About section with credo, strengths, weakness, short-term and long-term goals, hobbies
- Skillsets - categorized based on job roles pointing out the expertise on each
- Qualifications listing the academics, experiences, certifications and competencies displaying appropriate supporting documents
- Testimonials / citations / letter of recommendations
- Contact details - email / mobile number / Linkedin
- Project pages : process, visual and verbal descriptions
- Clickable index of sub-sections inside each project for easy access across the page
- Navigations / sub-navigations accessible anywhere from the website
Information Architecture
Based on the user profiles, the primary tasks performed by them and the tasks along with the features, the pages are decided and the information architecture is designed :
Low Fidelity Wireframes
Initially I drafted various possibilities of displaying projects clearly and immediately catching the attention of the user profiles. One page layout is chosen with side bar navigation that enables users to scroll as well as click on various sections to visit them.
The projects were tried out to be listed horizontally as well as vertically. By placing vertically, more description about each project could be described in the home page itself but eats up whole lot of space that increases scroll area. Placing it vertically and making it peek on the landing page; enables more projects to be displayed without scrolling at the same time, descriptions could be placed right below it.
The design is then refined and the low fidelity prototypes for the home page and projects page for both desktop and mobile are sketched in invision. The projects page would serve as a template for all the projects to be displayed.
High Fidelity Prototype
The high fidelity prototype is then designed for both desktop and mobile in figma
Build and Deployment
The resources from the high fidelity prototype are then exported for development. Coding is done in Atom.io text editor. Proper folder structure is maintained :
- HTML files are saved directly inside the root folder
- CSS files are saved inside a folder named 'css' under the root folder
- Image and video files are saved inside a folder named 'resources' under the root folder. Project specific files are then categorized into individual folders.
After coding the first MVP, the code is committed in git using the git bash and then pushed remotely to github. This website is hosted in mochahost. The committed code is then deployed via cpanel to get updated on the domain.
New branches are created from the repository where code enhancements are made. It is then tested in the localhost and then committed in the production environment.