Validate user needs
Testing
Then I conducted my own usability test because the company research resources were unavailable. I did five usability sessions by recording conversations and absorbing people’s interactions on the website. (Please reach out for the detailed testing report.)
Here are the main findings:
Kickoff (or get kicked off)
I wanted to user survey to collect data, but after four days it went live, none of the people I sent to finished the survey questions. Then I decided to take a different approach by conducting interviews to understand why.
Fun yet painful fact: people don’t like scientific surveys, especially those with a lot of writings! (Here are my Survey Questionaries. If you have any suggestions to better the survey, please do let me know!)
While I was analyzing the market and conducting user interviews, I also created a style type to touch base with my stakeholders on color and style to make sure we stay on the same page.
Reach Out for a Meeting
Someone using the website to look for job opportunities can also contact the team directly to learn further info if not provided on the site.
Check Out the Leadership
Leadership represents the company's reliability and is shown right below the company About section, as the team is relatively small at the moment. It can be moved to a separate page with team growth.
Design
After finishing the middle-fidelity wireframes, I rolled it out quickly and conducted a quick interview. There were no significant findings besides alignments and whitespace. So I decided to create high-fidelity wireframes to do more testings. (Well, I guess I did a great job on Mi-Fi wireframes since no bugs were found.)
Below are two main flows of the website:
-
People can check out the career opportunities on the site and reach out by email if they have any questions or concerns.
-
Those who are interested in learning more about the company can read the content about the company's mission, vision, leadership, and team. Of course, they can watch a video or download our strategic plans on the page as well.
Learnings
🧐 The only thing that I know is that I know nothing. -- Socrates Greek
The biggest takeaway from this project is that I know nothing, literally! This put me in a place to listen, learn and grow quickly.
⌛️ Meeting deadlines is more important than making pixel perfect.
As this project had a hard deadline, I was so caught by the non-existing “perfect solution” and tried to make the design pixel-perfect, which turned out useless because we decided to change many details.
🔐 Understand business objectives is the key.
I have to bridge the gap by validating users’ needs, as well as speaking business’ languages. Let the results speak for themselves.
Thank you for reading!
Users want something more...
After analyzing the testings, I decided to create another set of websites with a green theme because some people mentioned it’s more approachable and welcoming. Below are the two sets of web pages.
Home Option 1
Dark Theme
Home Option 2
Light Theme
Tech Option 1
Dark Theme
Tech Option 2
Light Theme
-
People think the home page looks really cool and innovative. They like the arrow that indicates scroll down.
-
"It feels sci-fi and modern. I like the style."
-
"Play video really drew my attention. I loved it."
-
"The page looks great. Clear and minimalistic. There is no confusion for me. It's easy to navigate."
Testimonials could be added to the Company or Career.
Nav menu sticks on Home but not on the Company page.
The Dropdown is not interactive and can not take to the Leadership section.
2 expectations about "Learn More" button: scroll down or a new page.
Contrast too low for some content.
-
Six generations of National Laboratory-scale devices
-
Cohesive color and hierarchy; clean design and layout
-
Well-structured information architecture, with filters and sub-menus
-
Languages that are easy to read for all viewers, no jargon
Collaborates with leading research institutions around the world
Cohesive color usage; interactive design in color
Massive educational info and videos
Intense red color
Some pages are not responsive on mobile device
A leading global commercial fusion energy company
Clear and minimal design; gradient colors in blue and green convey reliable safeness
Well-structured information architecture
Readability, font size too small
Accessibility, buttons are not interactive
-
A globe-spanning collaboration of 35 nations
-
Extensive information and well color-coded
-
Detailed popular science information for the general audience
-
Well-structured info architecture and category; content is easy to understand
-
Nav menu, secondary menu create confusion
-
Inconsistency layout & style
Research
I wanted to make Efinity the kind of website that makes people exciting and wants to explore more. In doing so, first off, I would need to understand what the stakeholders need and their vision for it. I decided to collect feedback and requirements from the stakeholders, especially on how they perceive Efinity's position in the field, brand style and culture, color, key messages, and inspiration for the brand.
Based on the answers I received from the stakeholders, we wanted the brand personality to be reliable, intelligent, innovative, successful. They have also pointed out that the website should be minimalistic and creative; as much as red brings excitement and passion, with nuclear technology, red is always associated with danger, so that it would be a big NO to the design.
Chatted with stakeholders
Then, because the industry is unique and hard to define target users at glance, I decided to focus on secondary research and market research before conducting any interview.
After a week of analyzing the most well-known companies’ and organizations’ current structure of their interfaces, I gathered engagement and feedback from the stakeholder, design peers, and friends. I also collected many successful and unsuccessful examples of this experience from other websites to perform a competitive analysis. Below is a brief view of some competitors. If you are interested in the full report, view it here Competitor Research Ramp-up.
Dive into the NEW-clear world
STAY WITHIN SCOPE
Trying different approaches is excellent, but make sure to stick with the plan. Otherwise, ruining the schedule is the result.
Learnings
REFLECTIONS
It's always difficult to fully understand the business goals from the outside, especially for a young designer like me standing from a distance. Being able to speak to listeners and collect feedback helped me understand the industry; however, if I could connect with stakeholders, it would help me expand the narrative beyond just the features.
Messy sketches? Fine, let's get ideas out ASAP!
Before diving into the pixel-perfect design process, I decided to use pen & paper to sketch out as many ideas and approaches as possible.
The main question here is to decide how much information I should put on the home page since we wanted it to be minimalistic and straightforward. I decided to break it into four sections - The Reason, Company's Mission, Technology, Team/Leadership - with a combination of video and image. So that people can learn whatever they are interested in rather than only the company's information.
I utilized a top-aligned menu to keep every feature easily seen and accessible. My goal was to make the navigation visible, accessible, and less complex.
Focus on the main features first
.png)
From the interview findings, people expressed expectation about seeing Company info page, which includes About, Leadership, History, Collaborations; Technology which includes the reason we need this new technology, the type of technologies we are using, the projects that we have accomplished or working on; News about the press, investments, other presence. No user had mentioned that they expected to see Contact info, presumably because it was too obvious and almost no website doesn’t have it.
I also created four task flows for the project. However, our main goal was to present information instead of asking people to accomplish any complex task, the task flows were straightforward and easy to understand.
Define
Once I synthesized my interview insights and other research findings with the stakeholders, we decided to focus on one key user group: Scientists or researchers from ages 30-40 years old who are interested in the nuclear field and potentially looking for career opportunities.
To generate user empathy and remind me and the stakeholders who we are designing for and why, I created a user persona based on the user feedback I received from my user interviews. This helped me make sure I was designing from the user's standpoint later in my process.
Hello, Andrew!
Meanwhile, I also sorted out the information architecture of the website/sitemap based on the industry and competitive research.
Currently, the most successful organizations in the fusion power field are ITER and General Fusion. However, either of their websites is easy to navigate due to the complexity of information layers. I decided to approach the problem by breaking down the professional information into bite-size in this MVP version.
Where can I find experts?
To better understand what the end user's needs, pains, and frustrations are, I decided to conduct three user interviews. It turned out to finding target users is harder than I thought and it became my first challenge. Because our fusion products are targeted at three groups of people: individuals, energy companies, and investors.
-
Individuals include physicists, scientists, or the general public who are interested in green energy sources.
-
Energy companies include the car industry who need reliable power to support their customers and want to embrace clean energy to create a positive impact on the future; Steel industry if they want to go green; Big oil companies if they realize the end of the oil area and look for a new path to provide primary energy to their customers.
-
Investors include VC firm investors or individual investors.
None of these categories is easy to be found. To overcome this challenge, I decided to focus on the first target audience group: individuals. Now that I had a brief idea about whom I wanted to focus on, I used my network and reached out to friends who are university professors, postdoctoral researchers, and biotech researchers to cover different aspects (close enough).
Top interview findings
There are three top findings from my inteviews:
-
For those who are interested in the green energy field and have experience searching the same information online, they have all mentioned reliable resources and references are extremely important.
-
Those who have constantly learned new technologies in this field mentioned that Youtube is their main source of learning new things besides books.
-
Moreover, 66% of them have pointed out that "About" and "Leadership" are the core of a company's culture, also the key elements if a company wins their trust.
-
Use Google to search keywords like clean energy, renewable energy.
-
Usually checks if there are any well-known or eminent scholars in summary.
-
Always read books related to the topic.
-
Use archive.org to get extensive and reliable resources.
-
Some time watches Youtube videos, but books or professional public press are his primary resources because of reliability.
-
Always read company’s “About” page and their technologies/products.
-
Always read Wikipedia to see reliable resources and references.
-
Google keywords. Always reads the summary.
-
Watch Youtube channels in the related field because she wants to keep up-to-date info and trends.
-
Motivations: a) "interested in learning how my future looks like"; b) up-to-date info, may need to discuss with other people; c) understand the politician's promises and be responsible for the society.
-
The resources she trusts: from universities or research institutions. Credibility is important.
Use Google to search big players/leading companies in the field.
Checks the news if it's a public company.
For startups, search their company news, supporting/backup companies’ info, directions, technologies, and areas the company is.
Needs to know a startup’s VC info to determine if he would join this company.
Always read the “Leadership” or “About” page to understand the company’s mission, roadmap, history, and reliability.
Reliable resources or backup by other well-known organizations are crucial.
Blue & Green? Dark & Light?
As the stakeholders mentioned in the survey, they wanted the color to be green and blue; however, based on my research, the combination of blue and green is commonly used in the industry. To stand out, we would need a little different. Since they also mentioned that minimalistic is preferred. To avoid repeating work due to lack of communication and ensure stakeholders’ expectations, I created a style tyle with both color schemes. It went through quickly. The stakeholders liked it a lot. So I used this for further design reference.
Efinity - Nuclear Fusion Energy Startup
Making Physics Website Interesting
Responsive web design for a nuclear startup to showcase new technology and increase online presence.
Does physics have to be boring?
Efinity's goal was to let the general public learn their technologies and approaches, attract talents to join the team, and collaborate with potential investors and other companies. As the company's founding designer, I need to find solutions to present all scientific and professional information inclusively.
If there is one thing that scares me away, that's physics 😱. Not only physics books, but most physics websites also look quite dry. Not much personality is given to the brand, and they all look the same. So when Efinity - the ambitious nuclear fusion startup - decided to create their online appearance to set them apart from their competitors, they wanted it to be modern and minimalist. I learned the opportunity from one of my design mentors and reached out to Efinity to help accomplish this goal.
Due to a Non-Disclosure Agreement, information on this project is limited. Logo and brand name are being adjusted to use in this case study.
Overview
Role
UX Researcher, UX and UI Designer
Duration
June - July 2021
Platform
Desktop Webpage
Industry
Energy Production
The world faces many more life-threatening severe problems than we could imagine. Nonrenewable and unsustainable energy is one of them. With the increasing threat of global warming, Efinity wants to solve the holy grail in plasma physics to achieve ignition and gain in a laser-fusion target to provide CO2-free energy for humankind.
OK, enough! This is getting really dry 🙄. Don't you think so? Let's rephrase...
As a newly established nuclear fusion company, Efinity didn’t have much online presence, which limited its ability to communicate with potential customers (corps), employers (scientists, engineers), and the general public (ordinary people). They needed me to break this dealock.
Technology is great, so does online presence.
To solve the first challenge, I decided to send a list of questionnaires to the stakeholder; then I'll pick the suitable info for the web; thanks to Wikipedia, we got to copy some generic content for temporary use.
For the second challenge, I chose to dive into the industry but not limit my spectrum in the nuclear field. Eventually, I not only designed a responsive fusion website that met the stakeholders' expectations but also gained some insightful knowledge about nuclear energy.
The approaches
The biggest two challenges that I was facing were:
1. What information to put on the website because Efinity doesn't have any content yet?
2. How to build a professional and intuitive interface for the industry I do not know?
The challenges
Middle fidelity wireframes
I’m a big proponent of making quick prototypes and getting it in front of people so that I can validate/test ideas. For this project, I used Figma to prototype the full flows of my concepts and interactions.
After discussing and finalizing the functionality of the home page and other elements, I revisited my low-fidelity prototypes and used Figme to translate them into mid-fidelity. The purpose of these mid-fidelity prototypes was to convey the page layout and specifics of the user interface.
Besides transferring those sketches to middle-fidelity wireframes, I also made the following notable revisions.
-
Display data on the home page to showcase the company's accomplishments;
-
Combine company mission, leadership, and other info in one page;
-
Add video content to the career page to make the company more approachable.
