top of page
image.png

Xenon Arc 2024

UI | UX | USABILITY | PROTOTYPING

ROLE​

Prototyping

UX Design

Visual Design

​

TIMELINE

3 Months

​

TOOLS

Figma

Illustrator

Version 1 - Pie Chart (1).png

Xenon Arc

Xenon Arc is a distribution company that provides exposure and innovative models to connect clients/businesses to their products and customers. Through a database called ConnTact, clients can see their company analytics on their customer satisfaction and product production.

Problem

None of Xenon Arc's clients used ConnTact because of how confusing the information was on the pages. Instead, client businesses sent their representative each year to learn about their statistics through annual summary reports Xenon Arc got ready with in Excel spreadsheets. The initial website didn't include information clients had wanted and innovative intent of the visuals distracted users from the information they needed.​

Goals

1. Redesign visual analytics and tables to make information easier to understand

2. Make the navigational flow easier to find information without multiple clicks

3. Interview experts and representative of clients to come up with sets of information clients would want on ConnTact

4. Layout the pages so that the information is clear

5. The database should be self-sustained and can accurately send information

Methodology of Design

Design methodologies that I implemented in this redesign were:

01.

Design

Thinking

Empathize

Define

Ideate

Prototype

Test

02.

User-Centered

Design

Participatory Design

Iterative Redesign

Usability

Interviews

03.

Five Elements of

UX Design

Surface

Skeleton

Structure

Scope

Strategy

04.

Activity-Centered

Design

Interviews

Interaction focused

Navigational flow

Usability

Interview

Purpose:

1. Usability interviews on both the initial site and the new designs.

2. To consult with client representatives and finance members to come up with sets of data clients would want to see

image.png

Participants: 11 (met each participant twice or more)

Interview time: 30 minutes - 1 hour

Topics: UI design concerns, visions for the site, client needs, and topics clients want for statistical data

Monitor Testing: TV, Computer, Big Screen, TV with green tint

Stakeholders: Finance of Xenon Arc, Clients, Client representatives, managers, and chiefs

​

For each interview for the UI, I created a mockup or a high-fidelity wireframe for participants to see a visual identity to the usability. I also wanted to change some of the colors on the pages to make it more intentional than distracting. I also occasionally worked with one of the Software Developers working on coding the new redesign and updating the Information Digital Chief/Officer of the team. 

Interview Result

After interviewing many stakeholder positions at Xenon Arc, we started changing the UI and doing multiple usability tests to understand how easy information was on the designed site. The obstacle we faced in this phase was however, there were conflicting opinions on what should and shouldn't be on ConnTact. There was also the goal of having the database be self-sustained and participants wanted information that had to be manually imputed and constantly updated in real-time. In our second phase of interviewing, we decided to do participative designing (usability testing to prototypes to create the best outcome together) with managers and members of the team that closedly worked with business clients. While we still got conflicting answers, we concluded to find a common ground and add sections of information that was possible to add without human intervention.

UI Design

In the beginning, I studied what colors were used and also wanted to implement green into the design. I also liked the idea of a light-mode because clients liked Excel spreadsheeting and light mode just as much as a dark theme. I also got feedback from a developer who had been working with usability that while a dark background may seem cleaner and more modern for a website, it tends to highlight color more than the text compared to a lighter theme. So instead of a white background, I decided to go with lighter green tones. And to ensure accessibility and clear visual identity, I collaborated with a colorblind colleague who couldn't perceive green, which gave me valuable insights into how different users experience color and what colors to avoid. We also tried working on different devices to see if the screen made the works unreadable as ConnTact could preferably used for meetings. One of the monitors in Xenon Arc had a green tint on the screen, so we adjusted the colors so that it would be compatible.

image.png

For the Pie chart, I made sure to have a color scheme of green that can also be different from each other based on a person, a monitor, or device.

image.png
image.png

To follow the current brand of Xenon Arc, I adjusted the corners to round and added Helvetica for the font. Since many also liked transparent data rather than clicking into to get to the information, I made the visual data to graphs and universally similar visual data that the majority could understand.

image.png
image.png
image.png
image.png

Usability Testing & Outcome

Usability testing was a big aspect for the project because every other week, I was meeting someone to give feedback on the design and observe if they were confused at any step. I had also given tasks for users to do, such as find the filter button or the OTIF History yearly, to see how fast a user got it (usually before 10 seconds). By the end of the project, participants liked the new design of the website as the information was clear, however were surprised by the information put! Users also liked the idea that you can filter what you want to see on the site and move the information either up or down. Below is the end result imported from Figma:

Things I have changed:

  • Added locations (QDMX, QDNA, QDEU) of the business at the top as a checkbox

  • Changed the content of the summary at the top to combine both sales and purchases instead of two pages

  • Added a slider for the date by month, quarter, year, or current fiscal year (adding the filter next to it as users couldn't find the filter originally)

  • ​Added the average year for both purchases and sales​

  • Made a pie chart to represent this:

​

  • For Growth section, instead of a radical bar chart (as it didn't show revenue growth visually), I designed it to include numbers instead.

  • ​Added a graph similar to OTIF History because users thought that was the best representation from the original website design.

  • Added a light version (if you click on the settings in the prototype above)

​

All Figma Design Versions

I created many files starting from May to July to share my progress! Here are the links to show my work and how the design came to be:

Conclusion

Things that I learned about during the project:

- components in Figma

- finance and analytics

- usability and UI testing on different devices​

​

Things that I could do if the project continued:

- interview clients themselves

- learn more about statistical design and visual modes of data

- find a way to add customer statistics

bottom of page