My expertise is UX design for web & mobile products. One of my top priorities when I design is to enhance user experiences and functionality of a product by creating intuitive, meaningful, and elegant design solutions. I analyze user needs and create aesthetically rich user interfaces for mobile applications and websites.

I also have professional experiences in front-end development. I designed and coded this responsive website using HTML5, CSS3, jQuery, and Bootstrap. The selected works in this website include projects in web & mobile design, graphic and print design, architecture, and short animation.

I enjoy learning new tools and skills. I am easy going, detail-oriented, and passionate about my works. Art and design has always been my passion. When I am not working on digital designs, I enjoy making ceramics and jewelry pieces for fun.
UX METHOD
Ethnographic research, User interview, Competitive analysis, Persona & scenario, Journey mapping, Interface prototyping, Usability testing, A/B testing, Interaction flow map
-
SOFTWARE
Sketch, Adobe XD, Photoshop, Illustrator, InDesign, Dreamweaver, After Effects, Axure, InVision/Marvel
-
PROGRAMMING
HTML5, CSS3, jQuery (basic), Bootstrap (basic), Responsive design, Adaptive design
-
3D MODELING
AutoCAD, Luxology Modo, Rhino/V-Ray, SketchUp, 3D Printing CAD/CAM
Let's connect and share our stories!
You can contact me at info@maricelachan.com
Maricela Chan Design

WEB DESIGN | Moblabs


Project Challenge

Moblabs has an outdated company website that does not reflect the company growth on projects and team size. The new website needs to include company project details and also account for future project growth. While developing the new website, a temporary landing page would be displayed.

Solutions

- A responsive grid design on the home page is proposed to display company projects in a uniform system. The grid system also allows for future project additions easily.
- On the project details page, projects can show their unique brand identities. Each project uses its brand color as the unit background color.
- For the temporary landing page, the main function of the page is to make users curious about the company and provide contact information. I quickly developed a few design proposals, finalized the design, and coded the landing page within one day so that the landing page could be live immediately.

Home Page Design + Hover

The home page provides interesting summary for visitors. When hover is active, each unit displays interesting and fun facts to tell a story about the company.



Mockups of Product Details page

Each product uses its brand color schemes to show brand identity.





Temporary Landing Page while site is being developed

Coded in HTML5 and CSS3



My Contributions