REACTIVE UI | Midterm Project | myContact

Project Title: myContact

Link to Github

Functionalities: My midterm project is a simple mobile contact app. It basically contains a homepage with a list of contacts and a detail page for any selected contact. In the home page, the user can get access to particular contacts by searching or jumping to initials. Using the Tag button, the user can do filtering by selecting the tags they want from all tags. Also, the user can easily deselect the filters without opening the filter menu again. Using the Options button, the user can choose the preview mode and sorting method of the contact list, and also the color style of the whole app. Using the Add button, the user can see a page where a new contact is supposed to be added (actually it is not functional now). By clicking on a contact, the user can enter the detail page. In the detail page, full information about the contact is shown.

the Detail Page

Features: I call the app myContact because one main thing I want to elaborate here is the user’s control over this app. When I use mobile apps at ordinary times, I always like to play with the buttons that can change the look of the app. Therefore, I would like to offer my users some choices about what content and what style they would like to see. In the meantime, I realize it is equally important not to give users too much work so that they get confused. That’s why I hide the “options” menu in a button. I use a clean, clear, and pretty traditional layout to enhance affordance and accessibility of the functionalities.


different color styles: clean, warm, and night

Target Users: The target of myContact is the general public. It would be suitable for different groups of people since the user can choose whether to display email, address or phone number in the preview. In the ideal situation, the user would be able to add other properties (birthdays, companies, etc) to the contacts. Also, the user would be able to add tags to group the contacts.


1. Learning & Research: As a beginner of the mobile app design, it’s important to know where to start. Besides the instructions that we were given on the class site, I also found this article to be useful: 10 do’s and don’ts of mobile UX design. I got to know the importance of the procedure: research – target – functionality – visual design. I downloaded quite a few mobile contact apps and looked into how they are constructed. This list includes Simpler, SimpleContact, and FullContact. In my competitor analysis, I compared their pros and cons, and gradually got the shape of what I would like to make. For example, according to my observation, many contact apps can do sorting/preview/styling in different ways, but the buttons for these function are dispersed are hard to find. Therefore I decided to make these options all on one options page within different columns.

All Display Options in One Menu

2. User Stories & Functionality Design: I prioritize the functionalities of my contact book and listed them into several user stories, as can be seen in my User Stories post.

3. Visual Design & Mock-Up: Many people say that they like to do coding for the functionalities first, and then the styling. For me, it just feels right to do pure visual design before any coding. Designing the layout helps me understand the structure of the app and the order of each component. It has also been a great learning opportunity for me. I spent half an hour learning how to use Adobe Experience Design, and found it super convenient. Deciding the color and layout and getting accurate color and pixel values by simply picking colors and moving elements spares the efforts for me to adjust everything bit by bit in CSS. I have to thank my friend who gave tons of feedback about the visual design. Thank you, Carol, Leah, and Demi!

One edition of the mock-ups that I did in Xd

4. Coding: Coding is the main task of this project so it’s very complex in detail. Therefore, I’ll just talk about the essential things I did, and some challenges for me.

Essential Things:

  • Component! Make every repetitive part a component, in order to keep the structure efficient and organized. My components include the contact card, the option in the options menu, the tag in the filter menu, the little filter button on the top, the letter button in the sidebar, etc.
  • Route and Link! Since I don’t want the page to render every detail page every time, I link every contact to their detail page using Route and Link.
  • CSS! I implemented the CSS part according to my design in Xd after all the React part is done. I would like to say it again that it’s super convenient to just copy and paste the values I got in Xd to the CSS.


  • Jump to contacts beginning with a certain initial letter: I wanted to realize the effect that the user can jump to contacts with certain initials when a letter button is clicked. To achieve this, I give each contact an id that equals to its initial letter when the contacts are mapped out in the render. I make the letter button to be: <a href = “#{that letter}”>{that letter} </a>. When clicked, the first element with the corresponding id will go to the top of the page. Then, a question aroused. Since the top bar of the whole page is fixed, how can the first element with that initial letter lie below the top bar? I googled for the solution and found this article helpful: Anchor Links with a Fixed Header. The solution is quite simple, it’s to add an invisible div above the element.
  • Add different color styles: This task was a little bit time-consuming (just a little bit). The method I chose is to hold a state called this.state.colorStyle in App.js, and pass it to every component. Then, I add the corresponding class to every element. In CSS, I use “.ClassName.ColorStyle” to change the color style of every class. A tricky thing here is that when I use a picture of the icon, I cannot change the color directly. I learned how to use “filter: hue-rotate()” to change the hue.
  • Choose multiple filters: In my app, the user is able to select multiple filters. The relation between every filter is “or” but not “and”. This thing is a little bit tricky since I have to filter out every contact that can match any one of the filters. To achieve this, I made an empty array to hold the selected filters in the state. I add the filter to the array when the filter is selected, and remove it when it is deselected. Then, I loop through all the filters in that array and return the contact when it matches one of them.














Choose Multiple Filters

  • Change the background color of the Body: I found it quite hard to change the background color of the whole body, which will be seen when scrolling up or down. I found this article useful: Change Body Class React

Looking back on the user stories I wrote now after I finished the project, I think I accomplished most of my imaginations. I tidied up some of them and added some new thoughts. I have to admit that I was a little bit too ambitious at the beginning, thinking I could even sort the contact by contact frequency. Also, three color styles are a huge amount of work… Anyway, I’m quite satisfied with the efforts I put into this project and the effects I have achieved. If I have more time, I’ll implement the functionality to add new contacts.

Leave a Reply