A Team of UX designers along with myself and another UI designer worked together to create a functioning website prototype for our client Purple Orca Creative Arts (POCA). This case study will focus on the UI aspect of the design process.
The goal of this project was to:
Design a website that creates a place where individuals can find out how to develop their creative independence.
Working together, our team aimed to satisfy the following client and user goals.
Client Goals
- Grow the client base by increasing the awareness of the POCA studio.
- Create a secondary class registration channel by offering registration online.
User Goals
- View students work easily by viewing an online gallery.
- Get a better understanding of the studio and teachers by having access to this information online
- Register more easily by registering online.
Background
Purple Orca Creative Arts was created by Edith Hung. She graduated from Emily Carr in 2012 and has been teaching art ever since. She previously taught at 4cats for 5 years where she started networking and moved onto home tutoring. She tutored kids age 5 to 15, but also worked with some adults, in hopes to help them get into art universities.
Edith opened her studio in October 2018, a month before this project took place. She was stressed tutoring from house to house and got tired of it. A physical art studio gave Edith the freedom to plan more and hire additional teachers. The future plan is to create a space where artists young and old feel they have the freedom to learn and express themselves creatively. There is also the hope to launch a space where the public can view and leave comments for the students as well.
Currently, Edith isn’t doing any marketing and hopes that a professional website will help create more awareness for the studio as the business doesn’t have a street-level storefront and is hidden. A lot of clients are Asian and a lot of them are thinking to apply for design school. Therefore a bilingual website design will be an important feature.
Research
Edith has a very good understanding of who her clients are. Children ages 5–15 mostly female and some adults that are interested in art. The UX team was able to establish two personas that would be using the website. This information allowed our UI team to strategically create the design inception.
The first persona using the website is a mother looking to register her daughters for art classes. The second is a high school student applying to enroll at Emily Carr and wants to work on her art portfolio to add to her application. Knowing these two personas allows us to design a better experience that is tailored to the main users.
Competitor Research
Before developing our design we researched other art studio competitors to make sure that our design was distinctive and would stand out against the competition.
4Cats
4Cats has a very basic design layout and uses yellow as its only main colour. The other colours come from large banner and button photos. Most of 4Cats imagery is related to the current season and currently is showing lots of holiday pottery.
Luminous Elephant
The luminous Elephant site opens with a large banner image of a girl in sunglasses and is maybe someone that works at the studio, but it’s not stated. For an art studio, it is unusual to open with such a strong image that isn’t related to the services offered. The colour palette is white, yellow and turquoise paired with photos of different mediums of art.
Color Connection
Color Connection uses a lot of black paired with yellow, orange, green, purple, and blue paint strokes. The overall design feels dated and uninviting.
Client Research
During our client kick-off meeting, it was clear that Edith had a very clear idea of how she wanted the UI of the website to look.
First, we asked if she had any brand guidelines or a certain style she wanted to stick to. She said that she wanted to keep her logo, as she had printed it on business assets already. As for the design of the website she wanted something clean, simple, not too colourful, bold, or overwhelming. She also provided us with a mood board she had created when envisioning her studio.
There is no meaning behind Purple Orca. She didn’t want something “super cheesy” that says the word art in it. Instead, she wanted something totally unrelated. “I think the name is not that important to show how your brand actually work”. This gave us the freedom to delve deeper into what these elements could mean for the studio.
At our kick-off meeting, we asked her to give us 5 descriptors of her company:
- Circle — Unity, hugging, family, warmth.
- Turquoise — Big fan of oceans, loves water, calmness.
- Tangerine Orange — Resembles energy and fun, reminds her of the kids smiling and running around.
- Paint Strokes — Resemble art and a fluid motion.
- Artist Quotes — Create a meaningful connection to the mind the inspires creativity.
After this, we ran through a colour swatch exercise with her that had her select three colours that best showcased how she wanted her app to feel. we then asked her to describe why she selected those colours to get a better understanding of the visual representation she is trying to convey.
Colours for brand: soft grey/blue, light blue, bright yellow,
She chose a softer blue because she loves water. “I imagine myself sitting next to the ocean…the wind blowing…and the waves coming and going.” She imagines kids running on the beach as well, but overall calm. Yellow because the brightness, “if it’s all calm it would be dead”.
Next, we conducted a contrasting word test with her to better understand the personality of her brand. Her answers are bolded.
Is your brand more:
- Masculine or Feminine
2. Simple or Intricate
3. Grey or Colourful
4. Conservative or Extravagant
5. Approachable or Authoritative
6. Necessity or Luxury
7. Fun or Serious
8. Professional or Casual
Split with this one… casual as in the mood of the class, professional as in the content. Professional is more important.
9. Modern or Classic
10. Sporty or Elegant
11. Extreme or Safe
Extreme. Safe would mean play within the box, so extreme would be out of the box.
Finally, we created a gut test using the research from above. A gut test consists of 20 different slides each containing a styled web or mobles app interface. The client gets 20 seconds per slide to rate each style from 1 (I hate it) to 5 (I love it). The following are the highest and lowest ranked slides.
The client rated this slide a 5 because of the calm colours, cleanliness, and good use shapes to divide the scrolling.
The client rated this slide a 1. She didn’t like the bright colours and the colour overlays. She also said that there were too many words.
DESIGN INCEPTION
Why
The why explains the intent of designing. We decided on a why that encompassed the purpose of the studio and the reasoning to why there needs to be a website.
To build a community that inspires individuals to develop their creative independence.
Mood
We established the mood as modern, creative, calm, and approachable. The mood is based off a combination of the physical studio aesthetic and Edith’s vision for the online space.
Colour
When selecting a colour combination for the website we selected an analogous colour scheme. The colour schemes use colours that are next to each other on the colour wheel.
They usually match well and create serene and comfortable designs. Analogous colour schemes are often found in nature and are harmonious and pleasing to the eye. This combination helped us achieve the calm and approachable mood Edith was looking for.
Individually the main colours we selected are important as well. Purple combines the calm stability of blue and the fierce energy of red. The colour purple is often associated with ambition, creativity and wisdom.
Blue is considered beneficial to the mind and body. It slows human metabolism and produces a calming effect. Blue is strongly associated with tranquility and calmness.
Turquoise, a blend of the colour blue and the colour green, has some of the same cool and calming attributes. The colour turquoise is associated with meanings of refreshing, feminine, calming, and sophistication. Variations of turquoise are often is used to represent water.
The colour yellow helps activate the memory, encourage communication, enhance vision, build confidence, and stimulate the nervous system.
Combined, these colours work together to create the modern, creative, calm, and approachable mood that our client was looking for.
Movement
Purposeful movement was hard to consider when creating the inception for this website. The movement we chose was free. We want users to move freely around the site and not feeling like they're being constrained to up and down.
Shape
The shape will included circles and wave-like lines. A circle represents unity, completion, and warmth and the waves emulate the ocean feel that the client wants.
Space
The space of the design will feel open. We wanted the space of the website to not feel over crowded. Open space allows for creativity to flourish.
MOOD BOARD
We wanted the mood board to capture the feeling of the site and not just be a visual representation of what the site would look like.
Pod of orcas — Symbolizes community and togetherness for the studio
Beach — Calm and symbolizes a large brush stroke
Yellow — will be the accent colour for buttons
Blue, turquoise, purple — are the main colours selected during the design inception
Flat wave — One of the main design features in the design symbolizing paint strokes
Whale tail — Purpose
STYLE
Flat Design
We decided to limit the amount of real photos in the design and use digital illustrations instead. The purpose of this is that we want the students art to be the main focus and for our content to elevate their work. The flat design compliments the students art and doesn't compete or cause the design to look busy. We added a slight drop shadow to create cards that broke up the white space on pages.
Colour
We built the colour pallet off of the initial design inception. The choice of a bright yellow was to focus attention on CRT buttons such as register. The purple, blue, and turquoise are the primary colours and contrast the bright yellow giving a sense of calm as they are an analogus colour combination . The secondary colour is a muted light blue. This colour help to offset the primary colours. The primary three colours are broken down into different shades to create buttons and the main wave feature.
Iconography
We designed all the iconography using flat design. The major class type buttons were drawn to easily differentiate the type of classes to the viewers. We also illustrated the instructor photos to fit with the flat design. For contact information we decided to use large mail, phone, and location icons. We wanted to make the information easily recognizable to users especially if the site was bilingual.
Typography
For Typography we looked at a heading typeface that matched the client’s current logo. When wanted to logo to feel cohesive with the design. We chose Quicksand Bold because of its rounded ends. The stroke width and style matched the typeface in the logo. For the body text we paired Montserrat. Montserrat is a strong professional easy to read typeface. Paired with Quicksand’s round lines the two typefaces contrast each other, but create a bold and pleasing font pairing.
Buttons and Symbols
We chose a rounded style for our symbols and buttons. Each object’s corners are rounded in multiples of 4 (4,8,12,16). This keeps the corners looking similar no matter the size of the object. We created white cards with a light drop shadow to break up the white space on the page and give specific information hierarch. Paired with circles these symbols are spread through out the design giving a cohesive look on all the pages.
WIREFRAMES
A majority of the client and user goals were rooted in the UX design. By collaborating with the UX team our UI team were able to help design wireframes that are both visually pleasing and functional. We made sure the online gallery is available on every page, allowed users access to register button no matter where they are on the website, and created a design layout that is simple and easy to navigate.
The UX team started testing their layout in low fidelity. After their initial testing, we were able to collaborate to create the mid fidelity so they could further test user flow.
Once testing was completed, the UX team passed off the mid fidelity wireframes for us to start designing the high fidelity. As the project progressed we worked together to add in new pages that were missing and make critical user adjustments. Thanks to the design process, bringing the wireframes from mid fidelity to high fidelity wasn’t too hard. we already had a well-developed symbol library in Sketch that was easy to overlay. Only minor tweaks were needed due to utilizing atomic design.
FINAL DESIGN
The final design I feel captures the “why” we set out to achieve. The design creates a place where individuals can find out how to develop their creative independence by allowing users to simply register for classes, access past students art through the gallery, and simply navigate information about the studio.
Responsive Web
We designed this website to be responsive. Responsive web means that the site will scale no matter what screen size it is viewed on. This also means that the layout changes to adapt to smaller screens such as smart phones. The mobile design remains true to the core design, but changes the layout to be more efficient for users accessing content on the go.
The main difference is the landing page. On mobile the landing page contains the key information from the Classes, About Us, and Find Us pages. This gives the user access to all the important information without having to scroll through multiple pages.
Key Features
A key feature is the wave that we created. It separates the gallery from the rest of the site and acts as a barrier that slides to show more information when users expand the section they are on. the wave transitions from blue to turquoise to purple and creates the main colour pallet for each page it is on while still creating unison across all pages. When clicking through the main pages the wave slides horizontally as the pages changes to show a fluid water like motion.
Progressive exposure was another key design feature we implemented. Progressive exposure means that specific information is given to the user only when they need it as not to overwhelm them. Each page uses progressive exposure. The key information is available on each of the landing pages with a button that displays additional information that the user can scroll down to read.
The gallery was one of the main features our client wanted on the website. We created away so that the gallery is always available on the bottom of every page. The gallery is populated by an instagram account which allows Edith to easily upload photos to the website so there is always new content.
The final key feature was the make the site bilingual. This was an important feature because many of the users are Chinese. We created a language toggle on the right side scroll that is always visible. This makes switching the site’s langue easy.
LEARNING OUTCOMES
This was the first project that I worked on with another UI designer. Initially I thought the process would be a lot faster, but found out it was the opposite. The process was slower because there was more to discuss and plan together.
My working dynamics with my UI partner were great, but I realize that this might not always be the case. It was good to learn the working dynamic in a situation where we got along. I now know how to better prioritize my time and make decisions together. Having a secondary UI design helps a lot with all the different tasks.
Going forward I will remember to make sure that we have a well developed design direction so that we are both on the same page. Designing with the same vision lessens the chances of the design feeling disconnected.
PROTOTYPES
See more on my portfolio at www.devonseidel.com
