Role
UX Design Lead, UX/UI Designer, Researcher
Project prompt
Redesign the byte-code.it website with a new appeal while as well improve its UX for a more Customer-centered approach to generate new leads.
Company Brief
Byte-Code is a consultancy company whose targets and goals are to help and improve mid-size e-commerce companies with a holistic, non-dogmatic, value-based approach to software development. Their approach is based on three main pillars: beyond agile, organizational coaching, and exquisite technology.
The proposition
To begin with the project, I elaborated a framework proposal to the client and Product owner to present and manage a timeline of their liking. The proposal was focused on the UX part with some improvements on the UI without considering the rebranding aspect. (Rebranding would be elaborated in a separate framework)
It was proposed the LEAN UX FRAMEWORK with a timeline of 6 sprint weeks for completion.
Project Vision
Assure that the customers or users are considered in the first place and the design decisions are made by keeping the user's goals, needs, and frustrations in mind.
Project Goals
1) Provide a linear simple flow to generate leads
2) Informative and direct with a friendly tone
3) Inspire a friendly feel with a modern look
2) Informative and direct with a friendly tone
3) Inspire a friendly feel with a modern look
THINK Stage
Kick-off
I organized a kick-off meeting with the main stakeholder and product owner to start with the project. During this 1 hour section, I asked 10 key questions that could help understand the company with their visions, goals, purposes, current problems and challenges, their target and needs, customer journeys, value propositions provided, prior user cases, and their competitors.
Competitor Audit
Thanks to the valuable information gathered on the kick-off I proceeded on running a competitor audit.
The main goal was to clearly understand the type of competitor, who is their audience, and what value propositions they offer. Furthermore, I completed a UX and UI audit focusing on First impressions, Interaction, Visual Design, and content.
Meet the personas
Utilizing the ICPs interviews and the info gathered in the kick-off I was able to create viable inclusive personas with realistic needs, frustrations, and goals. These personas were reviewed by the stakeholders and iterate to not miss any valuable points.
Customer Journey
Thanks to the kick-off I was able to recreate and visually design a proper customer journey map to help the stakeholders and myself track frustrations, emotional points, and opportunities. This map was done in collaboration with the PO and CEO.
Before closing with the THINK phase, a workshop was organized to review all the work done so far, gather feedback from other stakeholders, and review the next steps.
MAKE Stage
Information Architecture & Process flow
For the beginning of the MAKE stage, I worked altogether into the Information architecture and process flow of the new site.
Firstly, I studied the old site structure and elaborated a content taxonomy and site map. Next, I reviewed the content requirements from the kick-off and started to design a new site map. To save time, I combined the site map with the user flow to create a site flow map with several propositions.
I presented the site flow map propositions to the CEO and PO to gather their feedback and iterate from them. Once they picked the proposition of their liking, I worked on a content taxonomy that would be fitting to the proposition chosen while always keeping in mind the main lead goal and the personas' traits.
Wireframes
With the personas, the new site map, and content taxonomy in mind. I was able to elaborate 3 different layout propositions as blue wireframes. These wireframes were presented to the CEO, PO, and CTO to drag into a vote on which one to move forward.
Lo-fi Prototype
The comp 3 was chosen and proceeded to create a clickable lo-fi prototype from it to run a usability test. View the prototype directly below.
Lo-Fi Usability test
I proceeded to run a usability test with 5 participants that have not seen the wireframes before to test the looks and feel of the layout, study the navigation and flow, and the attitude toward the chosen layouts. I was able to gather useful insights to iterate on the Hi-Fi prototype.
UI Design
Before starting with the Hi-Fi prototype, I prepared a set of proposals for a new modern brand Identity. The only requirement was to always have an Orange color as their main color.
I prepared a set of moods boards to gather inspiration and set 3 color proposals with 5 Type proposals.
Moodboard
Color Proposals
Type Proposals
Design System
The dark theme and the 5 type option were chosen by the dev team and stakeholders. A design system was created from those proposals.
Hi-Fi Prototype
CHECK Stage
Hi-Fi Usability test
To start from the last sprint week the Check stage, I organized 2 groups of a usability test. The first group was composed of the same 5 participants from the lo-fi test. The second group was composed of 5 new participants that have never seen the wireframes nor anything regarding the project to gather new feedback from fresh eyes.
Positively, all the previous key insights were address and successfully resolved. However, new minor insights were found on this second usability test.
Design Critique and Final results
After the last usability test, iterations on the prototype were made to run a final test with positive results.
Furthermore, The whole process was presented to the stakeholders as a design critique on which was accepted with very positive feedback, and got ready to move on to rebranding and content preparation.
Next steps
As the redesign was completed, the project had to move on. The next steps in which I was involved as well were QA the development process and run live usability tests.
Lastly, this page has been set as well with constant success tracking to read the results and seek a positive impact on new leads.