SWISSHTECH: Making reusable energy more accessible
OVERVIEW
This client requested a website redesign. Swisshtech is the parent company created by an inventor in order to bring awareness to and distribute his invention which is called the ArcRegen; a self-replenishing electrical generator that operates without any exhaust fumes. The design of the website has been a pain point for our client, and given that many users from investors to interested buyers would be navigating the site, the client asked for us to redesign the site in a way that made everything easier to find.
PROJECT INFORMATION
Design Practices: contextual inquiry, categorization, card sorting, site mapping, user flow, paper sketches, wireframing, digital prototyping
Timeframe: 4 months
Tools: Optimal Workshop, Miro, FigJam, Figma
ROLE:
Conducted contextual inquiry
Categorized site information
Created and conducted card sort
Analyzed card sort results
Developed paper and wireframe prototypes
Conducted digital prototype tests
The Challenge
Redesigning the site in a way that makes it easier to navigate for desired users.
UX Business Card Audit
First impressions is everything. When meeting investors, the first thing they see after shaking hands in this business card.
Positives:
Contact information is clear and easy to read
Improvements:
Confusing branding between Swisshtech and Arc-Regen The website is not easy to read The focus of the business card is the man, not the product The design is cluttered There's no balance between font color and positions The phone number is labeled, but not the email address
I personally went to individuals who fit into the categories of either potential investors or consumers and showed them the Swisshtech website in order to hear their raw authentic feedback on the layout.
UX Website Audit
Positives:
Navigation bar is easy to read
Inprovements:
There's a lack of balance. The website looks overwhelming and unwelcoming. Too many different fonts and colors are being used. The text in red comes off more as a warning, not a solution to a problem.
The background is distracting.
The text is hard to read.
Poor accessibility. It's a strain to the user's eyes.
User Feedback from the Website
“I honestly couldn’t understand the purpose of the RegenCoin due to all the technical language and the long paragraphs. It’s a lot to read.”
— Participant #1
“The website layout seemed a bit cluttered with the use of clashing fonts and colors.”
— Participant #4
“Certain graphics made the site feel busy and out of date. Some key information that I’d want quick access to isn’t readily available as well.”
— Participant #6
Results from the Card Sort
Insights Breakdown
Looking at the categorizations I saw that the main groupings revolved around information about the company and inventor and information on the products and markets with very little continuity with the donation and contact us categories.
show the difference between the current navigation and the new one.
After compiling this information, I then put together a site map for the overall structure of the website. I then made a user flow for buying the RegenCoin and redeeming an ArcRegen for the crypto currency.
After gathering feedback and learned that the website is confusing to navigate, I conducted a card sort.
After gathering the feedback on the site and learning that it was overwhelming and hard to navigate, I conducted a card sort in order to organize the informational structure of the website.
Site Map
USER FLOW (BUYING REGENCOIN)
USER FLOW (REDEEMING REGENCOIN)
Low Fidelity Design
The next step after making the site map was to make a low fidelity wireframe of the website.
Tested the low fidelity website design and the results
When asked to navigate the low fidelity website, participants found it much simpler to find the information asked for. Everything was organized in an intuitive way and walked you along the thought process behind the inventor and his mission.
After positive results from testing, I created the high fidelity design.
High Fidelity Design
The website now is more appealing to investors and general users due to the design being more concise and well-organized. The navigation of the site is more intuitive and you can learn about the respective processes without the pages looking cluttered. The development of the project is stalled due to the inventor investing more time into networking and trying to find investors in his ideas, but the next steps would be testing our high fidelity design and adjusting for any friction we might encounter.