ax3
ax3
While studying abroad in Tokyo, Japan, I was a Web Design Intern at the company Manzanita K.K. Manzanita K.K. is a team of neuroscientists focused on intelligent marketing, using an algorithm based on psychology to help companies reach their target audiences.
My main task was to help design and prototype, from the ground up, Manzanita K.K.'s website ax3, which is meant to be used by companies who are interested in intelligent marketing to reach their target audiences.
For discretionary reasons, much of the terminology used by the company will be replaced by Lorem ipsum..
While studying abroad in Tokyo, Japan, I was a Web Design Intern at the company Manzanita K.K. Manzanita K.K. is a team of neuroscientists focused on intelligent marketing, using an algorithm based on psychology to help companies reach their target audiences.
My main task was to help design and prototype, from the ground up, Manzanita K.K.'s website ax3, which is meant to be used by companies who are interested in intelligent marketing to reach their target audiences.
For discretionary reasons, much of the terminology used by the company will be replaced by Lorem ipsum..
Goal
Design and prototype the website ax3 created by the company Manzanita K.K. to help companies deliver their advertising to their target audiences
Goal
Design and prototype the website ax3 created by the company Manzanita K.K. to help companies deliver their advertising to their target audiences
Tool(s)
Figma, Illustrator,
Photoshop
Tool(s)
Figma, Illustrator,
Photoshop
Timeline
4 months (a one semester internship)
Timeline
4 months (a one semester internship)
01
01
User Flow
User Flow
I started my internship by laying out the user flow of a potential user of ax3, determining what their goal would be and the steps they would need to take to get there.
I started my internship by laying out the user flow of a potential user of ax3, determining what their goal would be and the steps they would need to take to get there.
Who are ax3 users?
Global companies' employees, with a slight focus on those in Japan since that is where Manzanita K.K. is based.
Who are ax3 users?
Global companies' employees, with a slight focus on those in Japan since that is where Manzanita K.K. is based.
What is the goal of ax3 users?
To get their ad campaigns delivered to the audiences they are targeting.
What is the goal of ax3 users?
To get their ad campaigns delivered to the audiences they are targeting.
How can we get them there?
Direct the user down various pathways depending upon how much information they have on their audiences and how they choose to analyze the data ax3 collects for them.
How can we get them there?
Direct the user down various pathways depending upon how much information they have on their audiences and how they choose to analyze the data ax3 collects for them.
Based on this information and the knowledge I gained about how the company intended ax3 to function, I created the following user flow chart (again, for discretionary reasons, the language of the chart will be vague):
Based on this information and the knowledge I gained about how the company intended ax3 to function, I created the following user flow chart (again, for discretionary reasons, the language of the chart will be vague):
02
02
Main Dashboard
Main Dashboard
"Projects" in ax3 are advertising campaigns a business is running. An essential part of the ax3 site, this main dashboard showing these projects was the first high-fidelity wireframe I created and was the basis for the rest of the high-fidelity wireframes I would create.
This dashboard was to contain:
"Projects" in ax3 are advertising campaigns a business is running. An essential part of the ax3 site, this main dashboard showing these projects was the first high-fidelity wireframe I created and was the basis for the rest of the high-fidelity wireframes I would create.
This dashboard was to contain:
Dashboard
How the ax3 processes being done on the user's projects have progressed
Dashboard
How the ax3 processes being done on the user's projects have progressed
Recent Projects
A user's ad campaigns that they have added to their account
Recent Projects
A user's ad campaigns that they have added to their account
Recent Activities
The recent activities of the users' coworkers who are working on the same projects
Recent Activities
The recent activities of the users' coworkers who are working on the same projects
During the design process, my employer emphasized repeatedly that he wanted the website's design to align with universal design-mirroring the globally-recognized and sleek UX design of companies such as Google which is universally understood and easily usable.
And so, I established a color scheme for the website using BLUES to give it a professional, intellectual look that could be understood universally.
I also emphasized simplicity in my design by making the base color for the site white and using a clean, legible font for the headings, subheadings, and body text.
I also emphasized universality in my design by making the base color for the site white and using a clean, legible font for the headings, subheadings, and body text.
During the design process, my employer emphasized repeatedly that he wanted the website's design to align with universal design-mirroring the simple and sleek UX design of companies such as Google.
And so, I established a color scheme for the website using BLUES to give it a professional, intellectual look that could be understood universally
This Final Main Dashboard
This Final Main Dashboard
03
03
New Project
New Project
I was tasked with creating a high-fidelity wireframe for what a user would see when creating a new project, a new advertising campaign, for their company. My supervisor at Manzanita K.K. had certain pieces of information he wanted the user to input when creating a new project, such as a name, industry, budget, keywords associated with the project, etc. as they would be necessary to the processes ax3 would do on it.
I was tasked with creating a high-fidelity wireframe for what a user would see when creating a new project, a new advertising campaign, for their company. My supervisor at Manzanita K.K. had certain pieces of information he wanted the user to input when creating a new project, such as a name, industry, budget, keywords associated with the project, etc. as they would be necessary to the processes ax3 would do on it.
04
04
Project Dashboard
Project Dashboard
Next, I created a high-fidelity wireframe for the dashboard that the user would see when they select their project from the main dashboard, including the details given when the project was created and a percentage circle showing the user the progress of ax3's analyses being done on the project.
I also created a high-fidelity wireframe for a dashboard that the user would see when they select their project, including the details given when the project was created and and percentage circle representing the progress of ax3's analyses being done on the project.
05
05
Choices
Choices
For discretionary reasons, ax3 methods can't be revealed, however, this page is meant to showcase choices users of ax3 can make about their advertising campaign that will affect ax3 processes. The page has a button to show the recommended choices, while also allowing the user the ability to choose their own and save them. A table was also put underneath to showcase various elements of these choices.
In line with universal design, I diligently designed the cards that represent the different choices the user can make to ensure they would be understandable to users all over the world.
And so, I carefully chose the icons that would represent each choice so they would be intuitive to all audiences. In addition, considering the somewhat complicated vernacular of ax3's processes, I kept the design straightforward with distinct cards representing each of the user's choices respectively, distinguishable by the shade of blue, iconography, and the spacing between them.
For discretionary reasons, ax3 methods can't be revealed, however, this page is meant to showcase choices users of ax3 can make about their advertising campaign that will affect ax3 processes. The page has a button to show the recommended choices, while also allowing the user the ability to choose their own and save them. A table was also put underneath to showcase various elements of these choices.
In line with universal design, I diligently designed the cards that represent the different choices the user can make to ensure they would be understandable to users all over the world.
And so, I carefully chose the icons that would represent each choice so they would be intuitive to all audiences. In addition, considering the somewhat complicated vernacular of ax3's processes, I kept the design straightforward with distinct cards representing each of the user's choices respectively, distinguishable by the shade of blue, iconography, and the spacing between them.
06
06
Sign-Up & Log-In
Sign-Up
&
Log-In
I decided a two-column layout would best suit the sign-up and log-in pages of the site, to show the ax3 branding and the user input needed to sign up or log in to the site succinctly.
I decided a two-column layout would best suit the sign-up and log-in pages of the site, to show the ax3 branding and the user input needed to sign up or log in to the site succinctly.
I designed the logo for ax3 to be simple, while alluding to the "intelligent" marketing purpose of the website, making the 3 look like an exponent.
I then brainstormed a short, yet memorable tagline to go with the logo, deciding upon: "Time to find your audience, so they can find you".
I designed the logo for ax3 to be simple, while alluding to the "intelligent" marketing purpose of the website, making the 3 look like an exponent.
I then brainstormed a short, yet memorable tagline to go with the logo, deciding upon: "Time to find your audience, so they can find you".
In terms of layout, I included thick lines diagonally leading to the tagline and therefore the logo, placing the user's focus on both of these things as their eyes are naturally drawn to them.
In addition, I designed the side with ax3's logo for the log-in and sign-up pages to be color inverts of one another, showing that they are different pages with completely different functions.
In terms of layout, I included thick lines diagonally leading to the tagline and therefore the logo, placing the user's focus on both of these things as their eyes are naturally drawn to them.
In addition, I designed the side with ax3's logo for the log-in and sign-up pages to be color inverts of one another, showing that they are different pages with completely different functions.
07
07
Side Menus
Side Menus
The team at Manzanita K.K. was experimenting with the idea of making the side menu collapsible as seen in many of my previous designs, so I made some prototypes.
I experimented with what the side menu would look like if it was collapsible and vice versa. I also experimented with the UI for collapsing and opening the menu. I took care to ensure the iconography and other UX details were straightforward and the design looked clean.
The team at Manzanita K.K. was experimenting with the idea of making the side menu collapsible as seen in many of my previous designs, so I made some prototypes.
I experimented with what the side menu would look like if it was collapsible and vice versa. I also experimented with the UI for collapsing and opening the menu. I took care to ensure the iconography and other UX details were straightforward and the design looked clean.
08
08
Error 404
Error 404
I was then tasked with designing an error page for the website that would appear when the user tries to find a page that the site cannot find.
To begin with, I started researching the error pages of other websites and found 3 common components:
I was then tasked with designing an error page for the website that would appear when the user tries to find a page that the site cannot find.
To begin with, I started researching the error pages of other websites and found 3 common components:
A character demonstrating the "broken" or "lost" nature of the page they are looking for
A character demonstrating the "broken" or "lost" nature of the page they are looking for
An explanation of the error the website is having, and an apology for it
An explanation of the error the website is having, and an apology for it
Interjections as a heading or subheading (Examples: oops, whoops, shoot, yikes, oh no, etc.)
Interjections as a heading or subheading (Examples: oops, whoops, shoot, yikes, oh no, etc.)
Therefore, I created a broken robot design in the ax3 color scheme to be the mascot for the page. I chose a robot to be in line with ax3's processes which are ingrained in analyses and calculations, as well as looking into the future of what technology can do.
In addition, I kept the language of the error page playful and whimsical in the hope of lightening the mood of a user who was frustrated they couldn't find a page they were looking for, as well as to be consistent with what I found in other websites' error pages.
Therefore, I created a broken robot design in the ax3 color scheme to be the mascot for the page. I chose a robot to be in line with ax3's processes which are ingrained in analyses and calculations, as well as looking into the future of what technology can do.
In addition, I kept the language of the error page playful and whimsical in the hope of lightening the mood of a user who was frustrated they couldn't find a page they were looking for, as well as to be consistent with what I found in other websites' error pages.
09
09
Settings
Settings
After studying typical "Settings" pages of websites, I created these wireframes with the elements I found common within them, such as the option to change one's password, the ability to select a profile picture, etc. I also included other details as prompted to by my supervisor, such as a place for a user to input their position in the company they work at.
After studying typical "Settings" pages of websites, I created these wireframes with the elements I found common within them, such as the option to change one's password, the ability to select a profile picture, etc. I also included other details as prompted to by my supervisor, such as a place for a user to input their position in the company they work at.
I made two high-fidelity wireframes of an "Edit Profile", "Privacy & Security", and a "Preferences" subpage respectively to compare the color schemes and see which best suited the ax3 brand.
I made two high-fidelity wireframes of an "Edit Profile", "Privacy & Security", and a "Preferences" subpage respectively to compare the color schemes and see which best suited the ax3 brand.
When designing these high-fidelity wireframes, I once again focused on keeping the UX design straightforward, the subpage navigation being comprised of a line, the titles of the subpages, and a subtle thickness to the line under the current page to show the user what page they are actively on.
When designing these high-fidelity wireframes, I once again focused on keeping the UX design straightforward, the subpage navigation being comprised of a line, the titles of the subpages, and a subtle thickness to the line under the current page to show the user what page they are actively on.
Edit Profile
Edit Profile
Privacy and Security
Privacy and Security
Preferences
Preferences
10
10
Manzanita K.K. Internship Page
Manzanita K.K.
Internship
Page
Outside of ax3, I designed the internship page for the Manzanita K.K. website. I was told that this page would showcase past interns and function as a way to encourage future people to apply to be interns at Manzanita K.K.
Considering that Manzanita K.K. had recently asked me for my major and a blurb on my time at the company, I knew what information was to be included about each intern on the page.
When designing my high-fidelity wireframes, I focused on:
Outside of ax3, I designed the internship page for the Manzanita K.K. website. I was told that this page would showcase past interns and function as a way to encourage future people to apply to be interns at Manzanita K.K.
Considering that Manzanita K.K. had recently asked me for my major and a blurb on my time at the company, I knew what information was to be included about each intern on the page.
When designing my high-fidelity wireframes, I focused on:
Emphasizing each intern's story in their own container/space
Emphasizing each intern's story in their own container/space
And so, I designed these wireframes so that each past intern could be focused on one at a time by hovering on the container about that intern, allowing a user to choose whose story they want to read.
And so, I designed these wireframes so that each past intern could be focused on one at a time by hovering on the container about that intern, allowing a user to choose whose story they want to read.
Highlighting recruiting more people to join the company
Highlighting recruiting more people to join the company
I also framed this page as being for recruitment by writing headings such as "Join our team!" and "Work with us!". In addition, I included a button at the bottom of the page so that those interested could apply.
I also framed this page as being for recruitment by writing headings such as "Join our team!" and "Work with us!". In addition, I included a button at the bottom of the page so that those interested could apply.
Making the design sleek and elegant, as well as intuitive
Making the design sleek and elegant, as well as intuitive
Finally, I kept to the mid to dark blue color scheme to give the page a professional feel to it. I distinguished the intern containers by shade of blue and spacing, as well as used these colors as a way to highlight the heading/subheading on the site and the apply button.
Finally, I kept to the mid to dark blue color scheme used by Manzanita K.K. on their main site to give a professional feel to it. I distinguished the intern containers by shade of blue and spacing, as well as used these colors as a way to highlight the heading/subheading on the site and the apply button.
And so, my two designs below were used to create the final internship page which can be found here when scrolling down.
And so, my two designs below were used to create the final internship page which can be found here when scrolling down.
11
11
UI/UX Misc. Components
UI/UX Misc.
Components
Finally, consistently over the time I worked as an intern at Manzanita K.K., I created various components and user input fields to be used across the ax3 website, once again emphasizing universal design by using common iconography and visual cues to create UI/UX elements that all audiences could understand.
Finally, consistently over the time I worked as an intern at Manzanita K.K., I created various components and user input fields to be used across the ax3 website, once again emphasizing universal design by using common iconography and visual cues to create UI/UX elements that all audiences could understand.
12
12
Conclusions
Conclusions
My time at Manzanita K.K. was one I will never forget, from the skills I gained in a new environment, as I learned to design in a way that appeals to the common human experience to the friends and mentors I found along the way, I am extremely grateful. :)
My time at Manzanita K.K. was one I will never forget, from the skills I gained in a new environment, as I learned to design in a way that appeals to the common human experience to the friends and mentors I found along the way, I am extremely grateful. :)
