UI Case Study — MILIEU, Resourceful and Resilient Company

The Opportunity

Resourceful and Resilient Company is specializing in homeschooling education which provides educational options and support services to both homeschooled students and their parents. Since the founder of the company, Angela Fitzgerald, confronted to an issue of social isolation in homeschooled students through her own daughter and other homeschool students, she hope to have a mobile app that connects homeschool students to create meaningful friendship like traditional school students. Fitzgerald emphasized “provide meaningful connections and ‘normal’ social life to homeschool students,” as her motto.

Project Goal

To create convenient, engaging, and well-designed UI elements for social media app and apply it to the provided wireframes and research data while considering the targeted audience, the homeschool students and their parents.

Project Duration: 3 weeks

Feature Requirements

Device: iOS 9.3 or above

  • Conduct 20 seconds Gut Test
  • Develop Mood Board and Style Tile
  • Create effective and coherent colour palette
  • Design a logo
  • Select typeface setting and paring
  • Layout framework for the app
  • Create Style Guide

The App Brief

MILIEU is a social media app for homeschool students to find friends through common interests, location, and age.

Main Features

MILIEU can find friends based on:

  • Location
  • Age
  • Tagged Mutual Interests

MILIEU will also can:

  • Chat with friends
  • Post pictures and stories
  • Comment on posts
  • Edit profile

Target Audience

  • 13–24 years old
  • Male or Female
  • Homeschool students and their parents

Keywords: meaningful connection, social circles, convenient, straightforward, welcoming, find friends

My Role and The Team

I primary worked on visual interactive design teaming with another UI member, Jason Shen and three amazing UX members: Flo, Nikki, and Jamil.

Scope

Targeted users are preteens to early 20s who are comfortable using smartphones and other tech devices.

Insights

The first client meeting gave us a lot of insights into the homeschool students’ social life style.

  • Homeschool students experiencing difficulty in finding friends other than family members.
  • Homeschool students does not have recess time or casual hangouts with friends.
  • Social isolation creates loneliness.

Gut Test

We conducted the 20 seconds Gut Test to narrow down the art direction and understand the client’s needs. The 20 seconds Gut Test is a workshop that used in visual design process to help to identify the initial art direction to start the project. Based on the result, we found two possible art directions which were the followings:

Fun and Friendly

One of “Fun and Friendly” images

The client rated this image very high and she liked about circles, pop colours, and whitespace that represents playfulness and friendliness.

Elegant and Professional

One of “Elegant and Professional” images

This image is also highly rated by the client and she liked minimalistic style, clean, and smooth look that shows professionalism and elegancy. The client also liked the movement how it is tranquil but not too slow.

From these two art directions, I chose to create “Elegant and Professional” style.

Design Process

Design Inception

The WHY

Based on the insights, I developed two components to the WHY of this app.

First, homeschool students should have sincere friendships like other students do at traditional school system and not limit their social life only with family members. Since they tend to have the issue of finding same aged friends or with mutual interests, the app should facilitate to find friends outside of the traditional models of education through tag interests feature.

Moreover, homeschool students should have inclusive social circles that enables them to have casual hangouts since they never have the same opportunities as traditional school students. Having an interactive feature in the app, it should allow homeschool students to find various kinds of friends to form their own social circles.

Ultimately, the WHY is: “To create meaningful and inclusive social connection between homeschool students.”

The Mood

The mood that I was getting from the Gut Test and the WHY were clean, clear, elegant, mature, intuitive, inclusive and professional which will emphasize the app more engaging and clear with contents.

Imagining the users who are going to use this app will be looking for effortless way to socialize but also to form inclusive social communities with other homeschool students.

Mood Board

The Mood Board

Visual Language

Colours: Black and white conveys professional look with high contrast. Adding green to that will give friendly look and shows environment as we named the app “MILIEU.” Also, green tone grey brings back the warmth and tone down the harshness of black and white contrast.

Shapes: Since the client emphasized “meaningful social connection,” I chose circular geometric shapes because circle represents wholesome, unity, and universe. I imagined homeschool students to experience comfortable and inclusive social life by using this app.

Space: Space will be open, minimal, and flowing that supports smooth and direct user flow. I wanted the background to be seamless and simple that does not interfere users since targeted audience should not have further complication with finding friends.

