UI/UX app design

ZAGREB STOCK EXCHANGE

Working within Adobe Xd I’ve learned a lot about Experience Design, and not just limiting myself to the visual segment but expanding my horizons towards more detailed research. This showed me how much the planning and wireframing phases were important to create a finished look and feel of a digital experience.

Looking through various UI projects I wasn’t yet sure what I was missing, what segments of the design process felt incomplete and needed more polish. So I was given a short challenge to create a tablet app for the Zagreb Stock Exchange based on what information I could gather on their website.

(One quick disclaimer before I move forward with this study, this project is a personal interpretation of a redesign concept for an existing product and is in no way affiliated with the actual copyright holders. This was done purely for educational purposes.)

The project had to be done from scratch within a few days and forced me to explore new guidelines and an industry I was completely unfamiliar with.

This created an ideal learning environment for me and gave me a deeper glimpse into my personal capabilities. I decided to approach the process by analyzing the existing website for the stock exchange to get an idea of what kind of information would be necessary to visualize in the app. After learning more about the stock exchange I downloaded a few apps that focused on various stock markets, just to get a better idea of any standard practices in UX design.

THE
CHALLENGE

GUI(DED)
DESIGN

One of the main points of the brief in this situation was to adhere to Microsoft visual guidelines for creating Surface Pro applications. This was also new to me, so I studied their documentation thoroughly and downloaded their UI kits to get a sense of where to take my design.

This made my process much easier than I had first anticipated. I felt it would limit my workflow while in fact, it offered much more creative space. Knowing where key elements had to be placed sped up the entire process while also giving me enough room to focus on other portions of the design.

"Main Screen"

APP STRUCTURE

The stock exchange app consists of 4 major sections The Home Screen, Favourites List, Market View, and News.

Along with these sections, there is also a User Profile panel and a Settings page for further customization.

Each screen efficiently presents all of its available information and allows the user to quickly view more detailed sections if necessary.

HOME

The main landing screen of the app would bring the user to a central dynamic graph that showcased the daily movements of the stock exchange. Users can press any of the top tabs at any given moment to switch to a different market, or press the calendar above to filter by date.

Below the graph are the most recent news updates and notifications with options for more detailed views.

"Dark Mode"
"Market"

CHECK MARKET

Another important aspect of the stock exchange app was to have the ability to view the entire market. This tab allowed users to read a full list of stocks with various sorting and filtering options.

For this app, I felt there was something important to add in, a favorites option. Each company/stock can be easily added to your favorites by clicking on the star next to their respective names. Once something has been added to the list, they will be easily viewable on the Favourites tab and even seen at any given moment on the scrolling top navigation.

NEWS AND UPDATES

This page offers users to quickly check the latest updates for various related media sources and check on company updates or read new financial statements.

With that, they can always check on the current top 10 highest and lowest changes each day.

"News"

WRAP-UP

Starting with very little ideas on how to even approach this project and with a deadline hitting quickly I had a great task in front of me. By the end of the first 2 days I had learned more about the stock exchange and Surface Pro app design, but most importantly I had learned more about research processes and efficient time management since I was still working on my other web design projects and writing my thesis.

Looking back at this project there is still more I would explore. I’d love to get more in-depth with the research and polish the design so that it could suit the needs of actual users. Another feature I would look into would be the option to directly buy and sell shares through the app.

If you enjoyed this case study be sure to check out my other work as well, or if you are interested in seeing more of my UI/UX work, visit my Dribbble profile.