fujitsu frontech
role
lead designer
time
summer 21 - spring 22
tools
figma, miro, elementor pro, adobe lightroom & photoshop
create a design that allows users and potential clients to easily navigate the website while being able to find the retail and cash management solutions they need for their business
goal
improve on the experience for thousands of employees and expedite their workflow
impact
The previous design of the website was outdated, unsightly and hard to navigate. Many of the CTAs throughout the website were not obvious to the user with user control and freedom while the overall aesthetic and design being unattractive. The website was not drawing in many lead generations and often times, confused clients when they were searching for a new retail product/solution.
problem
Furthermore, the website scored low in regards to performance, best practices, and failed all WCAG AA & AAA practices for normal text, large text, and graphics/UI components.
Due to the limited time frame, I was only able to conduct one usability test with one user. The user profile was a 19 year old male currently enrolled in an undergraduate university, studying Quantitative Economics. He currently is single, frequently uses the internet for school, work, and personal use.
During the pilot test, I was able to better understand the general user experience when navigating the FFNA website as a first time user.
The general consensus from the interview I conducted was that the website is somewhat difficult to use at a first glance, and doesn’t clearly communicate what exact products and services the company has to offer. Not only that, there is no clear pathway to inquire more about purchasing any products and many pages are ambiguous as to what they’re really showcasing, like the ‘White Papers’ page. The general organization and aesthetic of the website was rated to be lower than average, with the design being rated a 3 out of 7 and the organization a 2/7. The user also noted that there was inconsistency throughout the website albeit the general functions are simple and shouldn’t be as confusing.
In regards to the tasks, my user was able to complete most of the tasks with little to moderate difficulty, hence a small number of questions being asked. However, the tasks did reveal that the user took some time searching for different parts of the website, which could be due to the fact that they are unfamiliar with the industry of the company or possibly to the confusing organization.
Overall, the pilot test went smoothly and the website was ready to access as well as the survey/questionnaire process. There were a few typos and small issues throughout the moderator script and questionnaire, but the issues did not impede any usability testing.
research
Prior to starting the design process, I conducted a thorough review of the existing website and noted design discrepancies and issues. The full site review can be accessed here. After assessing the state of the website, I moved onto website structuring to better organize different sections of the website.
The original site was difficult to navigate and had unnecessary header pages. Using Miro, I created a website tree structure that reflects the current page organization and the intended updated page organization.
Once page organization was finalized, I began researching other IT and retail companies to observe what their website design looked like. By analyzing their visual presentation and user interface, it gave me inspiration and knowledge to create a new look for Fujitsu Frontech North America. I noted aspects I liked from different companies to keep for future reference, which can be seen here. I then moved on with the design process through drafting up low-fidelity wireframes. Using Figma, I started re-designing the layout and format of Fujitsu Frontech North America's website. All lo-fi wireframes can be seen here.
procedure
After drafting up the lo-fis and getting approval from my marketing director, I was able to move on to the high-fidelity wireframing process. There were a few changes from the low-fidelity wireframes, like decreasing the website margins and increasing side padding so that users can read content that is centered towards the middle of the screen, rather than having to strain all the way to the side. I also increased the sizing in between sections to make it easier to differentiate and to also make the site less crowded. All high-fidelity wireframes can be seen here.
However, the parent company Fujitsu recently went through with a brand redesign, which led to a revamp of our visuals. Here is what the current website design looks like.
Overall, my goal was achieved and I successfully revamped the old, outdated website with a new, modernized design that incorporated a more pleasant user flow that allowed the consumer to participate in the exploration process in a sleek way. Learning Elementor Pro presented a learning curve in understanding the software and to problem-solve when faced with issues that prevented me from translating my designs directly into a functional site, but I was able to overcome those obstacles with the final product. I was very satisfied and content with the outcome and would like to make the website more user-friendly on different platforms as well as to ensure proper accessibility, but due to the project scope I was constricted on time.