Movement: Movement will be flowing and clear like an easy swipe on smartphone devices. Based on the Gut Test, the client highly rated the following image of how the movement is seamless and clear.

One of images from Gut Test

Comparison: “Fun and Friendly” mood board by Jason conveys the opposite taste of mine. He focused on welcoming and inclusive but also fun style to his art direction by using soft geometric shapes and bright colours.

Mood Board by Jason Shen

Name and Logo

Name: We first came up with a name for the app called “RECESS” but unfortunately, it was taken buy other social media app so we had to create a different name. I further searched for a name that is unique and represents the main concept of “meaningful social connection,” which I found a name called “Milieu.” It is a French name and it means “a personal social environment.” I thought “Milieu” will convey the concept of creating a meaningful connection.

Logo: My UI teammate, Jason, and I explored logo designs based on the Gut Test results. Following images are mine and Jason’s logo design exploration.

Logo Design Exploration by Sayaka Sekishima

I used mostly circle to convey community, connection and inclusiveness with few exploration with curved lines to show organic look. For fonts, I explored rounded and friendly style and geometric and clean style.

Logo Design Exploration by Jason Shen

Jason explored with chat bubble shape since the app is focused on chat system to communicate. He explored different sizing, fonts and edges to pull off the modern style.

Style Tile

The bottom image is my style tile where I gathered all visual information from mood board and logo exploration.

Colours: I kept colour palettes from the mood board to convey the over all mood of “Elegant and Professional.”

Logos: are narrowed to one type with coloured and black and white. I chose this logo to express social inclusiveness and connection. The three different sizes of circles represents different social circle sizes and the thin circle that surrounds shows the connection and inclusiveness of all three circles.

“Elegant and Professional” Style Tile by Sayaka Sekishima

Typography: I chose Futura typeface for headings and titles since it has circular geometric aspect that matches with the selected shape that I was going for. For texts and hashtags, I chose Lato because it has a geometric aspect as Futura but also has hand written flicks that are organic to show warmth to the readers.

Icons: I chose geometric and clean look for icon design that are seamless. I got inspired by the client’s favourite app called VSCO which is popular among teens and adults to share photos.

Icons by VSCO

Sample Screens: I also included two mockup screens to showcase the overall look with “Elegant and Professional” style. As you can see, the background has whitespace that is breathable and allows users to capture all contents without complication. With selected colours, icons, shapes, and typography convey minimal and professional style but has warmth to show inclusiveness.

Contrast: In contrast, my UI partner Jason created “Fun and Friendly” style tile to show another art direction and choice for the client. The below image is his style tile that shows playful, friendly, inclusive and acceptance look with bold and modern style.

“Fun and Friendly” Style Tile by Jason Shen

Final Logo

Left: Japanese character “a person,” Middle: Sketch of two people, Right: Finalized Logo

The client chose my logo design however, I wanted to explore further more since “meaningful connection” is important to homeschool students. I explored more about human connection and got inspired by Japanese character that represents “a person.” I put two characters next to each other that illustrates two people making a connection. I believe the process of this final logo is more deep and meaningful than the previous logo design. For font, I used Varela Round to be readable yet friendly so then the font style matches with soft look of the logo.

High Fidelity Wireframes

Below images are the samples of finalized high fidelity.

Please check our Invision Prototype of MILIEU App down below.

Style Guide

After showcasing two art directions to the client, she chose my “Elegant and Professional” style to work. However, considering the targeted audience, Jason and I decided to merge some of his “Fun and Friendly” style.

Milieu Style Guide

We provided three different logo types with coloured and black and white. The colour palette is updated with adding an orange to have more fun feeling. Also, icons are re-designed to look more user friendly and functional but we kept both playful and sleek visual elements. For typography, we used Varela Round that was used for final logo and kept Lato for main contents. The sample screen is the sneak peak of the app and showcase the overall look. Lastly but not least, we used background image from Jason’s style tile to add more exciting feeling.

Conclusion

I deeply enjoyed working on this project and with our client Angela Fitzgerald. It was a great experience for me to learn about homeschool students and their social issue. For futureconsideration, I want to improve in logo design and sizing for style tile, style guide, and fots for considering universal design that recognizable and readable.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store