Workwell

•

Workwell

Case Study

Identifying a Problem

People often have a hard time finding a workplace that fits with their personal preferences. Not all places provide electric plugs, wifi, parking spots, and are walking distance from home.

Team and Role

Megan Calvin as Project Manager
Luthfan K. Wicaksono as User Interface Manager

Simon Mendoza as User Experience Manager
Ashlyn Scoggins as Presentation Manager
Hadyn Hawkins as User Testing Manager

Deliverable(s)

Styletiles, logo brand and motion graphic.

Research

Questionnaire Survey

Our team conducted a survey in the form of a questionnaire. We got 98 respondents from college students and young professionals to get more depth about what users know and want.

Target Market

After getting the results from the survey, we could decided who could be our potential target audience.

User Persona

After collecting and assorting data from the survey, my teammate, Megan Calvin, created these two user personas to illustrate our potential users.

Solution

Therefore, our team created an app that helps people to find a work space that suits them. Workwell is a mobile app that helps people find great places for study or work based on their personal preferences. In this project, I worked as the UI manager and my responsibilities were: creating styletiles to show the direction or style of this app, designing a logo brand, and lastly compositing motion graphic elements in the promotional video.

Business Canvas Model

As we finalized our app proposal, we continued to create a business canvas model. This is like a proposal of a company or the essence of a company, the purpose of the company, who’s the target audience, and how they manage the funding, and much more.

Styletiles

We started by making an attribute list or adjective list describing our app. Secondly, we created a moodboard to determine our style. Then, we decided on the logo which I finalized at the end. For the last step, we combined those elements and put them into styletiles.

Adjective List

We wrote down some adjectives that we want to show on our app. Basically, they are how we would describe our brand, what it is going to look like.

Moodboard

After we finished with our attribute list, we started to visualize those word into images.

Brand Name

We chose words that are related to our concept which is a place to work and study. Finally, we came up with the name workwell.

Typography

We decided to use San Francisco Typeface, a sans-serif typeface from Apple Inc, for headlines and bodycopy. It has better legibility on display compared to its predecessor, Helvetica Neue, and has sophisticated letterform. For the logotype, we used Filson Soft typeface because it has an interesting letterform and looks playful as well.

Color Palette

We chose bright colors because they represent youthfulness and fun. Also using bright colors is an effective way to get the audience’s attention.

Graphic Element

We want to make this app look clean, simple, and show its youthfulness. Simple geometric shapes are a great choice for the app. Color might be modified based on the design cohesiveness of the whole app.

Brand Logo

Simon, Megan, and I were responsible for the logo design. Each one of us has a different and unique approach. After a few discussions, we agreed to take my approach regarding the logo design (third column). I took the first of each word of our brand name. I utilized the W’s letter by overlapping the W’s strokes together. Then, I added a half-circular shape on top of it to create a pin-point symbol which is commonly used for pointing a location. For the typeface, we use Filson Soft because the letterform emits youthfulness and fun.

Information Architecture

This is a skeleton or structure of our app, designed by Megan. Basically, it shows how the app structure works.

Lo-Fi Wireframe

After collecting data for the app and creating information architecture, we started to create lo-fi wireframes. Then, we proceeded to do user testing. We received comments and feedback from our peers. Here is one of the sketches from my teammate, Megan.

Mid-Fi Wireframe

We upgraded our lo-fi wireframes to mid-fi wireframes. We applied previous feedback from our peers to the new wireframe, such as a clearer purpose and app functionality and better navigation workflow.

Hi-Fi Wireframe

Here are the final screens of our app, created by my teammates, Megan and Hadyn. After we upgraded a few elements and features from the mid-fi wireframes, we finally could finalize the screens by adding graphics element and color.

Prototype

Promotional Video

To promote our new app, we created a short video to present our product. Our goal is to make it simple, exciting and easy to grasp for the audience. Therefore, we want to emphasize the storytelling aspect of the video to create a strong connection with the audience. Also, we decided to include some motion graphic animation as a visual aid. It helps the audience to know how the app operates.

Storyboard

My friend, Ashlyn Scoggins, created a storyboard for the promotion video. It starts with a guy who has a hard time adjusting himself in a random coffee shop. He wants to finish his work but he is not feeling comfortable with the place. Therefore, he uses the Workwell app. Then, he finally finds a place which is suitable for him, based on his own preferences.

Motion Graphic

I was responsible for the motion graphics asset for our video. We want to show a simple animation of the basic features in our app.

Final Video

Advertisement Poster

In order to present our product, my friend, Ashlyn, designed a poster showing a brief description of the Workwell app including some screens and features