Bixacora

Bixacora

Background | Challenge myself gaining skills on Frontend development to better communicate with developers

Problem | Needed a way to show up my Front end design skills to the world

Goal | Learn descriptive (HTML and CSS) and programming (JavaScript) languages under the premise mobile-first and let the recruiters in the UX/UI industry about my skillset

go to the site
View Project
UXER EXPERIENCE DESIGN PHASES

PROCESS

1

RESEARCH
go

2

EMPATHIZE
go

3

CREATION
go

4

TEST
go

5

DELIVERY
go

1

RESEARCH
Defining project brief

Objective

To build a responsive website that will showcase a well­curated design portfolio to one’s own professional network as well as potential employers using HTML, CSS, and JavaScript.

Context

As a professional UX/UI designer, it is become essential not only say but to demostrate my hands-on technical skills. For that I have created Bixacora project, which is just an ongoing project still under discovering phase. The concept arises from the necessity oh having a way to align with yourself so to bring the best of you.

The goal of the project is to create a working responsive website with a few subpages that feature key information about Bixacora, animations, a way to contact me.

The 5 W’s

  • Who – Potential employers and recruiters or anyone who is interested in my professional work.
  • What – A website built with HTML, CSS and JavaScript
  • When – The website might be visited when a potential employer is checking out my Front-end skills
  • Where – Potential employers might look at the website from their offices, while networking contacts might acces it from their phones
  • Why – For the potential employers or clientes to learn more about my professional skills, designes or contact me
Meeting the user

User stories

  • As a hiring manager, I need a way to find the CV and a varied set of design work when looking for a unicorn designer
  • As a hiring manager, I need a way to check the Front-end skills when looking for an off-road designer
  • As a design manager, I need to check photos and reports of  (design thinking) workshops when looking for a team member with facilitation skills
  • As a design manager, I need to see a creative layout with a personality on their own when looking for UX/IU designer
  • As a product owner, I need to know how knowledgable on the team communication range especially with developer team the candidate is  when looking for a perfect UX/IU designer
  • As a product owner, I need to make sure the philosophy of mobile-first is present when looking for a successful UX/UI designer for my team

User goals

  • Learn more about my Front-end skills
  • Check about my process of working in such a project
  • Revise the mobile first philosophy is conducted
  • Find the Resumé
1 | RESEARCH

2

EMPATHIZE
3 | CREATION
4 | TEST
5 | DELIVERY
User persona

Assumptions

I believe products owners, product manager or any recruiter looking for UX/UI design role with Front-end skill could check it out going through a website built myself. If at some point this is not clear I would go for User Scenario, User testing, user experience map until I find what ever problem-solving.

1 | RESEARCH
2 | EMPATHIZE

3

CREATION
4 | TEST
5 | DELIVERY
low fidelity wireframes
high fidelity wireframes
CLICABLE First prototypes
navigate through desktop
navigate through tablet
navigate through mobile
style guide
1 | RESEARCH
2 | EMPATHIZE
3 | CREATION

4

TEST
5 | DELIVERY
Cross-browser testing

Code Quality

A code quality testing and solved was performed in order o prevent bugs and display errors on the different current browsers. Ensure a code quality with linters in all the pages and  avoid misspellings, ambivalente syntax in addition to easy readable code and having consistent code.

Cross browsers

The cross-browser test was proceed throughout the main two operating systems on the marked. Whether online service exits, the chosen procedure was by manual testing because it is a personal project. Despite I have found some issues on Internet Explorer browser, I decided not to take care of it since it is used by a very little amount of users nowadays. Due to the lack of time and resources on the process of the project I decided not to test on tablet and other different devices.

Accessibility

Following Accessibility Guidelines WCAG 2.0

Accessibility is a priority in this process. It can be an arduous task as It would mean to exclude some ideas regarding on the initial design. To make sure the site pass the minimum accessibility, the website has been designed and checked under the minimum requerements of WCAG 2.0.

Usability test

Goal & Success criteria

User criteria & Participants

Scenarios & Open questions

The scenarios have been created to cover goals and make sure success criteria would be evaluated correctly. 

The next open questions were where the a great list of interactions for improvements were found.

  • How was the orientation within the website for you?
  • Was there something you really liked or really disliked?
  • Do you feel like there’s something missing?
  • Suggestions

Analysing

The three factors; frequency, impact and persistence has been used to measure the severity from 0 to 4 rating scale according to Nielsen Norman group. From goals and success criteria it is safe to say the usability test didn´t bring that much requirements for iterations. Although that doesn´t mean there wasn´t room for improvements, actually there was. From open questions there was found a lot of work for iteractions, some of them were implemented, others were filed for near future.

1 | RESEARCH
2 | EMPATHIZE
3 | CREATION
4 | TEST

5

DELIVERY
WEBSITE HOSTED ON GITHUB
go to the site
Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Youtube
Consent to display content from - Youtube
Vimeo
Consent to display content from - Vimeo
Google Maps
Consent to display content from - Google