UI/UX & Product Designer
Untitled-1.png

FOCUS (Startup Project)

FOCUS

UI/UX (Figma & InVision), Graphic Design (Adobe Photoshop & Illustrator)

Overview

FOCUS is The Map of Your World. A visualization of everything that's important to you. Your favorite people, places, and events in one place. You can see your interests in real time and be able to interact directly with the world around you.

FOCUS is now available on the App Store via http://apple.co/2iHCydE

  • What I did: UI/UX & graphic design


As a UI/UX designer, my job is basically to design the direct interface of the FOCUS App that users interact with, as well as to enable an intuitive and smooth user flow.

Here are some UI screens that I did during my internship:

 

The process of Sign-up and Log-in:

Screen Shot 2017-09-01 at 3.12.24 PM.png
 

Those are some other experimental screens to see whether the user flow is clear:

Screen Shot 2017-09-01 at 3.47.20 PM.png
 

Once users set up their own account, they will be guided to another screen where they can choose their own interests, and then FOCUS will personalize content for them individually. 

Here I tried two versions of the same screen just to see which one looks more user-friendly. After internal test, I decided to go with the first one as it uses larger icons to attract users' attention, and the layout also creates better comfort and ease since there are three icons in a row. Comparing to that, the list seems to be too long and a bit overwhelmed to users.

Screen Shot 2017-09-01 at 3.25.02 PM.png
 

Once these are all set up, users enter FOCUS main screen, which is this personalized map to show different things going on that may be interested to individual users. This includes people, places, and events, separated by different icons with separate colors.

The above three are three try-outs with just a map mockup. I tried both ways to decide whether to include the icons or not, and I also tried different icons. In the end, I decided to go with the last version because it has cleaner layout, and the icons seem to be more engaging than words given that during Beta testing, most users seemed to find the icons intuitive enough without words to explain it.

The three screens in the bottom row are real maps that had data imported. They are created using Mapbox. They are days and nights versions of maps separately. I decided on the last one because although the first one seems to be fun and engaging, the last one creates a clearer interface that's not overlapping with the words on the map, and this interface also goes better with the whole style of the FOCUS App.

Screen Shot 2017-09-01 at 3.28.58 PM.png
 

Once users tap on a place/people/event, this will pop up from the bottom of the screen. We tried two versions to decide how the picture will be included.

Screen Shot 2017-09-01 at 3.42.06 PM.png
 

The middle button allows users to create their own pin to interact with friends and make plans together.

Screen Shot 2017-09-01 at 3.42.49 PM.png
 

Besides the main map screen, there are also some side screens where user can see things that interest them clearly in a list.

Here are four different UI tryouts for the list People.

Screen Shot 2017-09-01 at 3.53.59 PM.png
 

This also the same screen as above, but three tryouts of the content included in the screen instead of appearance.

Screen Shot 2017-09-01 at 3.57.10 PM.png
 

These are similar tryouts, but with different titles. The left one is just another experiment to see what if the lists of Places and Events are in the same screen to reduce user flow complexity.

Screen Shot 2017-09-01 at 4.02.38 PM.png
 

Those screens allow users to search for a specific interest they have in mind. The last screen appears when they go to a new place and want to change location.

Screen Shot 2017-09-01 at 4.08.57 PM.png
 

Users can also personalize their settings on the map to show information they want to see, and avoid the ones they don't.

Screen Shot 2017-09-01 at 3.52.29 PM.png
 

Those are the Settings screen of FOCUS.

Screen Shot 2017-09-01 at 3.49.07 PM.png
 

People can invite their friends from Contacts to join the FOCUS App.

Screen Shot 2017-09-01 at 3.51.02 PM.png
 

Besides all these, we felt like there should be a guide to users of how to use the App when it's their first time downloading it, so that it will be more intuitive. Therefore, these are some of the popups I created to guide users:

Screen Shot 2017-09-01 at 4.13.47 PM.png
 

Besides UI/UX design, I also did a bit of graphic design in this internship. Here are some of my works.

These are some lifestyle images to be put on social media to promote FOCUS:

 

These are the screen grabs to be put on App Store:


Reflections

This is my first time being officially involved in a startup environment. I learned several valuable things listed as below:

  1. Real startup is definitely different from class projects. Usually in class projects, we stopped at building a rough prototype the furthest. However, a mere prototype can sometimes be not enough to cover all the problems it may reveal while giving you a sense of accomplishment, but actually things are not over. During real-life situations, there are way more complexity and also more trivial things to deal with. One UI screen mockup may require a lot of iterations before the final version can be decided; I may have to spend hours changing the pixel size of every small icons so that it can be compatible for the software engineers to carry forward; every image to be put on the App Store requires strict guidelines to be followed. Those are all just part of the work, and every single detail has to go with 100% of preciseness in order to make everything work.

  2. The simpler, the better. The concept of MVP (Minimal Viable Product) usually works well during the early phase of a startup, due to that startups have a whole lot to deal with in their early stages besides just product development, such as funding, marketing, human resources, etc. In our case, we actually continued pushing back the date before we actually launched because our vision for the product was big enough to be complicating. Therefore, it is really a startup's own choice between how complicating the product should be and time-commitment/perfection.

  3. You won't be able to make the decision until you build the mockup. As you can see above, for each feature within the App as simple as color combination or a button, it requires a lot of different versions of iteration. In this case, if you don't really build out the mockup, you will never see which version works the best by merely imagine it in your head. Usually the imagination will be really different from the moment when you actually see it. For example, for the side screen showing a list of People, at first I thought it would not look good if I used white bubbles as the field to indicate each person; however, when I actually created it out, it ended up looking more fun and engaging to gain users' attention than the previous blueish-grey color.

  4. Communication is important but hard. Due to the fact that it was a remote internship, I never really got a chance to meet in person with any of the coworkers or other interns in my group. The way we usually communicated with each other was that the executive members would hold weekly calls on Friday to catch up with all the interns. However, I did think it would be better if I could gain more communications with the engineers, since UI and front-end development were really closely connected. There were a lot of times when I did something but then ended up doing the entire thing all over again because the requirements in design did not meet with the engineering.

Despite the lessons learned above, I DO feel really grateful for this excellent opportunity that was offered to me, and felt really proud and fulfilled seeing my design actually being put up into a real App. It has definitely been a valuable experience. Big shout out to the entire FOCUS team!!